转载

【iOS系列】- iOS吸附效果的实现之 UICollectionView的使用全解

UICollectionView可以做很多的布局，在iOS开发中较为重要，所以这里就以实例来讲解UICollectionView的使用进阶。

注：用StoryBoard拖出来的UICollectionView的布局就是流水布局，无法修改，所以如果要实现一些自定义的效果需要通过代码创建UICollectionView

项目示例如下：效果为吸附的效果，App Store中也有类似的效果，就是单元格出来小于一半：则就让其回退；如果大于一半：则就让其直接移出界面显示区域：

Demo下载地址： iOS_Demo

一些概念

UICollectionView中有个重要的内容 UICollectionViewLayout ，UICollectionView的显示是由其布局文件决定的。

UICollectionViewFlowLayout ：系统提供的流水布局，如果要自定义流水布局的效果可以自定义这个类。

布局决定每一个cell的尺寸，位置，间距等等。

每一个cell/item都有自己UICollectionViewLayoutAttributes

每一个indexPath也都有自己UICollectionViewLayoutAttributes

开始

所以这次做的吸附效果也完全是自定义了 UICollectionViewFlowLayout ，

下面对这个类的主要方法进行大体介绍：

prepareLayout :一些初始化的工作最好这里完成，比如item的大小等等

-(void)prepareLayout { [super prepareLayout];//需要调用super方法  //初始化 self.itemSize = CGSizeMake(90, 90);//设置item的大小 self.scrollDirection = UICollectionViewScrollDirectionHorizontal;//设置滚动防线 self.minimumLineSpacing = 10;//设置cell的间距 self.sectionInset = UIEdgeInsetsMake(0, 10, 0, 10);//设置四周的间距 }

targetContentOffsetForProposedContentOffset :控制控制最后UICollectionView的最后去哪里，我们这里需要做的吸附效果的逻辑代码就需要在这里完成。参数介绍 proposedContentOffset :原本UICollectionView停止滚动那一刻的位置； velocity ：滚动速度
```
-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity {     //TODO }
```
shouldInvalidateLayoutForBoundsChange :边界发生改变时，是否需要重新布局，返回YES就需要重新布局(会自动调用layoutAttributesForElementsInRect方法，获得所有cell的布局属性)
```
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
```
{

return YES;

}

layoutAttributesForElementsInRect :返回所有cell的布局属性

-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {     return [super layoutAttributesForElementsInRect:rect]; }

方法介绍完毕，我们在 prepareLayout

-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity {     //1.计算scrollview最后停留的范围     CGRect lastRect ;     lastRect.origin = proposedContentOffset;     lastRect.size = self.collectionView.frame.size;          //2.取出这个范围内的所有属性     NSArray *array = [self layoutAttributesForElementsInRect:lastRect];          //起始的x值，也即默认情况下要停下来的x值     CGFloat startX = proposedContentOffset.x;          //3.遍历所有的属性     CGFloat adjustOffsetX = MAXFLOAT;     for (UICollectionViewLayoutAttributes *attrs in array) {         CGFloat attrsX = CGRectGetMinX(attrs.frame);         CGFloat attrsW = CGRectGetWidth(attrs.frame) ;          if (startX - attrsX  < attrsW/2) {             adjustOffsetX = -(startX - attrsX+ItemMaigin);         }else{             adjustOffsetX = attrsW - (startX - attrsX);         }              break ;//只循环数组中第一个元素即可，所以直接break了     }     return CGPointMake(proposedContentOffset.x + adjustOffsetX, proposedContentOffset.y); }

这样我们要做的吸附效果的Layout文件就完成了。

我们在初始化UICollectionView的时候选择带有Layout参数的init方法即可。

UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:rect collectionViewLayout:viscosityLayout];

Demo地址： iOS_Demo-自定义UICollectionView的布局

Demo下载地址： iOS_Demo

注：把Demo中的 ViewController.m 的33行

UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:rect collectionViewLayout:viscosityLayout];

改成//具体初始化的逻辑已经实现了。

UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:rect collectionViewLayout:flowLayout];

即可实现下图所示的效果(cell滚动的时候，中间会慢慢变大，也有吸附效果，不过在最中心的cell才会吸附在中心)，具体做法是在 layoutAttributesForElementsInRect 方法中修复了布局属性，可下载Demo自行查看。

【iOS系列】- iOS吸附效果的实现之 UICollectionView的使用全解

作者：Darren

微博：@IT_攻城师

github： @Darren90

博客： http://www.cnblogs.com/fengtengfei/

欢迎您的访问...

正文到此结束

所属分类：编程技术

本文标签： 代码 http GitHub src NSA 微博 UI 开发 expat 参数 tar 实例遍历下载 git App 博客
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

【iOS系列】- iOS吸附效果的实现之 UICollectionView的使用全解