我買了 Simon Ng 寫的 iOS 9 App程式設計實力超進化實戰攻略 (Beginning iOS 9 Programming with Swift) ，學習怎麼用 Xcode 和 Swift 做 App。

這本書非常推薦設計師和完全不懂程式的初學者購買，前幾章都在講 Xcode 的 GUI 操作和實例，跟著範例自己做個會動的頁面出來很有成就感，能學到很多。

UI 設計師要懂 Auto Layout

我跟著書裡第 5 章範例做的 Auto Layout 練習，有置中的標題、置中的按鈕，和底部偏右方對齊的文字。

左，iPhone 4s ，標題和 Hello World 按鈕 置中，但畫面長度不夠下方文字沒有顯示。
中，iPhone 5s ，標題和 Hello World 按鈕 置中，下方文字置右，一切正常。
右，iPhone 6s ，標題偏左、按鈕偏左、文字位置也跑掉了。

UI 設計師都知道要給工程師的標示文件上需要寫明尺寸、間距等等，iOS 可以給座標。但在不同手機尺寸下，給座標就會出現上圖那樣的情況。

先來解決不同尺寸下元件位置會跑掉的問題，就要使用 Auto Layout 啦。（暫時跳過 Portrait 和 Landscape 的畫面變化，以及 Universal App。）

對齊與定位

其實看到這 2 個工具大概就猜得出工程師會怎麼設定 Auto Layout 了吧。（雖然工程師都寫 Code 直接處理，但拿 GUI 出來講總是比較容易被看懂。）

• Align：對齊。建立一個對齊的約束條件，ex 元件置中對齊。
• Pin：定位。建立間距約束條件，ex 元件上、右、下、左的間距。

所以設計師出標示文件給工程師的時候，需要寫明對齊方式和定位。比如 A 和 B 之間距離多少？置中還是置左？某元件如果要固定在左下角是不是要標明距離左和下的數值…等等

實例

因為尺寸不同所以版面跑位的情況，可以透過設定 Auto Layout 解決。設好後 Storyboard 會出現幾條輔助線。

標題

不管螢幕尺寸變化，標題都希望要置中，且距離頂端的位置要固定。

按鈕

按鈕設為「水平對齊」、「垂直對齊」。這樣不管在哪種螢幕尺寸下它都在正中間。

文字

文字設定距離右邊和距離底部的尺寸，不管螢幕尺寸變化，這行文字都會固定在右下角。

ma…這就產生一個新的問題，比如 avocode 和 zeplin 這類不用設計師出標示文件的好用外掛，如何讓工程師知道在不同螢幕尺寸下，各元件的位置呢？設計師哪有這麼勤勞針對各種螢幕尺寸出一堆原始檔。

看是要拼一定點另外寫份標示文件，或是乾脆放手讓工程師處理掉了吧。

延伸思考

Auto Layout 不只能處理各種螢幕尺寸下元件位置的版面問題，Portrait 和 Landscape （手機轉橫或轉直）間的切換也可以用它來處理，甚至 Universal App（iPhone 和 iPad 同一支 app 程式），iPhone 和 iPad 之間的 Responsive 也可以透過 Auto Layout 搞定。

嗯，這就來討論下 1. 為什麼 Landscape 要用 Auto Layout，2. 為什麼 Universal App 要用 Auto Layout。

為什麼 Landscape 要用 Auto Layout

從使用者的操作，簡單分成 2 種可能性。

1.手機轉橫是為了看更大的畫面，比如 Safari。
2.手機轉橫會觸發不同的功能。（可參考舊文：Portrait 和 Landscape，談螢幕方向 ）

如果是為了看更大的畫面，功能元件幾乎相同，用 Auto Layout 我覺得很方便省事。

如果會觸發不同功能甚至換個介面，那用 Auto Layout 想幹嘛？當然是刻個新的 UI 啊！

為什麼 Universal App 要用 Auto Layout。

同上方的理由，iPad 的介面和 iPhone 的介面會完全一樣嗎？iPad 螢幕比 iPhone 大那麼多，操作情境、功能複雜度不會一樣。

而且，在開啟 App 時就判定 App 被裝在哪種裝置上，讀取 iPad 或 iPhone 的程式碼，都比用 Auto Layout 乾脆實在啊。

.
.
.

Auto Layout 入門教學 一文說明介紹 Xcode Auto Layout 設定方式、詳細操作等，可以去看這個網頁喔！