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