之前我們闡述了Swift2的新特性。本篇文章的開始我們將涵蓋一些iOS9的很酷的新特性。iOS即將到來(lái)的新版本會(huì)帶來(lái)很多新的特性。對(duì)于開發(fā)者來(lái)說(shuō)堆棧視圖(UIStackView)的引入值得一提。我知道對(duì)于一些開發(fā)者來(lái)說(shuō)使用autolayout設(shè)計(jì)一些復(fù)雜的交互界面是比較困難的。UIStackView正好能幫助到并讓我們的開發(fā)者的工作變得更容易些。

UIStackView提供了一個(gè)高效的接口用于平鋪一行或一列的視圖組合。對(duì)于嵌入到StackView的視圖，你不用再添加自動(dòng)布局的約束了。Stack View管理這些子視圖的布局，并幫你自動(dòng)布局約束。也就是說(shuō)，這些子視圖能夠適應(yīng)不同的屏幕尺寸。此外，你可以嵌入一個(gè)stack View到另一個(gè)stack view中來(lái)創(chuàng)建更為復(fù)雜的用戶界面。不要誤解我的意思，這并不意味著你就不需要處理自動(dòng)布局了。你仍舊要定義一些布局約束來(lái)約束stack view。它只是幫你節(jié)約了為每個(gè)UI元素創(chuàng)建約束的時(shí)間，同時(shí)它更容易的從布局中添加/刪除一個(gè)視圖。

Xcode7提供兩種方式使用UIStackView。你可以從對(duì)象庫(kù)中拖一個(gè)Stack View（水平的/豎直的）放到storyboard的正確位置上。然后你可以拖一些label，button，imageView等視圖放到stack view中。另外，你可以在自動(dòng)布局欄中使用Stack選項(xiàng)。對(duì)于這個(gè)方式，你可以簡(jiǎn)單的選擇兩個(gè)或更多的視圖，之后點(diǎn)擊Stack選項(xiàng),IB將會(huì)把這些視圖嵌入到一個(gè)stackview中，并自動(dòng)的調(diào)整。如果你仍舊對(duì)如何使用stack view沒有太多頭緒，沒關(guān)系，接下來(lái)我們將在這篇文章中介紹這兩種方式。繼續(xù)往下閱讀，你就會(huì)很快明白我的意思的。

我假設(shè)你對(duì)auto layout了解。如果不是，請(qǐng)先閱讀這片關(guān)于autolayout的[介紹文章]

Demo App

先瞧一眼我們將要構(gòu)建的demo app。在這篇文章中我將會(huì)給你展示如何使用stackview布局一個(gè)類似的用戶界面:

你可以不使用stack view創(chuàng)建一樣的UI，但是，但正如你所看到的，stack view完全改變了布局用戶界面的方式。本文并沒用coding，我們只是集中在使用IB來(lái)布局這個(gè)用戶界面。

開始前，請(qǐng)下載這個(gè)[開始項(xiàng)目]（備用[自己新建的開始項(xiàng)目]）。你需要使用Xcode7 beta4（或以上版本）來(lái)build這個(gè)工程。如果你沒有安裝，你要下載個(gè)。該項(xiàng)目模板非常簡(jiǎn)單，它僅僅預(yù)置了導(dǎo)航控制器和一些示例圖片。  

感謝：實(shí)例的照片是由[magdeleine.co]提供。

從對(duì)象庫(kù)中添加Stack Views 

現(xiàn)在升級(jí)Xcode7并打開Main.storyboard。從對(duì)象庫(kù)中拖出垂直的stack view放到storyboard上的view controller中。Stack View可以在縱向和橫向布局安排其子視圖（稱為安排視圖）。因?yàn)槲覀円季执怪钡膱D像視圖，所以我們選擇垂直的Stack View。

接下來(lái)，從對(duì)象庫(kù)中拖出一個(gè)圖像視圖，當(dāng)你把圖像視圖放到stack view中，圖像視圖會(huì)自動(dòng)調(diào)整。重復(fù)同樣的操作，添加更多的image view。這就是它神奇的地方：當(dāng)您添加另一個(gè)圖像視圖時(shí)，stack view會(huì)自動(dòng)布局圖像視圖，為您設(shè)置必要的約束。酷，對(duì)嗎？

