【iOS】热词集合布局layout

需求背景

读取搜索词至输入框,设计图如下:

原型设计图

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

实现思路对比

  1. 创建UIScrollView,计算字符串的宽度,然后遍历,剩余宽度不足,则换行,主要计算精确contentSize即可。
  • 缺点:如果item多的话,重用性低,浪费性能,当然可以自己模仿tableView创建可重用item,根据是否移出屏幕合理的从缓存池中存取,但是代价太大,不提倡。
  1. 创建UICollectionView,应用系统自带的UICollectionViewFlowLayout,不需要自定义布局,item也可以重用。
  • 缺点:官方提供的 UICollectionViewFlowLayout精确度不高,包括边距,行列间距计算不精确,并且拓展性不高。
  1. 创建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源码地址: 传送门
如有问题,欢迎批评指正:简书地址
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容