這是一篇挺老的文章，主要就是介紹在iOS9時推出的控件UIStackView。我發現網上的資料并不算多，而AppCoda的這一篇就淺顯易懂，所以決定翻譯一下，再寫個Demo。

Demo 地址如下 ： https://github.com/liberalisman/StackView-Demo

UIStackView 簡介

開始這個教程的話，我們會講一些iOS9的新特性，iOS最近推出的新版本帶來了很多新的特性，而新推出的UIStackView應該引起開發者第一時間的關注。據我所知，一些開發者認為使用AutoLayout去設計一些復雜的用戶界面是十分困難的。UIStackView就是幫助開發者將這些復雜頁面的設計工作變得更簡單。

UIStackView為布局一組控件提供了線性的布局頁面，這組控件可以垂直顯示，也可以水平顯示。當View被加入到UIStackView,你不再需要為它設置約束。UIStackView會自動管理子控件的布局并為他們添加約束。這也就意味著，子控件可以去適應不同的屏幕尺寸。

再進一步講，你可以將一個UIStackView放進另一個UIStackView中以實現更為復雜的用戶界面的設計工作。當然千萬不要被我誤導，UIStackView并不意味著你再也不必和約束打交道，你至少是要為UIStackView設置約束的。UIStackView只是節省了你為每一個界面元素添加約束的時間，同時你在UIStackView中添加和刪除約束將變得超級簡單。

Xcode 7提供了兩種方式去使用UIStackView。你可以在對象庫拖一個UIStackView然后放進StoryBoard中，UIStackView有水平和垂直兩種，然后你可以拖拽一些視圖控件，例如Label,Button,image等直接放入UIStackView。或者，你也可以利用在自動布局工具欄中Stack選項。利用這種方法，你可以選擇兩個或者多個視圖控件，直接點擊Stack。Interface Builder會將這些試圖對象加入到UIStackView并且重新指定他們的大小。說到此處如果你還沒有明白UIStackView，那也不要擔心。在這個教程中，我們會展示這兩種方法。只需要繼續閱讀，然后在一瞬間，你會 怦 的一下就懂了。

The Demo App

首先我們要預覽一下我們即將構建的App，在這個教程中，我們會展示在Interface中利用UIStackView如何構建這個App。

當然你不用UIStackView也可以構建一個這樣的頁面，但是正如你所見，UIStackView完全改變了你進行頁面布局的方式。這個教程無需任何代碼，我們將專注于利用Interface Builder來構建這個用戶界面。

添加 UIStackView

打開 Xcode 7 ，然后打開main.storyBoard。從右側的對象庫面板中，往storyBoard中拖一個垂直方向的UIStackView。UIStackView可以分別管理水平方向和垂直方向的子控件。因為我們想要布局的ImageViews是垂直方向的，所以我們選擇一個垂直方向的UIStackView。

接下來從控件庫往外拖一個Imageview，當你把Imageview拖拽到StackView里，Imageview會自動調整尺寸，重復上面的步驟，我們再往StackView里面添加兩個imageView,這時候神奇的一幕發生了，當你把另外兩個imageView添加到StackView里面時，StackView會自動給這兩個imageView進行垂直布局，并為他們添加上了約束條件。是不是很酷？

為 UIStackView 添加約束

StackView為開發者節省了為每一個界面元素添加約束的時間，但是你必須要為你的StackView添加約束條件，接下來我們將為剛才添加到是圖中的StackView添加約束

• 設置StackView與父控件頂部、左側、右側的距離
• 設置StackView的高度占父控件高度的70%

現在，我們選中StackView并點擊Pin按鈕。設置距離頂部、左側、右側的距離各自分別為10，0，0。并且把這三個約束加上。

現在StackView的位置，并不滿足我們的約束條件，你需要點擊警告去修復這個問題。

想設置高度的約束，到文檔大綱視圖。按住Control鍵，從StackView拖線到View上面，松開后，選擇Equal Height.

這樣設置以后，StackView的高度就與使徒的View相等。然而我們只需要讓StackView的高度是視圖的View的70%。所以選擇StackView的Height屬性，然后到屬性面板，把Mutiplier的值從1.0變成0.7。

設置StackView屬性值

StackView看起來并沒有像預期一樣，一旦你使用了StackView，你可以通過修改StackView的屬性值來改變它的外觀。

Axis是坐標軸，負責水平還是垂直。
alignment是對齊方式。

Distribution決定了StackView中子控件的尺寸和位置。它默認被設置為Fill。在這個例子里，StackView要盡可能的利用有限的空間去適配它的子控件。接下來我們將選項改為Fill Equally。StackView會自動將里面的子控件重新布局為大小相等的控件。

Space選項允許你通過修改該選項，調解兩個控件之間的距離，此處將值改為10。

設置圖片

接下來為三個ImageView設置圖片

現在可以把程序跑起來看看效果，在不同的模擬器，UI都可以很好的適配各種設備。StackView已經自動幫你添加好了布局。實際上你可以通過頁面調試選項，來查看為ImageView添加的布局。

用嵌套的方式布局控件

還有一些Lable和Button需要添加到頁面上，如圖所示，拖兩個Lable到StackView的正下方，上面的標簽字號為30.

然后選中兩個Lable，點擊stack選項，將這兩個控件合并為一個StackView。

接下來添加兩個按鈕，一個Like,一個Share。把這兩個控件合并為一個StackView，設置間距為 5，方向水平。

把按鈕的StackView拖進Label的StackView中，選中頂部的Nature標簽和Buttonde StackView,點擊stack選項,將他們兩個合并為一個StackView，設置方向為水平

選中這個StackView，將對齊方式調整為First BaseLine,沿第一個對象的基線對齊，然后給Lable和Button加一個20的間距。

這樣，我們只需要利用 StackView 的嵌套，就可以實現我們想得到的布局。

最后，我們實現了用StackView包裹ImageView,同時也實現了StackView包裹Label和Button。將頂部、左側、右側各自設置值為 8，0，0。

為了確保Label的描述文字可以正好適配，將Label的行數改為0，文字的Line break設置為文字包裹。這樣你就完成了界面的設計。

現在可以把程序跑起來看一下效果

如果橫屏，效果是這樣的：

看起來還可以，但是如果橫屏時圖片是水平排列那就更好了：

利用*Size Class 構建自適應的 StackView

為了實現 iPhone 在橫屏時顯示不同的布局，我們需要讓StackView是自適應。在 iOS8，介紹過 Size Class 的概念，下面的表格介紹了不同的 iOS 設備以及他們相對應的 Size Class。

你可以利用 Size Class 提供一個指定的布局去覆寫之前的布局設計。在這個例子中，我們需要將StackView的方向在以下兩種情況下，由垂直變為水平。

• 寬度緊湊 - 高度緊湊
• 寬度寬松 - 高度緊湊

接下來選擇我們的StackView,然后打開屬性面板，點擊Axis邊上的+號。

選擇 任意寬度 , 高度緊湊，并把StackView的方向設置為水平方向。

然后。。。。。。就妥了！

總結

在這個教程中，對StackView進行了簡單介紹，為大家做了一個Demo，以及如何使用這個全新的組件。StackView這種流線型的布局方式，讓你在布局時只需要使用很少的約束。

Apple的工程師也是推薦優先使用StackView，實在不行在用原生的約束。

我自己做了一個簡單的Demo，地址如下 ： https://github.com/liberalisman/StackView-Demo