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