UIScrollView+UIStackView快速搭建滚动视图

1、前言

上篇文章主要说明了如何解决SB中scrollView的子视图约束问题，由于例子太过简单想必大家还感受不到为什么要用storyboard进行scrollView的子视图搭建，你可能会说用手写代码创建更加方便灵活，在这篇文章中，我就以美团首页的分类滚动视图为例来向大家展示XIB时代自动化布局的一些效率上的优势，完成的情况大致是这样的:(整个过程仅仅几分钟搞定)

2、正文

下面进入正题，我会一步一步带大家完成这个页面的搭建，整个scrollView内部的约束最终只有这么多

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