191129 iOS Auto Layout

目標:
a. 元件垂直橫向顯示時皆置中。
b. 元件尺寸保持比例。
c. 垂直顯示時,元件左右與螢幕邊緣保持一定距離。
d. 橫向顯示時,元件上下與螢幕邊緣保持一定距離。
e. 在 iPad 上元件不得太大。


條件限制設定如下:

-------------------------
a 設定方法:
a.i 點選右下角的 "Align" 圖示
a.ii 在彈出式小視窗中勾選 "Horizontally in Container" 與 "Vertically in Container";此兩個項目的右手邊有個輸入框,預設值為 ".0",目前不需更改;該值應該是偏移量,有空可以輸入看看其元件放置的效果。
a.iii 點按 [Add Constraints]

之後在 Constraints 中會出現以下兩項
a.1 [元件].centerX = centerX
      水平置中的設定
a.2 [元件].centerY = centerY
      垂直置中的設定

 -------------------------
b. 設定方法:
b.i 點選右下角的 "Add New Constraints" 圖示
b.ii 在彈出式小視窗中勾選 "Aspect Ratio"
b.iii 點按 [Add Constraints]

之後在該元件的 Constraints 中會出現以下項目
b.1 aspect = 1:1

-------------------------
c. 設定方法:
c.i 點選右下角的 "Add New Constraints" 圖示
c.ii 在彈出式小視窗上半部的左右輸入框中,輸入左右兩邊要保持的距離;在輸入框中的右邊會有個白色倒三角形,點選後會有選項,建議選擇 "Safe Area"。
c.iii 檢查左右輸入框與中間元件圖示間的紅色間距圖示是否已變為亮紅色實線。
c.iv 點按 [Add Constraints]
c.v c.i~c.iv 再操作一次
c.vi 在 Constraints 中,點選第一個 [元件].leading = [Safe Area].leading + [剛剛設定的距離]
c.vii 在右邊 "Size Inspector" 中,將 "Relation" 的 "Equal" 改為 "Greater Than or Equal"
c.viii 在 Constraints 中,點選第二個 [元件].leading = [Safe Area].leading + [剛剛設定的距離]
c.ix 在右邊 "Size Inspector" 中,將 "Priority" 的 "1000" 透過下拉式選單,改選為 "High(750)"

-------------------------
d. 與 c. 的設定方法一樣,一個是左右,一個是上下,記得設定時,先將畫面橫置。

-------------------------
e. 設定方法:
e.i 先決定元件寬高的尺寸
e.ii 點選右下角的 "Add New Constraints" 圖示
e.iii 在彈出式小視窗中間區段勾選 "Width" 與 "Height",並在其右邊輸入框中輸入其各別尺寸數值。
e.iv 至該元件的 Constraints 中,點選 width = [剛設定的尺寸]
e.v 至右邊 Size Inspector 中將 "Relation" 的 "Equal" 改為 "Less Than or Equal"
e.vi 重複 e.iv ~ e.v,此次操作的是 Height。


-------------------------
設定完成後,可以試著將畫面方向任意切換,亦可試著換 Device。







留言

這個網誌中的熱門文章

泰文子音與字形之間的變化

AUTOMAXX UP-5HX 使用心得