利用UICollectionView 实现页面瀑布流效果

关注

原创最新推荐文章于 2026-05-14 09:14:29 发布 693 阅读 AI 写同款· GEO 优化 ›

Swift：用UICollectionView整一个瀑布流本文的例子和Swift版本是基于Xcode7.2的。以后也许不知道什么时候会更新。我们要干点啥用新浪微博的Open API做后端来实现我们要提到的功能。把新浪微博的内容，图片和文字展示在collection view中。本文只简单的展示内容。下篇会用pinterest一样的效果来展示这些内容。我们准备优先展示图片。你的好友花了那么多时间拍照或者从相册里选择图片发上来多不容易。如果微博返回的数据中有中阅读详情

目前很多的app在页面的当中添加了瀑布流的效果。这个效果可以使用UIScrollView 来实现，但是利用此控件虽然灵活性比较高，但是在瀑布流当中，需要使用大量的image，需要考虑到大量image 添加到UI上会耗费大量的内存。苹果官方在IOS6.0 版本之后，添加了UICollectionView这个控件。此控件和UITableview 控件类似，继承了UIScrollView类。

利用UICollectionView 来实现瀑布流效果，不需要考虑多张图片添加的情况。点此下载。

UICollectionView 在使用的时候，最主要的是UICollectionViewLayout ，利用这个类，来控制collection view的布局和间隔等等。

- ( NSArray *)layoutAttributesForElementsInRect:( CGRect )rect; 这个方法是返回在collectionview 上的所有cell以及每个section 的 header 和foot 的布局

- ( UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:( NSIndexPath *)indexPath;根据传入的index path 来获取对应的cell 的rect 等。

- ( CGSize )collectionViewContentSize;返回整个collectionview 的contentSize。

使用委托的方式，

- ( CGSize )collectionViewLayout:( UICollectionView *)collectionView SizeOfCellAtIndex:( NSIndexPath *)indexPath;返回每个cell 的size，在瀑布流中的cell 每个的尺寸都不同时，可以方便返回

- (CGSize)collectionViewLayout:(UICollectionView*)collectionView SizeOfHeaderViewAtIndex:(NSIndexPath*)indexPath; 返回每个section 的header 的size

收录于