iOS类似于搜索历史记录布局的两种实现方式
2016-08-05 本文已影响2246人
逆流丶而上
gitHub地址:github.com/wangtongke/AutoFitLabel.git
如果是下面这种的

则比较容易实现。一种是通过动态计算label的宽度,九宫格创建。另外一种就是使用collectionView,重写layout来实现,也就是一个横向的瀑布流布局。推荐使用MSSAutoresizeLabelFlow,已经封装好,创建时传一个数组即可,点击事件则通过block传递。创建方式如下

另外一种如下图

这种就比较蛋疼了,横向瀑布流用不了了。只能自己用九宫格写。下面说一下要点及思路。
1、每行的字数、label个数都是不固定的,但是间距都是一定的,并且距离边界都是一样的。
2、每一个级别的高度也是不固定的,
3、上面点击之后,下级会改变,所以还要考虑重用。
下面主要说一下九宫格创建。考虑到每行不能超过多少个字,或者不能多于几个按钮(这里设置的是18个字,6个按钮),并且每行最少两个。所以使用了双重循环,第一层循环为遍历整个数组,内嵌两个循环,一个循环为while循环判断每行不能超过18个字或者6个按钮。另外一个循环创建btn。
如下:

内部while循环

超过18个字或者大于6个就跳出循环,btnNum为本次循环所要创建的btn个数。

结束本次外部循环后,使i= j,然后再开始下一行的循环。
gitHub地址GitHub - wangtongke/AutoFitLabel: 自适应label布局,类似于历史搜索列表
github上面只有下面这两种布局。没有多级联动类的布局。

另外按钮宽度根据文字计算,这个不在多说