簡(jiǎn)介
Auto Layout 是蘋果在 Xcode 5 (iOS 6) 中新引入的布局方式，旨在解決 3.5 寸和 4 寸屏幕的適配問題。屏幕適配工作在 iPhone 6 及 plus 發(fā)布以后變得更加重要，而且以往的“笨辦法”的工作量大幅增加，所以很多人開始學(xué)習(xí)使用 Auto Layout 技術(shù)。

初體驗(yàn)
0. 開發(fā)環(huán)境

本系列文章的開發(fā)環(huán)境為：

OS X 10.10.3
Xcode Version 6.3.1 (6D1002)
1. 新建應(yīng)用

新建一個(gè) Single View Application，命名為 AutoLayout，如下：

點(diǎn)擊選中 Main.storyboard，右側(cè)內(nèi)容如下：

兩個(gè)按鈕將會(huì)在未來的開發(fā)中產(chǎn)生巨大的作用，他們將擁有本系列文章的全局名稱：按鈕1，按鈕2。請(qǐng)先記下他們的位置。

2. 直接上手，開始使用

這也是我對(duì)學(xué)習(xí)新的軟件編程技術(shù)的基本學(xué)習(xí)方法：有一個(gè)具體客觀驅(qū)動(dòng)的目標(biāo)，例如做一個(gè)真正要給客戶用的軟件，而不是“為了學(xué)習(xí)新技術(shù)提高自己”這類偽目標(biāo)。

讓我們直接上手：繪制一個(gè)距離左右邊都有一定距離、固定高度、垂直居中的按鈕，叫“Swift on iOS”。

第一步，從右側(cè)拖過來一個(gè)按鈕，置于頁面最中間。會(huì)有參考線出現(xiàn)，這一步很容易：

選中這個(gè) button，將按鈕背景色和前景色進(jìn)行如下設(shè)置： 

將按鈕左側(cè)邊界往左拖動(dòng)直到自動(dòng)吸附，留下一定的距離。右側(cè)進(jìn)行同樣操作： 

選中這個(gè) button，修改文字為 Swift on iOS: 

選中這個(gè) button，點(diǎn)擊 按鈕2 ，選擇這一項(xiàng)： 

這時(shí)候 button 周圍會(huì)出現(xiàn)一些藍(lán)色的線條，這些就是 Auto Layout 的約束項(xiàng)。

3. 大功告成，查看效果
3.5寸: 

4寸: 

4.7寸: 

5.5寸：

4. 分析
選中這個(gè) button，在右側(cè)查看自動(dòng)生成的約束項(xiàng)： 

只有三項(xiàng)，這三項(xiàng)的意思分別是：和父視圖縱向居中對(duì)齊、右側(cè)和父視圖對(duì)齊、左側(cè)和父視圖對(duì)齊。

我們很容易就能理解這樣可以定位一個(gè)按鈕，但是總感覺少了點(diǎn)什么。實(shí)際上這三個(gè)自動(dòng)生成的約束項(xiàng)并不能描述一個(gè) button 的位置，因?yàn)樯倭艘粋€(gè)關(guān)鍵的屬性：button 的高度。以后我們會(huì)詳細(xì)地討論。

5. 核心思想
本質(zhì)分析

Auto Layout 的本質(zhì)是依靠 某幾項(xiàng)約束條件 來達(dá)到對(duì)某一個(gè)元素的定位。我們可以在某個(gè)地方只使用一個(gè)約束，以達(dá)到一個(gè)小目的，例如防止內(nèi)容遮蓋、防止邊界溢出等。但我的最佳實(shí)踐證明，如果把頁面上每一個(gè)元素的位置都用 Auto Layout 進(jìn)行 “嚴(yán)格約束” 的話，那么 Auto Layout 可以幫我們省去非常多的計(jì)算 frame 的代碼。

“嚴(yán)格約束” 是什么？

簡(jiǎn)單來說，嚴(yán)格約束就是對(duì)某一個(gè)元素的絕對(duì)定位，讓它在任一屏幕尺寸下都有著唯一的位置。這里的絕對(duì)定位不是定死的位置，而是對(duì)一個(gè)元素 完善的約束條件。

讓我們看圖說話：

我們要在一個(gè)直角坐標(biāo)系里描述一個(gè)矩形。
那么只需要指定這個(gè)矩形的位置和大小。
那么只要給出上圖中的四個(gè)值即可：到左邊界的距離，到上邊界的距離，寬度，高度。
這四個(gè)約束是最簡(jiǎn)單的情況。在對(duì)一個(gè)元素進(jìn)行嚴(yán)格約束時(shí)，請(qǐng)直接在腦中構(gòu)建這個(gè)元素，并且加上幾條約束條件，如果他無法縮放和動(dòng)彈，那么嚴(yán)格約束就是成功的！
必須牢記，使用 Auto Layout 時(shí)最重要的是：對(duì)頁面上每一個(gè)元素都進(jìn)行嚴(yán)格約束，不嚴(yán)格的約束是萬惡之源。

6.實(shí)現(xiàn)三等分
三等分設(shè)計(jì)思路

許多人剛開始接觸 Auto Layout，可能會(huì)以為它只能實(shí)現(xiàn)上面的1、2功能，其實(shí)后面3、4兩個(gè)功能才是強(qiáng)大、特別的地方。接下來我們將嘗試設(shè)計(jì)橫向三等分：

第一個(gè)元素距離左邊一定距離。
最后一個(gè)元素距離右邊一定距離。
三者高度恒定，寬度相等。（此處我們?cè)O(shè)置為高度恒定（height 屬性），如果你需要的是固定長(zhǎng)寬比，則需要設(shè)定 Aspect Ratio 屬性）
1和2、2和3的橫向間距固定。
干貨，實(shí)現(xiàn)過程的動(dòng)圖：

運(yùn)行結(jié)果

4 寸：

4.7 寸：

縱向三等分實(shí)現(xiàn)方式類似，大家可以自己嘗試一下哦~

最新評(píng)論