開(kāi)始用Swift開(kāi)發(fā)iOS 10 - 4 用Stack View設(shè)計(jì)UI

cover

前一篇開(kāi)始用Swift開(kāi)發(fā)iOS 10 - 3 介紹Auto Layout中提到Auto Layout工具欄有個(gè)stack按鈕，這是Stack View功能。為了解決復(fù)雜UI時(shí)布局約束定義困難，Apple從iOS 9開(kāi)始引入Stack View。
這篇文章將學(xué)習(xí)到：

  1. 用Stack View布局UI。
  2. 用image views展示圖片。
  3. 用內(nèi)建的asset catalog管理圖片。
  4. 用Size Classes適配Stack View

Stack View是什么

Stack View為在縱向或橫向布置一個(gè)視圖的集合，提供了一個(gè)流線(xiàn)型界面。可以用stack view將很多UI對(duì)象合成一個(gè)。視圖嵌入一個(gè)stack view里以后,就不再需要定義自動(dòng)布局約束.

Stack View管理它子視圖的布局,然后自動(dòng)提供布局約束。這意味著子視圖已經(jīng)準(zhǔn)備好去適應(yīng)不同的屏幕尺寸。此外，也可以嵌入一個(gè)stack view到另一個(gè)stack view來(lái)構(gòu)建更復(fù)雜的用戶(hù)界面。但是，這并不意味著不需要處理自動(dòng)布局。仍然需要定義stack view的布局。這樣不僅能夠節(jié)約在創(chuàng)作每個(gè)UI元素的約束的時(shí)間，也可以輕松的從布局里來(lái)添加/移除視圖。

Xcode提供兩種方法使用Stack View：

  1. 直接從Object library中拖出stack view（縱向或橫向），然后把其他視圖拖動(dòng)stack view
  2. 選中一些視圖，然后點(diǎn)擊Interface Builder editor右下角一組按鈕中的stack按鈕

一個(gè)小程序

  • 新建項(xiàng)目 StackViewDemo

  • 向Xcode中添加圖片

    • 從[圖片](https://www.appcoda.com/resources/swift3/stackviewdemo- images.zip)下載所需圖片，加壓后有3組9張圖片，每組有3張不同類(lèi)型的圖片，針對(duì)不同類(lèi)型的設(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會(huì)自動(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水平居中對(duì)齊。

    多個(gè)視圖在一起不方便選擇時(shí)，可以用 shift + 右擊：


    stack view的幾個(gè)屬性：

    • axis stack view中對(duì)象是水平放置還是垂直放置，也就是Vertical Stack View和Horizontal Stack View之間的切換
    • alignment stack view中對(duì)象的對(duì)齊方式
    • distribution

用Stack按鈕布局多個(gè)圖片

  • 拖動(dòng)一個(gè)image view對(duì)象，并修改其image屬性為user1
  • 同樣的方法再添加兩個(gè)image view對(duì)象，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)布局問(wèn)題，可通過(guò)issue indicator解決，可參考上一篇文章。
  • 看預(yù)覽assistant editor，查看其它設(shè)備會(huì)發(fā)現(xiàn)兩個(gè)問(wèn)題：
    • Instant Developer label文本在小屏幕設(shè)備被截?cái)?/li>
    • 圖片的寬高比改變了

選擇Instant Developer label，修改Autoshrink屬性為Minimum Font Size，值為20，這樣就設(shè)置了label的字體可以變化，最小值為20 ，小屏幕就不會(huì)被截?cái)嗔恕?br> 橫向control-drag圖片的stack view，選擇Aspect Ratio，使圖片的寬高比不變化。

在圖片stack view下添加一個(gè)label

  • 拖動(dòng)一個(gè)label到圖片下，看到一個(gè)藍(lán)色線(xiàn)后松開(kāi)


  • 改變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的大小會(huì)自動(dòng)調(diào)節(jié)到適宜大小，也就是"Sign up with Facebook"的寬度變?yōu)?55 。需要再添加一個(gè)寬度約束，修改Constant值為200 。

用Size Classes來(lái)調(diào)節(jié)Stack view

  • landscape orientation vs portrait orientation
    直譯就是風(fēng)景畫(huà)方向和肖像畫(huà)方向，其實(shí)就是指橫屏和豎屏
  • 上面設(shè)計(jì)的UI看上去以不錯(cuò)了，但一直沒(méi)有考慮的橫屏的情況。因?yàn)闄M屏上下高度變小，原本在豎屏下適宜的stack view上邊距，就有點(diǎn)大了，需要小一點(diǎn)。這也導(dǎo)致了，從iOS 8開(kāi)始引入了一個(gè)新的UI設(shè)計(jì)概念Adaptive Layout（自適應(yīng)布局），為此，Apple引入了Size Classes。通過(guò)Size Classes 和 auto layout一起設(shè)計(jì)自適應(yīng)UI。Size Classes僅僅是對(duì)屏幕進(jìn)行了分類(lèi), 實(shí)際上的布局還是交給autolayout
  • Size Classes有兩種類(lèi)型：regular 和 compact（可以理解為大[R] 和 小[C]）。而這兩種類(lèi)型應(yīng)用在兩個(gè)方向上：vertical (height) 和 horizontal (width) ，就對(duì)應(yīng)不同類(lèi)型的設(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前面的+號(hào)，彈框中分別選擇：Width：Any，Height：Compact，Gamunt：Any，后面的值為0，表示只有在Compact height下上邊距為0
  • 為了更加簡(jiǎn)潔也可以在有些屏幕狀態(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約束顏色變淺了，說(shuō)明這個(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

說(shuō)明

此文是學(xué)習(xí)appcode網(wǎng)站出的一本書(shū) 《Beginning iOS 10 Programming with Swift》 的一篇記錄

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容