這是一篇挺老的文章，主要就是介紹在iOS9時推出的控件UIStackView。我發(fā)現(xiàn)網(wǎng)上的資料并不算多，而AppCoda的這一篇就淺顯易懂，所以決定翻譯一下，再寫個Demo。
Demo 地址如下 ： https://github.com/liberalisman/StackView-Demo
UIStackView 簡介
開始這個教程的話，我們會講一些iOS9的新特性，iOS最近推出的新版本帶來了很多新的特性，而新推出的UIStackView應(yīng)該引起開發(fā)者第一時間的關(guān)注。據(jù)我所知，一些開發(fā)者認(rèn)為使用AutoLayout去設(shè)計一些復(fù)雜的用戶界面是十分困難的。UIStackView就是幫助開發(fā)者將這些復(fù)雜頁面的設(shè)計工作變得更簡單。
UIStackView為布局一組控件提供了線性的布局頁面，這組控件可以垂直顯示，也可以水平顯示。當(dāng)View被加入到UIStackView,你不再需要為它設(shè)置約束。UIStackView會自動管理子控件的布局并為他們添加約束。這也就意味著，子控件可以去適應(yīng)不同的屏幕尺寸。
再進(jìn)一步講，你可以將一個UIStackView放進(jìn)另一個UIStackView中以實現(xiàn)更為復(fù)雜的用戶界面的設(shè)計工作。當(dāng)然千萬不要被我誤導(dǎo)，UIStackView并不意味著你再也不必和約束打交道，你至少是要為UIStackView設(shè)置約束的。UIStackView只是節(jié)省了你為每一個界面元素添加約束的時間，同時你在UIStackView中添加和刪除約束將變得超級簡單。
Xcode 7提供了兩種方式去使用UIStackView。你可以在對象庫拖一個UIStackView然后放進(jìn)StoryBoard中，UIStackView有水平和垂直兩種，然后你可以拖拽一些視圖控件，例如Label,Button,image等直接放入UIStackView?；蛘?，你也可以利用在自動布局工具欄中Stack選項。利用這種方法，你可以選擇兩個或者多個視圖控件，直接點擊Stack。Interface Builder會將這些試圖對象加入到UIStackView并且重新指定他們的大小。說到此處如果你還沒有明白UIStackView，那也不要擔(dān)心。在這個教程中，我們會展示這兩種方法。只需要繼續(xù)閱讀，然后在一瞬間，你會 怦 的一下就懂了。
The Demo App
首先我們要預(yù)覽一下我們即將構(gòu)建的App，在這個教程中，我們會展示在Interface中利用UIStackView如何構(gòu)建這個App。
當(dāng)然你不用UIStackView也可以構(gòu)建一個這樣的頁面，但是正如你所見，UIStackView完全改變了你進(jìn)行頁面布局的方式。這個教程無需任何代碼，我們將專注于利用Interface Builder來構(gòu)建這個用戶界面。
添加 UIStackView
打開 Xcode 7 ，然后打開main.storyBoard。從右側(cè)的對象庫面板中，往storyBoard中拖一個垂直方向的UIStackView。UIStackView可以分別管理水平方向和垂直方向的子控件。因為我們想要布局的ImageViews是垂直方向的，所以我們選擇一個垂直方向的UIStackView。
接下來從控件庫往外拖一個Imageview，當(dāng)你把Imageview拖拽到StackView里，Imageview會自動調(diào)整尺寸，重復(fù)上面的步驟，我們再往StackView里面添加兩個imageView,這時候神奇的一幕發(fā)生了，當(dāng)你把另外兩個imageView添加到StackView里面時，StackView會自動給這兩個imageView進(jìn)行垂直布局，并為他們添加上了約束條件。是不是很酷？
為 UIStackView 添加約束
StackView為開發(fā)者節(jié)省了為每一個界面元素添加約束的時間，但是你必須要為你的StackView添加約束條件，接下來我們將為剛才添加到是圖中的StackView添加約束
- 設(shè)置
StackView與父控件頂部、左側(cè)、右側(cè)的距離 - 設(shè)置
StackView的高度占父控件高度的70%
現(xiàn)在，我們選中StackView并點擊Pin按鈕。設(shè)置距離頂部、左側(cè)、右側(cè)的距離各自分別為10，0，0。并且把這三個約束加上。
現(xiàn)在StackView的位置，并不滿足我們的約束條件，你需要點擊警告去修復(fù)這個問題。
想設(shè)置高度的約束，到文檔大綱視圖。按住Control鍵，從StackView拖線到View上面，松開后，選擇Equal Height.
這樣設(shè)置以后，StackView的高度就與使徒的View相等。然而我們只需要讓StackView的高度是視圖的View的70%。所以選擇StackView的Height屬性，然后到屬性面板，把Mutiplier的值從1.0變成0.7。
設(shè)置StackView屬性值
StackView看起來并沒有像預(yù)期一樣，一旦你使用了StackView，你可以通過修改StackView的屬性值來改變它的外觀。
Axis是坐標(biāo)軸，負(fù)責(zé)水平還是垂直。
alignment是對齊方式。
Distribution決定了StackView中子控件的尺寸和位置。它默認(rèn)被設(shè)置為Fill。在這個例子里，StackView要盡可能的利用有限的空間去適配它的子控件。接下來我們將選項改為Fill Equally。StackView會自動將里面的子控件重新布局為大小相等的控件。
Space選項允許你通過修改該選項，調(diào)解兩個控件之間的距離，此處將值改為10。
設(shè)置圖片
接下來為三個ImageView設(shè)置圖片
現(xiàn)在可以把程序跑起來看看效果，在不同的模擬器，UI都可以很好的適配各種設(shè)備。StackView已經(jīng)自動幫你添加好了布局。實際上你可以通過頁面調(diào)試選項，來查看為ImageView添加的布局。
用嵌套的方式布局控件
還有一些Lable和Button需要添加到頁面上，如圖所示，拖兩個Lable到StackView的正下方，上面的標(biāo)簽字號為30.
然后選中兩個Lable，點擊stack選項，將這兩個控件合并為一個StackView。
接下來添加兩個按鈕，一個Like,一個Share。把這兩個控件合并為一個StackView，設(shè)置間距為 5，方向水平。
把按鈕的StackView拖進(jìn)Label的StackView中，選中頂部的Nature標(biāo)簽和Buttonde StackView,點擊stack選項,將他們兩個合并為一個StackView，設(shè)置方向為水平
選中這個StackView，將對齊方式調(diào)整為First BaseLine,沿第一個對象的基線對齊，然后給Lable和Button加一個20的間距。
這樣，我們只需要利用 StackView 的嵌套，就可以實現(xiàn)我們想得到的布局。
最后，我們實現(xiàn)了用StackView包裹ImageView,同時也實現(xiàn)了StackView包裹Label和Button。將頂部、左側(cè)、右側(cè)各自設(shè)置值為 8，0，0。
為了確保Label的描述文字可以正好適配，將Label的行數(shù)改為0，文字的Line break設(shè)置為文字包裹。這樣你就完成了界面的設(shè)計。
現(xiàn)在可以把程序跑起來看一下效果
如果橫屏，效果是這樣的：
看起來還可以，但是如果橫屏?xí)r圖片是水平排列那就更好了：
利用*Size Class 構(gòu)建自適應(yīng)的 StackView
為了實現(xiàn) iPhone 在橫屏?xí)r顯示不同的布局，我們需要讓StackView是自適應(yīng)。在 iOS8，介紹過 Size Class 的概念，下面的表格介紹了不同的 iOS 設(shè)備以及他們相對應(yīng)的 Size Class。
你可以利用 Size Class 提供一個指定的布局去覆寫之前的布局設(shè)計。在這個例子中，我們需要將StackView的方向在以下兩種情況下，由垂直變?yōu)樗健?/p>
- 寬度緊湊 - 高度緊湊
- 寬度寬松 - 高度緊湊
接下來選擇我們的StackView,然后打開屬性面板，點擊Axis邊上的+號。
選擇 任意寬度 , 高度緊湊，并把StackView的方向設(shè)置為水平方向。
然后。。。。。。就妥了！
總結(jié)
在這個教程中，對StackView進(jìn)行了簡單介紹，為大家做了一個Demo，以及如何使用這個全新的組件。StackView這種流線型的布局方式，讓你在布局時只需要使用很少的約束。
Apple的工程師也是推薦優(yōu)先使用StackView，實在不行在用原生的約束。
我自己做了一個簡單的Demo，地址如下 ： https://github.com/liberalisman/StackView-Demo
