Swift — 玩玩 堆疊視圖（ UIStack View ）

用 StackView 和 AutoLayout 來配置版面吧。

前言：

上一篇文章有大概解釋了 StackView 這個元件，這一次我們要用 StackView 來做一些小型的畫面配置，如果還沒看過文章的可以先看過一輪再來實作。

Swift — 說說 堆疊視圖（ UIStack View ）

實作版面：

60 秒教你畫出計算機畫面 — by Jeremy

模仿 Apple 中的計算機畫面

首先第一個題目就是模仿我們 Apple 中的計算機，整體設計也是行列的設計，所以我們可以很好的使用 StackView 來實現這個畫面佈局。剛好最近剛好有新人進來詢問我如何用 StackView 製作計算機畫面，剛好可以分享給大家。

步驟：

• 第一步：首先我們會新增四個按鈕，並且用一個 Axis.Horizontal 的 StackView 包起來，設置它的 Alignment 為 Fill、Distribution 為 Fill Equally 並且 Spacing 為 1。

• 第二步：我們會複製四個 Axis.Horizontal 的 StackView，並且用一個 Axis.Horizontal 的 StackView 包起來。設置它的 Alignment 為 Fill、Distribution 為 Fill Equally 並且 Spacing 為 1。

• 第三步：接著我們設置他的約束條件與上下左右距離為 0，之後在水平的 StackView 中頂端加入一個 UIView，之後會在這個 UIView 放入我們的 Label 顯示計算機的計算資訊。

• 第四步：接下來我們還需要微調最下方的按鈕，其中 0 的寬度為正常按鈕的兩倍。因此，首先我們會將最下方的水平的 StackView 的 Distribution改為 Fill，讓這其中的按鈕能在 StackView 依照自己的尺寸適應，設置其中的兩個按鈕與上方按鈕等寬，剩下的那個按鈕 0 就會自動填滿我們整個 StackView 了。

接著我們設定好 Label 的約束條件，接著放到手機上旋轉畫面看看：

StackView 放到模擬器上旋轉也不會跑版。

恭喜你 60 秒內完成一個計算機 🎉（ 的畫面 ）

後記：

希望這一次簡單的實作能讓大家對於 StackView 有一個小小的理解，也能透過很快的速度建立一個行、列佈局，並能知道什麼時候要套用 StackView 的什麼限制。

附上 github 連結（雖然沒有程式碼 😂）

JeremyXue77/StackView-Practice