Swift 新手推薦的排版練習：用 Auto Layout 和 Stack View
Swift 新手在剛開始學習時，想要向漂亮畫面 App 學習，練習使用 Auto Layout 和 Stack View，首推 iPhone 內建的 iOS App 精美畫面，官方的設計都是經過全方面的考量。
iPhone 的營幕有大有小，甚至還有 iPad，到底如何讓不同機種上看到的畫面都美美的呢？
- 寫程式。對，沒有看錯，這就是最原始的方法。可是我懶…
- 用 Auto Layout。Swift 聽到大家的呼聲(可能是我)開發的 Auto Layout
- 想要更快，就用能讓 Auto Layout 更方便的 Stack View
打個預防針，我不是高手，以下為個人經驗心得分享。這裡，只是：
一個初心者不完美的學習歷程
Auto Layout
在 UI 設計聖經裡面，也就是 Apple 的 Human Interface Guidelines，在 Visual Design 這章裡面第一節就有介紹 Auto Layout，可見得有多重要。在此附上連結，總共只有3段的介紹，讓大家去看看。
看完了嗎？其實是透過我們所訂定的條件，就是 constraint 來規定畫面上的內容的擺放位置，像是如果我們希望把使用者頭像放在右上角，就要設下兩個條件，距離畫面頂端 10 pixel，距離畫面右邊 10 pixel。
圖中藍色的 Safe area 是畫面能夠「安全」呈現的區域，而紅色的 margin 是系統預設的邊邊。
Stack View
在排版當中，我們常常使用到的功能就是對齊。於是，Swift 有了強大的新功能 Stack View，不多說直接附上官方連結。
Alignment 可以決定對齊方式，Distribution 是內部元件如何分配，Spacing 是內部的間隔距離。
iPhone 內建的 iOS App
寫了這麼多，還是要實做過一次才能有更深刻的領悟。這次選擇用內建的健康 App，並挑戰目標如下：
- 畫面是否可以上下捲動。難度 ★★：是，使用不寫程式的 Static Cell 實現。
- 是否滿足各種不同的 iPhone 尺寸。難度 ★★：是，使用 Auto Layout。
- 是否以 Stack View 製作畫面。是。
主要步驟分為如下：
使用 TableViewController 做為主要 Health Data 的畫面，選用 Static Cell 固定表格，上面四個方形為 Header，而下面的條項為 Cell。
需先使用三個 Stack View 把 TableViewController 的 Header 裡面的四個方形組合起來。
利用 Stack View 對齊內部寬度與間隔，再使用 Auto Layout 來固定整個 Stack View 的位置。
Cell 裡面左邊的圖也是先用 Stack View 置中對齊，再把 Stack View 與外部的 Cell 固定。
以下就是我這次的實做結果。
看起來好像有點怪怪的嗎？
因為使用 static cell 的話，header 和 cell 的高度是無法使用 Auto Layout，所以左右的寬度都會随著變化，而高度卻沒有。
最後，不論看過多少文章或資源，還是要自己動手做做，才會領略其美妙之處，快和我一起練習吧。
