昨天，我們的 App 第一次「活」了過來，學會了回應使用者的點擊。但你可能也發現了一個新問題：只要換個尺寸的手機，畫面上的元件就開始大亂跑！這就像我們只把家具「隨意擺放」，卻沒有把它們固定起來。

今天，我們就要來學習 iOS 的排版神技 —— Auto Layout！我們將學會為 UI 元件綁上「看不見的繩索」，也就是約束（Constraints）。你不再是告訴按鈕「待在座標 (100, 200)」，而是命令它：「永遠離頂部 20 點遠，並永遠保持在畫面正中央」。

學會了這項技巧，你的 UI 就能像被施了魔法一樣，優雅地自動適應任何螢幕尺寸！

今日學習重點

• Auto Layout 核心概念：認識 Auto Layout 的用途，以及為何需要約束（Constraints）。
• 建立第一個約束：學習使用 Control 拖曳，完成最常見的畫面置中設定。
• 常用約束參考：概覽與 Safe Area、元件間距、尺寸相關的各種約束用法。
• 除錯技巧：了解如何檢查 Xcode 中的約束警告，並學習基礎的修正方法。

什麼是 Auto Layout？

Auto Layout 就像是幫 UI 元件「訂下規矩」的排版管家。
我們只要告訴它：

「這個 Label 要離頂部 20 點，並保持在畫面正中間」

它就會自動在不同螢幕中、不同旋轉狀態下，讓元件乖乖服從這些規則。

它能解決什麼？

• 螢幕尺寸不同時，畫面不會跑版
• 橫向 / 直向切換時，元件位置與大小會自動調整
• 新增或刪除元件時，排版能自動重整

Safe Area（安全區域）：指在螢幕上不會被瀏海、圓角或底部 Home 指示條等系統 UI 遮擋的內容顯示區域。

常見約束條件

在拖曳時，選單中會出現各種約束條件。以下是完整的分類列表，方便你對照使用。

與 Safe Area 的約束

這些是針對元件與畫面中「Safe Area」（安全區域）邊界之間的距離設定：

這些控制元件是否在安全區中置中顯示：

位置對齊與置中

這些控制元件是否在畫面中置中顯示，或與其他元件對齊：

尺寸與比例控制

這些功能用來保持多個元件尺寸一致或固定元件本身的比例：

教學範例：最常用置中設定法

步驟 1：選擇 UI 元件

開啟 MainViewController.xib，使用我們上次專案中的 Label 來示範。
將它大致放在畫面中間的位置（不用太精準，接下來會用 Auto Layout 調整）

步驟 2：設定 Auto Layout 約束

按住 Control 鍵，從 Label 拖曳到 Safe Area
選擇以下兩個常用的約束條件：

• Center Horizontally in Safe Area（水平置中）
• Center Vertically in Safe Area（垂直置中）

如何調整寬度或位置偏移？

當你使用 Center Horizontally 或 Center Vertically 的約束後，元件會自動對齊到安全區域的中心點。如果想讓元件稍微偏移位置，可以用以下步驟調整：

• 選取元件（例如 Label）
• 打開右側的 Size Inspector（尺寸檢查器）
• 找到想調整的約束，點擊旁邊的 Edit
• 調整 Multiplier 或 Constant 的數值

約束小提醒：至少四條才能穩定布局

在使用 Auto Layout 時，記得每個元件通常需要至少 四條約束，才能讓系統正確計算它的位置與大小。這四條約束可以是：

• 上、下、左、右的距離約束
  或是
• 水平置中 + 垂直置中 + 固定寬度 + 固定高度

若約束不足，Xcode 可能會出現警告，元件也可能無法穩定顯示，造成畫面亂掉或跑版。因此，設定約束時，務必確認至少有四條足夠的限制條件，讓 Auto Layout 幫你精準掌控畫面配置！

如何確認約束設定成功？

• 檢查警告：若畫面中出現紅線或黃線，代表有約束衝突或不足
• 查看約束列表：選取元件 → 點右側的「Size Inspector」可檢查詳細約束
• 快速修正：點選右下角
  第四個 Resolve Auto Layout Issues 工具，使用自動修正功能

開發者小技巧

這是我在開發過程中最常用的一種快速排版方式：

• 先讓元件置中
• 再用 Constant 及 Multiplier 做調整位置
• 必要時也設定 Equal Widths 對齊畫面寬度

這樣做非常快速又靈活，尤其適合初期畫面配置時使用。當然，剛開始學習建議你也可以多嘗試其他 Auto Layout 的排版方式，不同的情境會有更適合的解法！

小結一下

今天，我們終於掌握了 iOS 開發中最重要的 UI 排版神技：Auto Layout！我們理解了它如何透過「約束（Constraints）」的規則，讓 App 畫面能優雅地適應各種螢幕尺寸，從此告別「跑版」的惡夢。

你不僅親手完成了第一個置中練習，也學會了「至少四條約束」的黃金法則與除錯技巧。最重要的是，你現在擁有了一份完整的約束條件字典，為未來打造複雜介面打下了堅實的基礎。掌握 Auto Layout，是你成為專業 iOS 開發者的重要一步！

🌟 明天預告

恭喜你掌握了 Auto Layout 這項排版神技！有了穩固的介面骨架，我們終於可以開始為 App 增添各式各樣有趣的互動功能了。

從明天開始，我們將進入 UI 設計的下一站：認識並實作 iOS 中最常見的畫面元件！這就像是打開了一盒全新的 LEGO，裡面有各式各樣的特殊零件：你可以用 拉桿（Slider） 來調整數值、用 輸入框（TextField） 來接收文字、用 表格（TableView） 來展示長長的清單... 甚至實現畫面之間的跳轉！

準備好將你的 App 從一個靜態的畫面，變成一個充滿互動樂趣的作品了嗎？

敬請期待《Day 19｜Xcode 元件教學：滑出互動感，打造 Slider 元件！》