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

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

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

使用 UIStackView

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

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

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

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

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

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

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

Distribution

 Fill

 Fill Equally

Fill Proportionally

Equal Spacing

Equal Centering

Alignment

 Fill

Top

Center

Bottom

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

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

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

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

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

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

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

這會把你原來的布局方式轉(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)場制作了一個Demo演示如何操作的。