昨天我們建立了第一個ios app，內容是一個label，其中帶有”Hello world”的文字。

但如果是將手機橫屏，或這換成其他大小不同的機種呢？


在其他裝置上，位置完全就不同了，這時候我們就要用到 “Auto layout” 這個功能。
先介紹Auto Layout選單

Align： 建立對齊的約束條件
Pin / Add New Constraints：建立間距的約束條件. ex: 訂出UI控制的寬度 / 水平置中。
Issues / Resolve Auto layout issue：解決佈局問題。

設定label的位置條件

1. 首先 我們選取 “Hello world”這個 label後，在auto layout選單中點擊 “Align”
2. 分別勾選 “Horizontally in Contriner”、“Vertically in Container”
3. 點擊 “Add 2 constraints”
   這樣我們就把這個 label的約束條件加入設定中。
   我們可以隨意的編譯不同的機型並且任意地切換左右橫屏或上下顛倒來檢驗這個label是否都在畫面置中的位置。

解決佈局約束條件問題

很多時候雖然設定好約束條件，但為了排版而讓移動位置跑掉，stroyboard上會出現紅色/橘色的線來提醒開發者這個物件目前的位置與所約束的條件不一樣。我們要怎麼解決呢？

1. 在 文件大綱視圖找到黃色的驚嘆號，點選 “update Frame” -> “Fix misplacement”
   這樣“Hello world” label就又回到畫面正中間了。

設定約束條件

前面我們提到如何將物件放置於畫面的正中央，但如果想要放在其他位置呢？

1. 新增一個名為 Auto Layout的 label到 stroyboard中。
2. 點擊auto layout選單中的 “Add new Constraints”
3. 分別於修改右邊及下方的距離，並且確認紅色的線有亮起
4. 點擊 “Add 2 constraints” 確定設定的條件
   條件設定好後，label就不會再亂跑囉