1、前言
上篇文章主要說明了如何解決SB中scrollView的子視圖約束問題，由于例子太過簡單想必大家還感受不到為什么要用storyboard進行scrollView的子視圖搭建，你可能會說用手寫代碼創(chuàng)建更加方便靈活，在這篇文章中，我就以美團首頁的分類滾動視圖為例來向大家展示XIB時代自動化布局的一些效率上的優(yōu)勢，完成的情況大致是這樣的:(整個過程僅僅幾分鐘搞定)
2、正文
下面進入正題，我會一步一步帶大家完成這個頁面的搭建，整個scrollView內(nèi)部的約束最終只有這么多
你沒有看錯，只有scrollView內(nèi)部的這個stackView存在上下左右寬高六個約束，整個頁面的約束布局已經(jīng)完成
如果你在閱讀這篇博客時還不知道什么是UIStackView是什么鬼，可以點擊這里:戳我(對于UIStackView的開發(fā)兼容iOS7版本，可以搜索FDStackView，來自孫源大神的ForkingDog團隊的杰作，完全不用擔(dān)心低版本無法使用的問題)。
基礎(chǔ)界面就不必多說了，就是簡單的UIPageControl和UIScrollView的配合搭建。我們要分析的重點就是三頁的滾動視圖如何搭建：
每個頁面有2X5個分類選項，一共三頁，如果傳統(tǒng)的手寫代碼就是三重for循環(huán)搞定，第一層控制頁數(shù)，第二層控制行數(shù)，第三層控制列數(shù)。至于這個子視圖，你可以選擇自定義，或者改寫UIbutton的imageView和titleLabel的大小和位置來達(dá)到同樣的效果。如果是用可視化編程直接布局呢？
在沒有stackView之前，你需要指定每個子視圖的寬高約束和他們相對于父視圖的約束，對于如此龐大的約束工程來說，如果你說自己沒有迷失到拉約束中，那最后應(yīng)該也是心里憔悴。但是有了UIStackView就不一樣了，既然是號稱強大的布局利器，自然有它獨到的強大之處！你只需要改變它的屬性設(shè)置(Axis、Alignment、Distribution、Spacing)就可以在不對子視圖拉約束的情況下達(dá)到你想要的布局效果。下面就來簡單分析一下我們該如何用UIStackView來搭建這樣一個滾動視圖:
1、首先是一個包含五個水平方向布局的stackView
2、接著就是包含步驟一中的stackView的豎直方向布局的stackView
3、一個包含步驟二中stackView的水平方向布局滾動的stackView
4、設(shè)置步驟三中的stackView相對于scrollView上下左右約束為0，寬度與scrollView寬度為3:1,高度與scrollView相等，這樣一來相當(dāng)于設(shè)置scrollView.contentSize = CGSizeMake(屏寬x3,自身高度)，如此一來整個布局過程就完成了。最重要的一步：設(shè)置所有的stackView對齊方式為Fill,布局屬性為FillEqually，整個布局過程如下：
完整的效果圖：
完整的項目示例在這里(包含了兩個不同的實現(xiàn))：https://github.com/lvXiaoPeng/LYStackViewExample
