前一篇開始用Swift開發(fā)iOS 10 - 3 介紹Auto Layout中提到Auto Layout工具欄有個(gè)stack按鈕掌呜，這是Stack View功能。為了解決復(fù)雜UI時(shí)布局約束定義困難蝎宇，Apple從iOS 9開始引入Stack View复颈。
這篇文章將學(xué)習(xí)到：
- 用Stack View布局UI。
- 用image views展示圖片踢代。
- 用內(nèi)建的asset catalog管理圖片盲憎。
- 用Size Classes適配Stack View
Stack View是什么
Stack View為在縱向或橫向布置一個(gè)視圖的集合嗅骄，提供了一個(gè)流線型界面”恚可以用stack view將很多UI對象合成一個(gè)溺森。視圖嵌入一個(gè)stack view里以后,就不再需要定義自動(dòng)布局約束.
Stack View管理它子視圖的布局,然后自動(dòng)提供布局約束。這意味著子視圖已經(jīng)準(zhǔn)備好去適應(yīng)不同的屏幕尺寸窑眯。此外屏积，也可以嵌入一個(gè)stack view到另一個(gè)stack view來構(gòu)建更復(fù)雜的用戶界面。但是磅甩，這并不意味著不需要處理自動(dòng)布局炊林。仍然需要定義stack view的布局。這樣不僅能夠節(jié)約在創(chuàng)作每個(gè)UI元素的約束的時(shí)間卷要，也可以輕松的從布局里來添加/移除視圖渣聚。
Xcode提供兩種方法使用Stack View：
- 直接從Object library中拖出stack view（縱向或橫向），然后把其他視圖拖動(dòng)stack view
- 選中一些視圖僧叉，然后點(diǎn)擊Interface Builder editor右下角一組按鈕中的stack按鈕
一個(gè)小程序
新建項(xiàng)目 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等高分辨的）
-
拖動(dòng)圖片竟然xcode的asset catalog中隘道，xcode會自動(dòng)組織這些有規(guī)律的圖片，使用時(shí)直接用user1,不需要靠后面的@2或@3。
-
-
用Stack View布局title的label
- 選擇
Main.storyboard谭梗，從Object library中拖出Vertical Stack View到storyboard中 - 拖出一個(gè)label到stack view中忘晤。一旦label進(jìn)入stack view中，它就自動(dòng)調(diào)整大小以適應(yīng)label
- 修改label的title為“Instant Developer”默辨，字體大小為40 points德频，font style為medium，字體顏色為紅色
- 另外拖出一個(gè)label到stack view中缩幸，修改label的title為“Get help from experts in 15 minutes”
- 選擇stack view壹置，在屬性檢查器中修改Alignment參數(shù)為center，這樣使stack view中的label水平居中對齊表谊。
多個(gè)視圖在一起不方便選擇時(shí)钞护，可以用 shift + 右擊：
stack view的幾個(gè)屬性：-
axisstack view中對象是水平放置還是垂直放置，也就是Vertical Stack View和Horizontal Stack View之間的切換 -
alignmentstack view中對象的對齊方式 -
distribution
- 選擇
用Stack按鈕布局多個(gè)圖片
- 拖動(dòng)一個(gè)image view對象爆办，并修改其
image屬性為user1 - 同樣的方法再添加兩個(gè)image view對象难咕，
image屬性分別為user2，user3距辆。粗略調(diào)整圖片的帶下余佃，放在一個(gè)水平，大概如下：
- 選中三個(gè)image view跨算，擊Interface Builder editor右下角一組按鈕中的stack按鈕爆土，則生成一個(gè)新的horizontal stack view。
- 修改新生成的horizontal stack view的屬性诸蚕，
spacing為 10步势，表示圖片之間的間距，Distribution為Fill Equally - 同時(shí)選中兩個(gè)stack view背犯，點(diǎn)擊stack 按鈕坏瘩，再生成一個(gè)新的大vertical stack view
為stack view添加布局約束
- 選中大的stack view，添加space constraints漠魏，上倔矾，左右，分別為70柱锹，0哪自，0
添加約束后，如果出現(xiàn)布局問題奕纫，可通過issue indicator解決提陶，可參考上一篇文章。 - 看預(yù)覽assistant editor匹层，查看其它設(shè)備會發(fā)現(xiàn)兩個(gè)問題：
- Instant Developer label文本在小屏幕設(shè)備被截?cái)?/li>
- 圖片的寬高比改變了
選擇Instant Developer label隙笆，修改Autoshrink屬性為Minimum Font Size锌蓄，值為20，這樣就設(shè)置了label的字體可以變化撑柔，最小值為20 瘸爽，小屏幕就不會被截?cái)嗔恕?br>
橫向control-drag圖片的stack view，選擇Aspect Ratio铅忿，使圖片的寬高比不變化剪决。
在圖片stack view下添加一個(gè)label
-
拖動(dòng)一個(gè)label到圖片下，看到一個(gè)藍(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
- 添加兩個(gè)Button："Sign in" 和 "Sign up with Facebook"
- 修改白字體峻凫，紅背景渗鬼，寬度為200
- 選擇兩個(gè)Button生成vertical stack view，
spacing為10 -
為vertical stack view添加兩個(gè)約束荧琼，水平居中和底邊距20
- 當(dāng)把兩個(gè)button聚合成stack view時(shí)譬胎，button的大小會自動(dòng)調(diào)節(jié)到適宜大小，也就是"Sign up with Facebook"的寬度變?yōu)?55 命锄。需要再添加一個(gè)寬度約束堰乔，修改
Constant值為200 。
用Size Classes來調(diào)節(jié)Stack view
-
landscape orientation vs portrait orientation
直譯就是風(fēng)景畫方向和肖像畫方向脐恩，其實(shí)就是指橫屏和豎屏 - 上面設(shè)計(jì)的UI看上去以不錯(cuò)了镐侯，但一直沒有考慮的橫屏的情況。因?yàn)闄M屏上下高度變小被盈，原本在豎屏下適宜的stack view上邊距析孽，就有點(diǎn)大了搭伤，需要小一點(diǎn)只怎。這也導(dǎo)致了，從iOS 8開始引入了一個(gè)新的UI設(shè)計(jì)概念Adaptive Layout（自適應(yīng)布局）怜俐，為此身堡，Apple引入了Size Classes。通過Size Classes 和 auto layout一起設(shè)計(jì)自適應(yīng)UI拍鲤。Size Classes僅僅是對屏幕進(jìn)行了分類, 實(shí)際上的布局還是交給autolayout
- Size Classes有兩種類型：regular 和 compact（可以理解為大[R] 和 小[C]）贴谎。而這兩種類型應(yīng)用在兩個(gè)方向上：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查看：
- 選擇上邊距約束季稳。在屬性檢查器中擅这，點(diǎn)擊
Constant前面的+號，彈框中分別選擇：Width：Any景鼠，Height：Compact仲翎，Gamunt：Any，后面的值為0，表示只有在Compact height下上邊距為0
- 為了更加簡潔也可以在有些屏幕狀態(tài)下把"Need help with your ..." label隱藏掉溯香，就是height為0鲫构。也就是為label添加一個(gè)只有在Width：Any，Height：Compact玫坛，Gamunt：Any這個(gè)Size Classes下结笨，的height約束。
用control-drag方法添加height約束：
選擇現(xiàn)價(jià)的height約束湿镀，修改
Constant為0炕吸；去除選中Installed，點(diǎn)擊Installed前的+勉痴，彈出框選擇Width：Any算途，Height：Compact，Gamunt：Any蚀腿，并選擇新加的Installed（height約束顏色變淺了嘴瓤，說明這個(gè)約束不是在任何狀態(tài)下都有效的）：
練習(xí)
還有考慮特殊的一些設(shè)備的情況，添加一些特殊的約束：
- 在wR hR時(shí)莉钙，修改兩個(gè)按鈕的寬度為300
- 在iphone 6/7 和一些老的iphone等設(shè)備豎屏?xí)r廓脆，修改"Need help with ..." label 字體為15
- 在wR hR時(shí)，修改圖像stack view的上下空間為30
代碼
Beginning-iOS-Programming-with-Swift
說明
此文是學(xué)習(xí)appcode網(wǎng)站出的一本書 《Beginning iOS 10 Programming with Swift》 的一篇記錄
