Swift 學習－1 用 Stack View 來設計 UI

參考書目：iOS 9 App 程式設計實力超進化實戰攻略
章節：6

————

Stack View（堆疊視圖），有點像是群組的概念。把許多 UI 丟入裡面，做出更複雜的介面，更重要的是，不用將每個 UI 一個一個去定義 Auto Layout 的約束條件，只需要做 Stack 的約束。



————

上面的兩行 Label 和中間三個 images 和最下面兩個 Button 為三組 Stack。
(Vertical + Horizontal + Horizontal)

Label 部分

Label 的 Stack 在佈局約束上做下面的定義：

並且讓 Label 的 Stack 位置設定在 X=20, Y=142。

Image 部分

Image 的 Stack 在佈局上用 "Pin"來做約束

Pin

約束定義：

上、左、右：15.5, 0, 0

然後再 Image 的 Stack 中定義約束為 "Aspect Ratio" 。

目的是為了讓每張圖片在不同裝置中保持一樣的長寬比。（不設定的話，圖片會被拉長）

Button部分

設定兩個 Button 背景為紅色，寬為 200。

（參考書上寫的，可以亂改）

把兩個 Button 做成 Stack。（Vertical 或是 Horizontal 都可）

（按住）Command + Stack 

然後進行約束

此時會發現剛剛設定的寬度 200 跑掉了，所以我們用另外個約束來回復：
在左邊 Button 的 Stack 中約束成「等寬」。

設定寬度為 200。

右邊設定

Outcome 

最後結果

Stimulating with iPhone 6s

直式

橫式