MAR.22 |SWIFT學習日誌 DAY 12.

[ 我見 我聞 ]

#本日課程：自習

• Auto Layout
• Stack View

---

[ 我學 ]

#Auto Layout

Auto Layout 是一個以約束條件為基礎的佈局系統，它可以讓開發者建立一個可以因應不同螢幕尺寸與裝置（device）方向而調整的自適應介面（adaptive interface）

• 按鈕或影像置中-無論螢幕尺寸是在水平方向或垂直方向都是置中

-在介面建構器中使用Auto Layout，在storyboard右下，有下列選單是與Auto Layout有關

-主要為四個功能

1. Align – 建立一個對齊的約束條件，例如對齊兩個視圖的左側。
2. Pin – 建立間距約束條件，例如定義一個UI控制的寬度。
3. Issues – 解決佈局問題。
4. Resizing – 指定尺寸調整後影響約束條件的方式為何。

-加入寬度與高度的約束條件，將width與height設定值並勾選，按下『APP 2 Constraints』

-設定另一個約束條件，即使使用者將裝置做橫向（landscape）放置，圖像視圖也能置中

藍色約束線代表佈局已經正確的設定，沒有模糊不清的情況

-完成

• 登入按鈕-因應不同螢幕尺寸與裝置方向而自動調整介面

-UI

-按下『Control』分別往右/左/下從按鈕拖曳至父視圖

-完成

• 參考 Auto Layout 入門教學

#堆疊視圖 (Stack Views)

• 從元件庫加入堆疊視圖，拖曳一個 Verticle Stack View 物件
• 加入3個image view至stack view
• 選取堆疊視圖並在佈局按鈕點擊 Pin 按鈕。設定上方、左側與右邊的間距約束條件分別為 10、0 與 0。然後點擊「Add 3 Constraints」按鈕來加入約束條件
• 從 Stack View 按住 control 鍵不放，並拖曳至View，選取 Equal Heights
• 選取「Stack View.height」約束條件，並至屬性檢閱器（Attributes inspector）。將Multiplier的值從1.0改為0.7
• 變更Distribution選項（定義了所佈置視圖的尺寸與位置）為 Fill Equally，堆疊視圖自動地調整佈置的視圖，所有視圖的大小都相等，以及spacing 選項可以讓你設定視圖間的間距，變更其值為10
• 選取圖像視圖（image view)，設定Content Mode=Aspect Fill & 勾Clip to Bounds
• 大致完成設定～加入其他UI，與其約束條件
• 完成
  

  

  
• 參考 iOS 9 新功能 : 堆疊視圖介紹 (Stack Views)
• 補充

1. Portrait 和 Landscape，談螢幕方向
2. [iOS] 大小類別 (Size Class)

---

[ 我思 ]

今天開始研究介面部分，從基礎的Auto Layout著手，以前可能一個APP要響應不同介面，相對較難達成，現在有了Auto Layout與StackView就能因應不同螢幕尺寸，能更加快速方便！