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