iOS 9: UIStackView入門
同iOS以往每個(gè)迭代一樣，iOS 9帶來了很多新特性。UIKit框架每個(gè)版本都在改變，而在iOS 9比較特別的是UIStackView，它將從根本上改變開發(fā)者在iOS上創(chuàng)建用戶界面的方式。本文將帶你學(xué)習(xí)怎樣使用UIStackView創(chuàng)建用戶界面。
本文假定你已經(jīng)熟悉Auto Layout基礎(chǔ)。不熟悉的可以先看看Auto Layout教程。要理解Stack View為何如此有用及它是如何起作用的，需要首先對Auto Layout有深入了解。
1. 實(shí)例預(yù)覽
我們將使用UIStackView模擬一個(gè)app評分提示。用戶可以增加星星或者移除星星來打分。完成后看起來是這樣。
先從GitHub下載樣例工程并打開。在Main.Storyboard里有兩個(gè)Stack View
我們將使用這兩個(gè)Stack View來布局界面。開始編碼前，讓我們先看一下Stack View是如何工作的。
2. UIStackView 概述
Stack View的核心便是方便垂直或水平排布多個(gè)subview，如果你做過Android開發(fā)，那它和LinearLayout 控件非常相似。
Stack View最有用的就是它會自動(dòng)為每個(gè)subview創(chuàng)建和添加Auto Layout constraints。當(dāng)然你可以控制subview的大小和位置。可以通過選項(xiàng)配置subview的大小、排布以及彼此間的間距。
布局內(nèi)容
打開Main.Storyboard，選擇其中一個(gè)Stack View可以查看其選項(xiàng)，并選中一個(gè)Stack View。在 Attributes Inspector中，注意Stack View下面列出的選擇。
Axis表示Stack View的subview是水平排布還是垂直排布。Alignment控制subview對齊方式。Distribution定義subview的分布方式。Spacing 為subview間的最小間距。
把術(shù)語簡化一下，你可這樣理解：Alignment 用于控制X 和 Y值，而Distribution 用于控制高度和寬度。另兩個(gè)值都會影響對齊。如果選中Baseline Relative將根據(jù)subview的基線調(diào)整垂直間距。如果選中Layout Margins Relative 將相對于標(biāo)準(zhǔn)邊界空白來調(diào)整subview位置。
另一個(gè)需要記住的是，Stack View會被當(dāng)成Container View。所以它是一個(gè)不會被渲染的UIView子類。它不像其他UIView子類一樣，會被渲染到屏幕上。這也意味著設(shè)置其backgroundColor屬性或重載drawRect:方法都不會產(chǎn)生任何效果。
subView和arrangedSubView
開始使用Stack View前，我們先看一下它的屬性subViews和arrangedSubvies屬性的不同。如果你想添加一個(gè)subview給Stack View管理，你應(yīng)該調(diào)用addArrangedSubview:或insertArrangedSubview:atIndex: arrangedSubviews數(shù)組是subviews屬性的子集。
要移除Stack View管理的subview，需要調(diào)用removeArrangedSubview:和removeFromSuperview。移除arrangedSubview只是確保Stack View不再管理其約束，而非從視圖層次結(jié)構(gòu)中刪除，理解這一點(diǎn)非常重要。
現(xiàn)在我們對Stack View有一定了解，開始使用它。
3. 配置垂直布局的Stack View
打開Main.Storyboard選擇上面的Stack View。對Attributes Inspector作如下改變：
Alignment 設(shè)為 Center
Distribution 設(shè)為 Equal Spacing
Spacing 設(shè)為 30
這告訴Stack View為subview添加約束，使其垂直居中并沿Stack View的軸線對稱，然后為subview設(shè)置邊距30。
如果subview大小和Stack View內(nèi)容區(qū)不相符，將根據(jù)compression resistance priorities對subview進(jìn)行拉伸或壓縮。在運(yùn)行時(shí)給Stack View添加subview也同樣會如此。
布局有任何歧義Stack View都會根據(jù)subview在arrangedSubviews中index一步步回退去調(diào)整subview的大小，直至其剛好適應(yīng)Stack View的大小。
4. 給Stack View添加垂直布局的Subview
添加一個(gè)label，一個(gè)image view和一個(gè)button到上面的Stack View里。label在最上面，image view在中間，button在下面。添加完成后看起來是這樣：
接下來，我們要在Attributes Inspector里修改一下剛才添加的subview的屬性。把label的文本秘訣成“How do you likeour app?”， Text Alignment選擇Center 。image view的Image 輸入“logo”， Content Mode選Aspect Fit。最后把button的Text 設(shè)置成“Add Star!”。
運(yùn)行app。能看到我們只做了很少工作，但已經(jīng)添加了三個(gè)能響應(yīng)方向、size class等改變的subview。事實(shí)上你并不需手動(dòng)添加任何約束。
當(dāng)app運(yùn)行時(shí)，點(diǎn)擊Xcode窗口底部Debug View Hierarchy按鈕可以進(jìn)行實(shí)時(shí)視圖調(diào)試
選擇先前添加的任意一個(gè)subview。查看size inspector，我們注意到Stack View已經(jīng)自動(dòng)為其添加了約束。下圖顯示的是為button添加的約束
5. 添加五角星
按鈕事件還沒和app界面關(guān)聯(lián)，我們先關(guān)聯(lián)起來。停止運(yùn)行app，打開storyboard。創(chuàng)建一個(gè)名為addStar的IBAction 關(guān)聯(lián)到按鈕的Touch Up Inside事件。
addStar(_:)方法實(shí)現(xiàn)：
- @IBAction func addStar(sender: AnyObject) {
- let starImgVw:UIImageView = UIImageView(image: UIImage(named: "star"))
- self.horizontalStackView.addArrangedSubview(starImgVw)
- UIView.animateWithDuration(0.25, animations: {
- self.horizontalStackView.layoutIfNeeded()
- })
- }
給水平布局的Stack View里的星星image添加動(dòng)畫。記住，由于Stack View自動(dòng)為我們管理Auto Layout constraints，我們只能調(diào)用layoutIfNeeded來實(shí)現(xiàn)動(dòng)畫。
編譯運(yùn)行app，點(diǎn)擊add star按鈕。能看到最后結(jié)果卻不盡人意。
選擇下面的Stack View，查看Attributes Inspector會看到問題所在。由于Alignment 和Distribution 都設(shè)置成了Fill，Stack View 拉伸了星星以適應(yīng)其大小。
這在添加更多的星星的時(shí)候會引起更多問題。我們希望星星居中顯示，而不是被拉伸來適應(yīng)Stack View的寬度。
修改Alignment 的值為Center ，修改Distribution 的值為Fill Equally。最后在addStar(_:)方法中設(shè)置image view的內(nèi)容。
- @IBAction func addStar(sender: AnyObject) {
- let starImgVw:UIImageView = UIImageView(image: UIImage(named: "star"))
- starImgVw.contentMode = .ScaleAspectFit
- self.horizontalStackView.addArrangedSubview(starImgVw)
- UIView.animateWithDuration(0.25, animations: {
- self.horizontalStackView.layoutIfNeeded()
- })
- }
運(yùn)行app，點(diǎn)幾次添加按鈕，我們發(fā)現(xiàn)所有星星居中了。
6. Stack View嵌套
不能刪除星星，我們的app評分什么用處不大。打開storyboard，添加一個(gè)水平布局的Stack View到上面的Stack View里。把它放置在logo之下，按鈕之上。
把“Add Star!”按鈕拖到新添加的Stack View里，再添加一個(gè)按鈕到新的Stack View里。改變按鈕的title為“Remove Star”，文本顏色設(shè)為red。預(yù)覽如下：
在Attributes Inspector中編輯新Stack View的屬性，改變?nèi)缦拢?/p>
Alignment 設(shè)為 Center
Distribution 設(shè)為 Equal Spacing
Spacing 設(shè)為 10
7. 刪除五角星
為“Remove Star”按鈕創(chuàng)建名為removeStar，事件類型為Touch Up Inside的IBAction響應(yīng)方法。
removeAction(_:)實(shí)現(xiàn)：
- @IBAction func removeStar(sender: AnyObject) {
- let star:UIView? = self.horizontalStackView.arrangedSubviews.last
- if let aStar = star
- {
- self.horizontalStackView.removeArrangedSubview(aStar)
- aStar.removeFromSuperview()
- UIView.animateWithDuration(0.25, animations: {
- self.horizontalStackView.layoutIfNeeded()
- })
- }
- }
運(yùn)行app，現(xiàn)在既可增加，也可刪除了。改變模擬器方向或者旋轉(zhuǎn)設(shè)備看看app會怎樣調(diào)整其界面。我們并未添加一行約束就構(gòu)建好了app的用戶界面。
需要注意的是：removeStar(_:)里調(diào)用removeFromSuperview是把subview從視圖層級中移除。再次調(diào)用removeArrangedSubview(_:)只是告訴Stack View不再需要管理subview的約束。而subview會一直保持在視圖層級結(jié)構(gòu)中直到調(diào)用removeFromSuperview把它移除。
結(jié)論
UIStackView類大大簡化了用戶界面開發(fā)。這是好事，特別是隨著硬件的改變。使用UIStackView，減少了開發(fā)者為簡單場景設(shè)置枯燥的約束，把繁雜的工作交給了UIKit。
【編輯推薦】
【責(zé)任編輯：chenqingxiang TEL：（010）68476606】
