Day 5 - 調色盤實作（XIB 介面建立與元件擺放）

昨天我們完成了 MainViewController 的建立，今天要開始在 XIB 上設計主畫面介面。

打開 XIB

首先，點擊左邊資料夾中的 MainViewController.xib 檔案。

打開後會看到類似 Storyboard 的介面。接著，點選右上角的「＋」按鈕，新增 UI 元件。

加入需要的元件

在這個頁面中，我們要決定主畫面需要哪些元件。如下圖：

• 1 個 Table View
• 3 個 Label
• 3 個 Slider
• 3 個 Text Field

完整版面

將元件拖曳到 XIB 畫面上，調整擺放位置後，完成的版面如下：

加上約束（Auto Layout）

最後一個重要的步驟，就是為元件加上 Auto Layout 約束。
約束設定得好，畫面在不同裝置上才不會跑版。
由於 Auto Layout 的細節較多，這裡建議參考以下教學文章，能更清楚理解：
Medium@ethan0320 教學

結語

今天我們完成了 XIB 元件的建立與擺放，並介紹了 Auto Layout 約束 的重要性。
明天將繼續教大家 如何將 XIB 與程式碼連結，實現互動功能。