為Stack View定義布局約束

Stack View節(jié)省了開發(fā)者為每個(gè)UI元素定義約束的時(shí)間，所說(shuō)的，您需要提供Stack View的布局約束。對(duì)于我們剛剛添加的，我們需要定義以下布局約束：

• 設(shè)置Stack View的距上，距左和居右的間距，使得Stack View在屏幕的頂部。

• 為Stack View設(shè)置一個(gè)高度約束，使得Stack View視圖的高度占父視圖高度的70%。

現(xiàn)在選擇stack view，點(diǎn)擊布局欄按鈕中的Pin按鈕，設(shè)置距上，距左，居右值分別為10，0，0。然后點(diǎn)擊“Add 3 Constraints”按鈕添加這些約束。

Stack view的當(dāng)前位置不符合約束，你可以在Document Outline點(diǎn)擊警告指示（即黃色的箭頭）糾正位置。

要設(shè)置高度約束，就要在IB的Document Outline中從堆棧視圖到視圖中的控件拖動(dòng)視圖，釋放按鈕后，選擇“Equal Heights”。

這是設(shè)置stack view的高度和這個(gè)view的高度相等的。然而，stack view僅僅需要高度的75%。所以，選擇“Stack View.height”的約束，選擇Attributes inspector，把Multiplier這項(xiàng)的值從1.0改為0.7.

#p#

設(shè)置Stack View的屬性

這個(gè)stack view 看起來(lái)并不是我們期望的。一旦你添加了stack view，你可以改變一些stack view的屬性來(lái)改變它的外觀。axis選項(xiàng)決定是否應(yīng)布置的視圖垂直或水平布置。 alignment選項(xiàng)控制這些視圖的對(duì)齊方式。比如你如果設(shè)置成Leading，stack view管理的視圖排列按Leading對(duì)齊。

distribution屬性決定了其管理的視圖的大小和位置。默認(rèn)設(shè)置為Fill。這是stack view盡量讓它的所有子視圖在一個(gè)合理的距離?，F(xiàn)在把它改為Fill Equally。stack view會(huì)調(diào)整它所有的子視圖一樣的尺寸。

spacing屬性讓你設(shè)置視圖之間的間距。把它值改為10來(lái)增加圖像視圖之間的間距。

設(shè)置圖像

接下來(lái)，我們?cè)O(shè)置image view的相應(yīng)的圖像。選擇第一個(gè)image view,選擇Attributes inspector，把image設(shè)置為“nature-1″，把model設(shè)置為“Aspect Fill”，同時(shí)勾選上“Clip Subviews”。重復(fù)同樣的步驟設(shè)置余下的image view，但是要把image 設(shè)置為“nature-2″ 和 “nature-3″。這樣你的布局看起來(lái)像這樣：

現(xiàn)在你可以運(yùn)行項(xiàng)目，預(yù)覽下?？梢栽谀M器上測(cè)試app的UI是否正確的適配所有的設(shè)備。stack view已經(jīng)自動(dòng)的為你添加好了約束。事實(shí)上你可以啟動(dòng)view debugging選項(xiàng)（要在運(yùn)行app的時(shí)候）來(lái)顯示圖像視圖的布局約束。

使用嵌套Stack View布局標(biāo)簽和按鈕

我們還沒有完成。有幾個(gè)標(biāo)簽和按鈕添加到用戶界面?，F(xiàn)在將標(biāo)簽從對(duì)象庫(kù)中拖到視圖，命名“Nature”，并將其定位在stack view下面。把它的字體大小改為30點(diǎn)，使其更大一些。下一步，將另一個(gè)標(biāo)簽視圖和名稱標(biāo)簽”A collection of nature photos from magdeleine.co“。放置在Nature標(biāo)簽之下。

再次，您不需要設(shè)置這些標(biāo)簽的布局約束。讓stack view為你做這個(gè)魔術(shù)。在本教程的最開始，我提到了使用stack view的方法。之前，是從對(duì)象庫(kù)中添加了堆棧視圖。現(xiàn)在我會(huì)告訴你另一個(gè)辦法。

按住命令鍵來(lái)選擇標(biāo)簽，然后單擊布局欄中的Stack按鈕。IB自動(dòng)把這些標(biāo)簽嵌入到垂直堆疊視圖中。

