1、前言
上篇文章主要说明了如何解决SB中scrollView的子视图约束问题,由于例子太过简单想必大家还感受不到为什么要用storyboard进行scrollView的子视图搭建,你可能会说用手写代码创建更加方便灵活,在这篇文章中,我就以美团首页的分类滚动视图为例来向大家展示XIB时代自动化布局的一些效率上的优势,完成的情况大致是这样的:(整个过程仅仅几分钟搞定)
2、正文
下面进入正题,我会一步一步带大家完成这个页面的搭建,整个scrollView内部的约束最终只有这么多
你没有看错,只有scrollView内部的这个stackView存在上下左右宽高六个约束,整个页面的约束布局已经完成
如果你在阅读这篇博客时还不知道什么是UIStackView是什么鬼,可以点击这里:戳我(对于UIStackView的开发兼容iOS7版本,可以搜索FDStackView,来自孙源大神的ForkingDog团队的杰作,完全不用担心低版本无法使用的问题)。
基础界面就不必多说了,就是简单的UIPageControl和UIScrollView的配合搭建。我们要分析的重点就是三页的滚动视图如何搭建:
每个页面有2X5个分类选项,一共三页,如果传统的手写代码就是三重for循环搞定,第一层控制页数,第二层控制行数,第三层控制列数。至于这个子视图,你可以选择自定义,或者改写UIbutton的imageView和titleLabel的大小和位置来达到同样的效果。如果是用可视化编程直接布局呢?
在没有stackView之前,你需要指定每个子视图的宽高约束和他们相对于父视图的约束,对于如此庞大的约束工程来说,如果你说自己没有迷失到拉约束中,那最后应该也是心里憔悴。但是有了UIStackView就不一样了,既然是号称强大的布局利器,自然有它独到的强大之处!你只需要改变它的属性设置(Axis、Alignment、Distribution、Spacing)就可以在不对子视图拉约束的情况下达到你想要的布局效果。下面就来简单分析一下我们该如何用UIStackView来搭建这样一个滚动视图:
1、首先是一个包含五个水平方向布局的stackView
2、接着就是包含步骤一中的stackView的竖直方向布局的stackView
3、一个包含步骤二中stackView的水平方向布局滚动的stackView
4、设置步骤三中的stackView相对于scrollView上下左右约束为0,宽度与scrollView宽度为3:1,高度与scrollView相等,这样一来相当于设置scrollView.contentSize = CGSizeMake(屏宽x3,自身高度),如此一来整个布局过程就完成了。最重要的一步:设置所有的stackView对齐方式为Fill,布局属性为FillEqually,整个布局过程如下:
完整的效果图:
完整的项目示例在这里(包含了两个不同的实现):https://github.com/lvXiaoPeng/LYStackViewExample