這是一篇挺老的文章，主要就是介紹在iOS9時(shí)推出的控件UIStackView。我發(fā)現(xiàn)網(wǎng)上的資料并不算多，而AppCoda的這一篇就淺顯易懂，所以決定翻譯一下，再寫(xiě)個(gè)Demo。

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

UIStackView 簡(jiǎn)介

開(kāi)始這個(gè)教程的話，我們會(huì)講一些iOS9的新特性，iOS最近推出的新版本帶來(lái)了很多新的特性，而新推出的UIStackView應(yīng)該引起開(kāi)發(fā)者第一時(shí)間的關(guān)注。據(jù)我所知，一些開(kāi)發(fā)者認(rèn)為使用AutoLayout去設(shè)計(jì)一些復(fù)雜的用戶(hù)界面是十分困難的。UIStackView就是幫助開(kāi)發(fā)者將這些復(fù)雜頁(yè)面的設(shè)計(jì)工作變得更簡(jiǎn)單。

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

再進(jìn)一步講，你可以將一個(gè)UIStackView放進(jìn)另一個(gè)UIStackView中以實(shí)現(xiàn)更為復(fù)雜的用戶(hù)界面的設(shè)計(jì)工作。當(dāng)然千萬(wàn)不要被我誤導(dǎo)，UIStackView并不意味著你再也不必和約束打交道，你至少是要為UIStackView設(shè)置約束的。UIStackView只是節(jié)省了你為每一個(gè)界面元素添加約束的時(shí)間，同時(shí)你在UIStackView中添加和刪除約束將變得超級(jí)簡(jiǎn)單。

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

The Demo App

首先我們要預(yù)覽一下我們即將構(gòu)建的App，在這個(gè)教程中，我們會(huì)展示在Interface中利用UIStackView如何構(gòu)建這個(gè)App。

當(dāng)然你不用UIStackView也可以構(gòu)建一個(gè)這樣的頁(yè)面，但是正如你所見(jiàn)，UIStackView完全改變了你進(jìn)行頁(yè)面布局的方式。這個(gè)教程無(wú)需任何代碼，我們將專(zhuān)注于利用Interface Builder來(lái)構(gòu)建這個(gè)用戶(hù)界面。

添加 UIStackView

打開(kāi) Xcode 7 ，然后打開(kāi)main.storyBoard。從右側(cè)的對(duì)象庫(kù)面板中，往storyBoard中拖一個(gè)垂直方向的UIStackView。UIStackView可以分別管理水平方向和垂直方向的子控件。因?yàn)槲覀兿胍季值?code>ImageViews是垂直方向的，所以我們選擇一個(gè)垂直方向的UIStackView。

接下來(lái)從控件庫(kù)往外拖一個(gè)Imageview，當(dāng)你把Imageview拖拽到StackView里，Imageview會(huì)自動(dòng)調(diào)整尺寸，重復(fù)上面的步驟，我們?cè)偻?code>StackView里面添加兩個(gè)imageView,這時(shí)候神奇的一幕發(fā)生了，當(dāng)你把另外兩個(gè)imageView添加到StackView里面時(shí)，StackView會(huì)自動(dòng)給這兩個(gè)imageView進(jìn)行垂直布局，并為他們添加上了約束條件。是不是很酷？

為 UIStackView 添加約束

StackView為開(kāi)發(fā)者節(jié)省了為每一個(gè)界面元素添加約束的時(shí)間，但是你必須要為你的StackView添加約束條件，接下來(lái)我們將為剛才添加到是圖中的StackView添加約束

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

現(xiàn)在，我們選中StackView并點(diǎn)擊Pin按鈕。設(shè)置距離頂部、左側(cè)、右側(cè)的距離各自分別為10，0，0。并且把這三個(gè)約束加上。

現(xiàn)在StackView的位置，并不滿足我們的約束條件，你需要點(diǎn)擊警告去修復(fù)這個(gè)問(wèn)題。

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

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

設(shè)置StackView屬性值

StackView看起來(lái)并沒(méi)有像預(yù)期一樣，一旦你使用了StackView，你可以通過(guò)修改StackView的屬性值來(lái)改變它的外觀。

Axis是坐標(biāo)軸，負(fù)責(zé)水平還是垂直。
alignment是對(duì)齊方式。

Distribution決定了StackView中子控件的尺寸和位置。它默認(rèn)被設(shè)置為Fill。在這個(gè)例子里，StackView要盡可能的利用有限的空間去適配它的子控件。接下來(lái)我們將選項(xiàng)改為Fill Equally。StackView會(huì)自動(dòng)將里面的子控件重新布局為大小相等的控件。

Space選項(xiàng)允許你通過(guò)修改該選項(xiàng)，調(diào)解兩個(gè)控件之間的距離，此處將值改為10。

設(shè)置圖片

接下來(lái)為三個(gè)ImageView設(shè)置圖片

現(xiàn)在可以把程序跑起來(lái)看看效果，在不同的模擬器，UI都可以很好的適配各種設(shè)備。StackView已經(jīng)自動(dòng)幫你添加好了布局。實(shí)際上你可以通過(guò)頁(yè)面調(diào)試選項(xiàng)，來(lái)查看為ImageView添加的布局。

用嵌套的方式布局控件

還有一些Lable和Button需要添加到頁(yè)面上，如圖所示，拖兩個(gè)Lable到StackView的正下方，上面的標(biāo)簽字號(hào)為30.

然后選中兩個(gè)Lable，點(diǎn)擊stack選項(xiàng)，將這兩個(gè)控件合并為一個(gè)StackView。

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

把按鈕的StackView拖進(jìn)Label的StackView中，選中頂部的Nature標(biāo)簽和Buttonde StackView,點(diǎn)擊stack選項(xiàng),將他們兩個(gè)合并為一個(gè)StackView，設(shè)置方向?yàn)樗?/p>

選中這個(gè)StackView，將對(duì)齊方式調(diào)整為First BaseLine,沿第一個(gè)對(duì)象的基線對(duì)齊，然后給Lable和Button加一個(gè)20的間距。

這樣，我們只需要利用 StackView 的嵌套，就可以實(shí)現(xiàn)我們想得到的布局。

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

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

現(xiàn)在可以把程序跑起來(lái)看一下效果

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

看起來(lái)還可以，但是如果橫屏?xí)r圖片是水平排列那就更好了：

利用*Size Class 構(gòu)建自適應(yīng)的 StackView

為了實(shí)現(xiàn) iPhone 在橫屏?xí)r顯示不同的布局，我們需要讓StackView是自適應(yīng)。在 iOS8，介紹過(guò) Size Class 的概念，下面的表格介紹了不同的 iOS 設(shè)備以及他們相對(duì)應(yīng)的 Size Class。

你可以利用 Size Class 提供一個(gè)指定的布局去覆寫(xiě)之前的布局設(shè)計(jì)。在這個(gè)例子中，我們需要將StackView的方向在以下兩種情況下，由垂直變?yōu)樗健?/p>

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

接下來(lái)選擇我們的StackView,然后打開(kāi)屬性面板，點(diǎn)擊Axis邊上的+號(hào)。

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

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

總結(jié)

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

Apple的工程師也是推薦優(yōu)先使用StackView，實(shí)在不行在用原生的約束。

我自己做了一個(gè)簡(jiǎn)單的Demo，地址如下 ： https://github.com/liberalisman/StackView-Demo