在开发中，很多情况下我们都会用到搜索，而搜索下面通常都是一些'标签'，比如热门搜索，常用搜索，历史搜索等，如图：
手机淘宝的搜索界面
下面这些标签，看起来很简单，当真的上手写代码的时候，却发现无从写起，还好我刚开始的思路没有出现太大的偏差。在这里我先说一下我写的思路吧：刚开始我是用的xib做的，在控制器的xib中拖了多个button，然后将每个button设置约束、宽度自适应，最后将button与button之间的距离约束和每个button宽度自适应后的宽度约束拖到控制器的.m中，然后根据自适应后的宽度让button之间的距离相等。做完之后，基本上是实现了，button的文字也自适应了，button之间的距离也相等了，可是button的数量不固定啊，需要从后台请求。所以。。。还是用纯代码写吧。
说写就写，先写了一个字面量数组，当作从后台请求到的数据，然后通过for循环创建button，因为第一个button的位置是固定的，只需要宽度自适应就行，后面的button需要根据前一个button的位置进行布局，还需要注意的一点是：除了第一个button外，就需要先判断当前位置剩下的宽度和下一个button自适应后的宽度比较了，放不下的时候需要放在下一行，放在下一行的button的起始点是固定的。大概思路就是酱紫！
完成之后的效果
Talk is cheap, show you the code！！！
定义数据源和标签title的属性
初始化数据源并且布局所有标签
布局所有标签
自适应及所有标签的点击事件
好了，代码就到这里，我们下次再见！！！
网友评论