同利川甜

Swift - AutoLayout

目的：安排調整版面VIEW的尺寸位置, 不寫code

View無論在直式、橫式的畫面，其padding及margin長寬都一樣，不會改變。

1. New Project：SingleView Application 

2. Product Name：AutoLayoutSample

    Lanuage：Swift

 3.拉三個View，尺寸各為:

左上&右上：W*H＝130*254

下方：W*H＝250*254

目標：上下左右中間的padding&margin均為20

先以iPhone小尺寸版面作設定: 取消選取Use Auto Layout及Use Size Classes

 4.左上View Autoresizing :

 5.右上View Autoresizing :

 6.下方的View Autoresizing :

  7.iPhone小尺寸的結果: 直式没問題

8.iPhone小尺寸的結果: 橫式view之間padding變小

9.再調整：選取最外圍的View，Autoresizing

 10.改變版面：選取wAny hAny：移動藍色框架，版面就會隨之變動

11.結果：和預期的結果，還是有落差

• 再次調整每個View之間的padding及margin：均為20
• 利用Editor/Pin的Widths及Heights做調整
• 若有橘色線表示仍然有限制constrats需要調整，一直到標示線全變為藍色為止。

  12.Shift加選上方二個View->Editor/Pin/Widths Equally

      Shift加選上方三個View->Editor/Pin/Heights Equally

 13.調整margin及padding：

• 選取左上方View->Editor/Pin/Top Space to Superview
• 再選取左上方View->Editor/Pin/Leading Space to Superview
• 選取右上方View->Editor/Pin/Top Space to Superview
• 再選取右上方View->Editor/Pin/Trailing Space to Superview

 14.調整margin及padding：

• 選取下方View->Editor/Pin/Leading Space to Superview
• 再選取下方View->Editor/Pin/Trailing Space to Superview
• 再選取下方View->Editor/Pin/Bottom Space to Superview

  15.調整margin：

選取下方View的Trailing Space：constraint改為20

  16.調整margin及paddiing：有橘色線表示仍然有限制constrats需要調整，一直到標示線全變為藍色為止。

 17.調整padding：

選取左上方及下方View->Editor/Pin/Vertical Spacing

 18.調整margin及padding：

點選黃色箭頭, 出現警告訊息，double click update Frame

 19.結果：

ps.about  wAny hAny

ref： http://www.raywenderlich.com/83129/beginning-auto-layout-tutorial-swift-part-1