【iOS】热词集合布局layout

需求背景

读取搜索词至输入框，设计图如下：

原型设计图

说明：上面的数字分别是一个个的长度不一的热词，一一排列，宽度不够就换行，直至排列完毕。

实现思路对比

1. 创建UIScrollView,计算字符串的宽度，然后遍历，剩余宽度不足，则换行，主要计算精确contentSize即可。

• 缺点：如果item多的话，重用性低，浪费性能，当然可以自己模仿tableView创建可重用item，根据是否移出屏幕合理的从缓存池中存取，但是代价太大，不提倡。

2. 创建UICollectionView,应用系统自带的UICollectionViewFlowLayout，不需要自定义布局，item也可以重用。

• 缺点：官方提供的 UICollectionViewFlowLayout精确度不高，包括边距，行列间距计算不精确，并且拓展性不高。

3. 创建UICollectionView,自定义layout。既可以重用item，项目以后的拓展性维护性也会高。

• 缺点：需要重写自定义布局，实现起来细节较多，但考虑到维护性，建议选择此方法实现。

实现步骤

1. 继承 UICollectionViewLayout ，重写布局

2. - (void)prepareLayout初始化方法，初始化数据

3. - (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath，计算第一个item的frame，并将结果返回。

4. - (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect 返回所有的上述已经计算好的布局的集合。

5. - (CGSize)collectionViewContentSize根据上述集合，计算最大的y值，否则collectionView的contentSize不正确，就会导致内容不能正常滑动。

6. - (BOOL)shouldInvalidateLayoutForBoundsChange该方法用来决定是否需要更新布局。如果collection view需要重新布局返回YES,否则返回NO,默认返回值为NO。子类重载该方法的时候，基于是否collection view的bounds的改变会引发cell和view布局的改变，给出正确的返回值。由于我们bounds改变并不会引起cell的改变故，返回YES或NO都可以的。

最后

通过以上就完成了整个视图的布局layout

• 如何使用？

正常的创建UICollectionView及上述自定义的layout,设置对应的参数后，就像使用原生的UICollectionViewFlowLayout一样使用就可以了。这里略，如有需要详情可参见Demo。

最终运行效果图

• 模拟器

运行效果.gif

Git源码地址: 传送门

如有问题，欢迎批评指正：简书地址