瀑布流框架的搭建

瀑布流大家都应该熟悉了，现在大部分电商应用中或多或少的都用到瀑布流，它可以吸引用户的眼球，使用户不易产生视觉疲劳，苹果在iOS6中增添了UICollectionView控件，这个控件可以说是UITableView的升级版，通过这个控件我们就能很简单的做出瀑布流，后面通过自己的封装可以让其变成一个小框架，更简单的应用到我们之后的开发中

最近开通了简书欢迎大家关注，我会不定期的分享我的iOS开发经验  点击关注－－>Melody_Zhy

如果想做瀑布流，那么就要自定义CollectionViewFlowLayout,因为这个类中有一个返回collectionView中所有子控件的布局属性（布局属性中有控件的frame和索引）的方法

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {  NSArray *arr = [super layoutAttributesForElementsInRect:rect];  for (UICollectionViewLayoutAttributes *attri in arr) {    attri.frame = CGRectMake(0, 0, 100, 300);  }  NSLog(@"%@", arr);  return arr;}

通过for循环（循环次数为一组中有多少个cell）创建布局属性，在循环中需要计算每一个cell的frame 所以后台要给真实的图片尺寸（如果不给，自己计算的尺寸会造成图片闪）

同时显示时一般都会等比例缩放。

cell宽度的计算

cell的宽 ＝  (内容的宽 - (列数 - 1) * 最小间距) / 列数

内容的宽 = collectionView的宽 - 组的左边间距 - 右边间距

CGFloat contentWidth = self.collectionView.bounds.size.width - self.sectionInset.left - self.sectionInset.right;CGFloat cellW = (contentWidth - (self.columnCount - 1) * self.minimumInteritemSpacing) / self.columnCount;

并且设置代理属性如下：

cellX的计算

在计算cellX的时候，如果通过 NSInteger col = i % self.columnCount;获取列号

要注意一个问题:

这样每次都是按顺序排列图片的，那么如果图片的尺寸参差不齐有的特别短有的又特别长，不巧的是长的都在一列短的又都在一列这样会造成美观性会很差，那么怎么解决这个问题呢，我们能不能让每一行添加完毕后，下一行在添加的时候将第一个添加在上一行高度最短的那面图片下面呢？答案当然是可以的-_-!

这时候我们就要定义一个可变字典属性，来存储每一列的高度，用列号来当字典的key

// 用来记录每一列的最的高度@property (nonatomic, strong) NSMutableDictionary *colDict;

在prepareLayout方法中给每一列的高度的字典一个默认的高度获得最矮的那一列列号的方法因此列号为 cellX为:

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {  return self.attrArrM;}

自定义布局属性的时候还要注意返回真实的contentSize，代码如下：

这时基本已经完成了，但如果我想要把这个瀑布流布局做成一个简单的框架就需要在简单的实现些初始化方法

在CollectionViewFlowLayout.h还要定义一个一行有几个cell的属性，当控制器引用这个类之后可以自行设置

@property (assign, nonatomic) NSInteger columnCount;

 

 

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：瀑布流框架的搭建

关键词：