在 iOS9 中，Apple 引入了 UIStackView，他讓你的應(yīng)用可以通過簡(jiǎn)單的方式，縱向或橫向的疊放你的 views。UIStackView 采用 auto layout 的方式來管理他的子視圖的位置和尺寸。讓你更簡(jiǎn)單的構(gòu)建自適應(yīng)的 UI。

如果在 iOS9 之前，你想要?jiǎng)?chuàng)建類似 UIStackView 為你提供的這種布局，你需要構(gòu)建大量的 constraints。你需要編輯許多諸如邊距、高度、x/y 軸的位置，還有它們的依賴關(guān)系等。

UIStackView 把這些全部幫你做了。甚至在你添加或者移除某些 view 時(shí)，還提供了平滑的動(dòng)畫。當(dāng) view 狀態(tài)改變時(shí)，他會(huì)自動(dòng)的改變 layout 的屬性值。

使用 UIStackView

現(xiàn)在我們通過創(chuàng)建一個(gè)例子來說明怎么使用 UIStackView，最終的代碼放在了 Github，你可以下載來研究.我們要?jiǎng)?chuàng)建一個(gè)簡(jiǎn)單的示范，演示 UIStackView 是怎么工作的？這個(gè)頁面底部有2個(gè)segmented controls，用來控制 UIStackView 的對(duì)齊和分布的屬性。

上面的圖片就是我們要?jiǎng)?chuàng)建的示例。如你所見，我們顯示了4個(gè)朋友的圖片，還有2個(gè) segmented controls 在下面。這些 UI 使用了auto layout 布局，可以適配多種尺寸。

一會(huì)兒的制作過程，會(huì)讓你感到驚喜，我們僅僅手動(dòng)的添加了4個(gè) layout positioning constraints。所有在這個(gè)UIStackView中的view都由它自動(dòng)控制位置。我們一共有4個(gè) UIStackView, 只有***個(gè)我們需要設(shè)置一下他的 constraints。這是我們頁面中 stackview 所在的位置。

當(dāng)你從 Interface Builder 中拖拽了一個(gè) vertical stack view 到頁面上后，你可以打開它的 constraint 面板，像上圖一樣編輯它的屬性。這會(huì)把這個(gè)主 stack view 放在頁面的中央，正確的位置上。

從 Interface Builder 中拖拽3個(gè) horizontal stack view 到剛才創(chuàng)建好的 UIStackView 中。在最上面的 stack view,包含四個(gè) UIImageView ,每個(gè) imageView 中展示一個(gè)我們的朋友的照片。你拖拽四個(gè) UIImageView 到 stack view 中就可以了。每個(gè)圖片的大小尺寸都是不一樣的。為了避免變形，我們給 imageView 的 contentMode 設(shè)置為 Aspect Fit。這意味著，不去管圖片的尺寸，圖片總會(huì)以正確的比例展示在 imageView 中。

你可能注意到了，在最終的 demo 中，每個(gè) imageView 之間有個(gè)間隔，這是因?yàn)樵O(shè)置了 stackView的 spacing 屬性為5的原因。在 interface builder 的 attributes inspector 面板可以設(shè)置 spacing 的值，同時(shí)還可以設(shè)置 alignment 和 distribution 的屬性。這里我們?nèi)笔〉脑O(shè)置為 Fill。因?yàn)橐粫?huì)兒我們會(huì)通過選擇 segment 來改變它的值。

另外兩個(gè) stackView,同樣是 horizontal stack view。非常簡(jiǎn)單，每個(gè) stack view 中包含一個(gè) label 和一個(gè) segmented control。設(shè)置 segmented control為下面的內(nèi)容。

Distribution 
 
Fill 
 
Fill Equally 
 
Fill Proportionally 
 
Equal Spacing 
 
Equal Centering 
 
Alignment 
 
Fill 
 
Top 
 
Center 
 
Bottom 

我們一會(huì)兒就能看到，這些屬性是如何影響布局的。很多時(shí)候，他們的排列方式依賴 contentSize的值。好在，我們這個(gè)例子非常簡(jiǎn)單，image 的大小就是照片的實(shí)際大小。

現(xiàn)在我們的 UI 都創(chuàng)建好了。我們需要給 segment 設(shè)置選中后的動(dòng)作。首先把最上面的 stack view 拖拽 outlet 到 viewController 中，命名為 peopleStackView。然后分別拖拽一個(gè) action 給segmented control。在 action 中對(duì) peopleStackView 的 alignment 和 distribution 屬性進(jìn)行調(diào)節(jié)，對(duì)齊和排列方式由用戶決定。

你可以看到，我給每個(gè)動(dòng)作加了一個(gè)動(dòng)畫的效果，但這不是必須的。如果你移除動(dòng)畫效果，對(duì)齊和排列的方式依然會(huì)改變。好現(xiàn)在運(yùn)行一下程序吧。

你可以看到視頻中的結(jié)果，點(diǎn)擊打開視頻

嘗試著使用不同的排列組合，看一下會(huì)是什么結(jié)果。它會(huì)讓你知道UIStackView時(shí)多么強(qiáng)大，在不同尺寸的設(shè)備上開發(fā)用戶界面有多方便。

為現(xiàn)有的view，添加UIStackView

如果你想為你現(xiàn)在已經(jīng)做好的 view 添加 UIStackView，也很簡(jiǎn)單。先移除掉你的 view 上的constraint，然后選中他們，點(diǎn)擊一下 interface builder 的底部右手邊，***個(gè)按鈕。（就是原來你給 view 添加 constraint 的那些按鈕，左邊多了一個(gè)）。這會(huì)立刻把你選中的view，全部放入一個(gè) UIStackView 中。

這會(huì)把你原來的布局方式轉(zhuǎn)為stack view的布局方式，由stack view來控制布局。

延伸閱讀

想要了解更多關(guān)于Xcode7中 UIStackView的內(nèi)容，推薦閱讀 WWDC 2015 的 session 218 Mysteries of Auto Layout, Part 1.在視頻前15分鐘里，Jason Yao 介紹了 UIStackView，并且現(xiàn)場(chǎng)制作了一個(gè)Demo演示如何操作的。