Auto Layout 使用心得（一）—— 初體驗

本系列文章將從一個慢慢摸索中的新手的角度介紹 Auto Layout，講述我在這兩個月的學習中對它一點一滴的感覺，最終目的是讓你們在閱讀完以後可以本身上手使用，並完成絕大多數簡單的佈局約束。

此係列文章代碼倉庫在 https://github.com/johnlui/AutoLayout ，有不明白的地方能夠參考個人 Auto Layout 設置哦，下載到本地打開就能夠了。

簡介

Auto Layout 是蘋果在 Xcode 5 (iOS 6) 中新引入的佈局方式，旨在解決 3.5 寸和 4 寸屏幕的適配問題。屏幕適配工做在 iPhone 6 及 plus 發佈之後變得更加劇要，並且以往的「笨辦法」的工做量大幅增長，因此不少人開始學習使用 Auto Layout 技術。

初體驗

0. 開發環境

本系列文章的開發環境爲：

• OS X 10.10.2
• Xcode Version 6.2 (6C131e)

1. 新建應用

新建一個 Single View Application，命名爲 AutoLayout，以下：

點擊選中 Main.storyboard，右側內容以下：

一、2 兩個按鈕將會在將來的開發中產生巨大的做用，他們將擁有本系列文章的全局名稱：按鈕1，按鈕2。請先記下他們的位置。

2. 直接上手，開始使用

這也是我對學習新的軟件編程技術的基本學習方法：有一個具體客觀驅動的目標，例如作一個真正要給客戶用的軟件，而不是「爲了學習新技術提升本身」這類僞目標。

讓咱們直接上手：繪製一個距離左右邊都有必定距離、固定高度、垂直居中的按鈕，叫「Swift on iOS」。

1. 第一步，從右側拖過來一個按鈕，置於頁面最中間。會有參考線出現，這一步很容易：
   

2. 選中這個 button，將按鈕背景色和前景色進行以下設置：
   

3. 將按鈕左側邊界往左拖動直到自動吸附，留下必定的距離。右側進行一樣操做：
   

4. 選中這個 button，修改文字爲 Swift on iOS:
   

5. 選中這個 button，點擊 按鈕2 ，選擇這一項：
   

這時候 button 周圍會出現一些藍色的線條，這些就是 Auto Layout 的約束項。

3. 大功告成，查看效果

3.5:

4:

4.7:

5.5:

4. 分析

選中這個 button，在右側查看自動生成的約束項：

只有三項，這三項的意思分別是：和父視圖縱向居中對齊、右側和父視圖對齊、左側和父視圖對齊。

咱們很容易就能理解這樣能夠定位一個按鈕，可是總感受少了點什麼。實際上這三個自動生成的約束項並不能描述一個 button 的位置，由於少了一個關鍵的屬性：button 的高度。之後咱們會詳細地討論。

核心思想

本質分析

Auto Layout 的本質是依靠 某幾項約束條件 來達到對某一個元素的定位。咱們能夠在某個地方只使用一個約束，以達到一個小目的，例如防止內容遮蓋、防止邊界溢出等。但個人最佳實踐證實，若是把頁面上每個元素的位置都用 Auto Layout 進行 「嚴格約束」 的話，那麼 Auto Layout 能夠幫咱們省去很是多的計算 frame 的代碼。

「嚴格約束」 是什麼？

簡單來講，嚴格約束就是對某一個元素的絕對定位，讓它在任一屏幕尺寸下都有着惟一的位置。這裏的絕對定位不是定死的位置，而是對一個元素 完善的約束條件。

讓咱們看圖說話：

1. 咱們要在一個直角座標系裏描述一個矩形。
2. 那麼只須要指定這個矩形的位置和大小。
3. 那麼只要給出上圖中的四個值便可：到左邊界的距離，到上邊界的距離，寬度，高度。
4. 這四個約束是最簡單的狀況。在對一個元素進行嚴格約束時，請直接在腦中構建這個元素，而且加上幾條約束條件，若是他沒法縮放和動彈，那麼嚴格約束就是成功的！
5. 必須牢記，使用 Auto Layout 時最重要的是：對頁面上每個元素都進行嚴格約束，不嚴格的約束是萬惡之源。

下一步：Auto Layout 使用心得（二）—— 實現三等分

---

原文發表在個人我的網站：Auto Layout 使用心得（一）—— 初體驗