前一篇開始用Swift開發(fā)iOS 10 - 3 介紹Auto Layout中提到Auto Layout工具欄有個stack按鈕，這是Stack View功能。為了解決復(fù)雜UI時布局約束定義困難，Apple從iOS 9開始引入Stack View。
這篇文章將學(xué)習(xí)到：
- 用Stack View布局UI。
- 用image views展示圖片。
- 用內(nèi)建的asset catalog管理圖片。
- 用Size Classes適配Stack View
Stack View是什么
Stack View為在縱向或橫向布置一個視圖的集合，提供了一個流線型界面。可以用stack view將很多UI對象合成一個。視圖嵌入一個stack view里以后,就不再需要定義自動布局約束.
Stack View管理它子視圖的布局,然后自動提供布局約束。這意味著子視圖已經(jīng)準(zhǔn)備好去適應(yīng)不同的屏幕尺寸。此外，也可以嵌入一個stack view到另一個stack view來構(gòu)建更復(fù)雜的用戶界面。但是，這并不意味著不需要處理自動布局。仍然需要定義stack view的布局。這樣不僅能夠節(jié)約在創(chuàng)作每個UI元素的約束的時間，也可以輕松的從布局里來添加/移除視圖。
Xcode提供兩種方法使用Stack View：
- 直接從Object library中拖出stack view（縱向或橫向），然后把其他視圖拖動stack view
- 選中一些視圖，然后點擊Interface Builder editor右下角一組按鈕中的stack按鈕
一個小程序
新建項目 StackViewDemo
-
向Xcode中添加圖片
-
從[圖片](https://www.appcoda.com/resources/swift3/stackviewdemo- images.zip)下載所需圖片，加壓后有3組9張圖片，每組有3張不同類型的圖片，針對不同類型的設(shè)備：
- user1.png （ non-Retina的一些老設(shè)備）
- user1@2x.png （iPhone 4/4s/5/5s/6）
- user1@3x.png （iPhone 6 Plus等高分辨的）
-
拖動圖片竟然xcode的asset catalog中，xcode會自動組織這些有規(guī)律的圖片，使用時直接用user1,不需要靠后面的@2或@3。
-
-
用Stack View布局title的label
- 選擇
Main.storyboard，從Object library中拖出Vertical Stack View到storyboard中 - 拖出一個label到stack view中。一旦label進(jìn)入stack view中，它就自動調(diào)整大小以適應(yīng)label
- 修改label的title為“Instant Developer”，字體大小為40 points，font style為medium，字體顏色為紅色
- 另外拖出一個label到stack view中，修改label的title為“Get help from experts in 15 minutes”
- 選擇stack view，在屬性檢查器中修改Alignment參數(shù)為center，這樣使stack view中的label水平居中對齊。
多個視圖在一起不方便選擇時，可以用 shift + 右擊：
stack view的幾個屬性：-
axisstack view中對象是水平放置還是垂直放置，也就是Vertical Stack View和Horizontal Stack View之間的切換 -
alignmentstack view中對象的對齊方式 -
distribution
- 選擇
用Stack按鈕布局多個圖片
- 拖動一個image view對象，并修改其
image屬性為user1 - 同樣的方法再添加兩個image view對象，
image屬性分別為user2，user3。粗略調(diào)整圖片的帶下，放在一個水平，大概如下：
- 選中三個image view，擊Interface Builder editor右下角一組按鈕中的stack按鈕，則生成一個新的horizontal stack view。
- 修改新生成的horizontal stack view的屬性，
spacing為 10，表示圖片之間的間距，Distribution為Fill Equally - 同時選中兩個stack view，點擊stack 按鈕，再生成一個新的大vertical stack view
為stack view添加布局約束
- 選中大的stack view，添加space constraints，上，左右，分別為70，0，0
添加約束后，如果出現(xiàn)布局問題，可通過issue indicator解決，可參考上一篇文章。 - 看預(yù)覽assistant editor，查看其它設(shè)備會發(fā)現(xiàn)兩個問題：
- Instant Developer label文本在小屏幕設(shè)備被截斷
- 圖片的寬高比改變了
選擇Instant Developer label，修改Autoshrink屬性為Minimum Font Size，值為20，這樣就設(shè)置了label的字體可以變化，最小值為20 ，小屏幕就不會被截斷了。
橫向control-drag圖片的stack view，選擇Aspect Ratio，使圖片的寬高比不變化。
在圖片stack view下添加一個label
-
拖動一個label到圖片下，看到一個藍(lán)色線后松開
- 改變label的文本：
Need help with your coding problems? We’ll find you the right developer who can help you in 15 minutes. - label的屬性
lines改為0，表示不限制行數(shù) - 選擇大stack view，修改間距
sapcing為10，修改Alignment為居中
用stack view布局Buttons
- 添加兩個Button："Sign in" 和 "Sign up with Facebook"
- 修改白字體，紅背景，寬度為200
- 選擇兩個Button生成vertical stack view，
spacing為10 -
為vertical stack view添加兩個約束，水平居中和底邊距20
- 當(dāng)把兩個button聚合成stack view時，button的大小會自動調(diào)節(jié)到適宜大小，也就是"Sign up with Facebook"的寬度變?yōu)?55 。需要再添加一個寬度約束，修改
Constant值為200 。
用Size Classes來調(diào)節(jié)Stack view
-
landscape orientation vs portrait orientation
直譯就是風(fēng)景畫方向和肖像畫方向，其實就是指橫屏和豎屏 - 上面設(shè)計的UI看上去以不錯了，但一直沒有考慮的橫屏的情況。因為橫屏上下高度變小，原本在豎屏下適宜的stack view上邊距，就有點大了，需要小一點。這也導(dǎo)致了，從iOS 8開始引入了一個新的UI設(shè)計概念Adaptive Layout（自適應(yīng)布局），為此，Apple引入了Size Classes。通過Size Classes 和 auto layout一起設(shè)計自適應(yīng)UI。Size Classes僅僅是對屏幕進(jìn)行了分類, 實際上的布局還是交給autolayout
- Size Classes有兩種類型：regular 和 compact（可以理解為大[R] 和 小[C]）。而這兩種類型應(yīng)用在兩個方向上：vertical (height) 和 horizontal (width) ，就對應(yīng)不同類型的設(shè)備：Regular width-Regular Height, Regular width-Compact Height, Compact width-Regular Height and Compact width-Compact Height
最新版本的Xcode已經(jīng)為我們提供了不同設(shè)備和方向的Size Classes查看：
- 選擇上邊距約束。在屬性檢查器中，點擊
Constant前面的+號，彈框中分別選擇：Width：Any，Height：Compact，Gamunt：Any，后面的值為0，表示只有在Compact height下上邊距為0
- 為了更加簡潔也可以在有些屏幕狀態(tài)下把"Need help with your ..." label隱藏掉，就是height為0。也就是為label添加一個只有在Width：Any，Height：Compact，Gamunt：Any這個Size Classes下，的height約束。
用control-drag方法添加height約束：
選擇現(xiàn)價的height約束，修改
Constant為0；去除選中Installed，點擊Installed前的+，彈出框選擇Width：Any，Height：Compact，Gamunt：Any，并選擇新加的Installed（height約束顏色變淺了，說明這個約束不是在任何狀態(tài)下都有效的）：
練習(xí)
還有考慮特殊的一些設(shè)備的情況，添加一些特殊的約束：
- 在wR hR時，修改兩個按鈕的寬度為300
- 在iphone 6/7 和一些老的iphone等設(shè)備豎屏?xí)r，修改"Need help with ..." label 字體為15
- 在wR hR時，修改圖像stack view的上下空間為30
代碼
Beginning-iOS-Programming-with-Swift
說明
此文是學(xué)習(xí)appcode網(wǎng)站出的一本書 《Beginning iOS 10 Programming with Swift》 的一篇記錄