下一步，向視圖添加2個(gè)按鈕。命名一個(gè)按鈕，“Like”，另一個(gè)是“Share”。再次，我們不想處理自動(dòng)布局。所以，在布局欄中選擇按鈕，然后單擊Stack按鈕，將兩個(gè)按鈕嵌入到一個(gè)水平堆棧視圖中。設(shè)置堆棧視圖的spacing值為5。

如果你看了最后的布局，這兩個(gè)按鈕應(yīng)該放在Nature標(biāo)簽旁邊。你怎么能做到這一步呢？關(guān)于stack view的最重要的是，您可以使用嵌套的多個(gè)stack view來(lái)構(gòu)建你想要的精確布局。現(xiàn)在將stack view拖到Nature標(biāo)簽的按鈕上。一旦你釋放了按鈕，stack view將被嵌入到另一個(gè)stack view中。布局Nature標(biāo)簽和按鈕，選擇兩種視圖，然后將它們添加到另一個(gè)stack view中，使用stack選項(xiàng)。默認(rèn)情況下，新堆棧視圖的軸設(shè)置為垂直方向。在屬性檢查中，把它改為水平，這樣就可以把Like和Shared按鈕放置在Nature標(biāo)簽旁邊了。

按鈕也需要與Nature標(biāo)簽的基線對(duì)齊。選擇stack視圖，并將alignment從Fill改為First Baseline。同時(shí)，spacing選項(xiàng)設(shè)置為20，這樣來(lái)添加Naturel標(biāo)簽和按鈕之間的間距。

正如你所看到的，我們只需要使用嵌套的stack view構(gòu)建你需要的精確布局。

#p#

最后，我們?yōu)榘瑘D像的stack view和包含按鈕&標(biāo)簽的stack view之間的設(shè)置布局約束。選擇包含按鈕和標(biāo)簽的堆棧視圖，然后單擊布局欄按鈕中的Pin按鈕。設(shè)置居上、距左和居右的值分別為0、8和0。

確保描述標(biāo)簽是自動(dòng)調(diào)整大小，Lines設(shè)置為0和Line Breaks設(shè)置為Word Wrap。太好了你已經(jīng)完成了界面設(shè)計(jì)?，F(xiàn)在運(yùn)行該項(xiàng)目來(lái)看看結(jié)果。如果您的一切配置正確，您的UI應(yīng)該看起來(lái)像這樣：

如果你把iPhone橫過(guò)來(lái)，UI應(yīng)該是這樣:

它看起來(lái)不錯(cuò)，但如果這些圖像想這樣橫向排列的話，是不是更給力？

使用Size Classes 調(diào)整Stack Views

為了達(dá)到iPhone在不同的方向上布局不一樣，我們必須使stack view自適應(yīng)。在iOS 8中，介紹了Size Classes的概念。下表顯示了iOS設(shè)備及其相應(yīng)的Size Classes：

你可以使用size classes提供的重寫原來(lái)的基本布局。在這種情況下，我們?cè)谶@兩種size classes情況下要設(shè)置stack view的axis（持有圖像視圖的）從垂直到水平：

• Compact width-Compact height

• Regular width-Compact height

現(xiàn)在選擇stack view，在選擇Attributes inspector。在Axis選項(xiàng)下點(diǎn)擊+按鈕。選擇Any Width > Compact height,之后設(shè)置這個(gè)size classes下的Axis值為Horizontal。這里，any width包括compact和regular兩種寬度。

做完這些，stack view將會(huì)在iPhone橫屏的時(shí)候設(shè)置為水平。在不同的iOS設(shè)備上運(yùn)行項(xiàng)目，查看結(jié)果。

總結(jié)

在本教程中，我給你介紹了stack view并演示如何使用這個(gè)新組件布局你的UI。stack view讓你使用很少的約束高效的完成UI的布局。你可能有一個(gè)問題是，何時(shí)使用stack view？蘋果公司的工程師建議開發(fā)者先采用stack view，然后才是需要實(shí)際使用的繁瑣的約束。因此，開始設(shè)計(jì)你的用戶界面使用stack view！我相信你會(huì)喜歡它。

供參考，你可以在這里下載[Xcode項(xiàng)目]。