智能手機(jī)發(fā)展到今天，屏幕尺寸變的越來越多，iPhone從最初的3.5寸屏幕，到后來推出的4寸屏，直到蘋果推出iPhone 6 和 iPhone 6Plus，也宣告著蘋果陣營(yíng)被徹底攻破，進(jìn)入了屏幕尺寸碎片化的時(shí)代。只為某一個(gè)屏幕尺寸設(shè)計(jì)的日子已經(jīng)不在存在。為了適配所有的屏幕，設(shè)計(jì)師必須考慮各種屏幕尺寸。但是又不可能為每個(gè)尺寸都設(shè)計(jì)一遍。那么我們又該如何面對(duì)屏幕碎片化的困境？
圖1，圖片來自：HTTP://WWW.PAINTCODEAPP.COM/NEWS/ULTIMATE-GUIDE-TO-IPHONE-RESOLUTIONS
蘋果給出的答案是AutoLayout。讓你能用一個(gè)設(shè)計(jì)來適配所有屏幕，理論上講從iPhone4適配到iPad pro都可以。它希望你忘記某個(gè)具體的尺寸。實(shí)際上你可以隨意拖出一個(gè)任意尺寸的畫布進(jìn)行設(shè)計(jì)，標(biāo)注好后就可以交給工程師開發(fā)。
首先我們先看一下，蘋果的開發(fā)軟件Xcode上是讓你怎么進(jìn)行頁面布局的。
圖2，XCODE.STORYBOARD
中間那塊白色的正方形就是畫布，如果你是使用storyboard布局的話（iOS的布局方式有很多種，storyboard只是其中一種，我在后面會(huì)講），你可以將你設(shè)計(jì)好的控件放到這個(gè)畫布上去，根據(jù)你標(biāo)注的尺寸定義好它們的位置關(guān)系，接下來AutoLayout就會(huì)自動(dòng)適配各個(gè)屏幕了。聽上去好像很神奇。
有些人會(huì)有疑問：我是以iPhone6的尺寸為基礎(chǔ)進(jìn)行設(shè)計(jì)和標(biāo)注的，怎么可能在一個(gè)正方形上根據(jù)我標(biāo)注的尺寸定好它們的位置關(guān)系，放到這個(gè)正方形上，我的標(biāo)注不是全亂了嗎？答案是，是，也是不是。如果你在設(shè)計(jì)和標(biāo)注時(shí)只為iPhone6設(shè)計(jì)，把適配的問題都拋給了工程師，很有可能最后出來的結(jié)果不是你想要的。相反，即使你是在iPhone6上進(jìn)行設(shè)計(jì)，但是你并沒有把思維局限在某個(gè)尺寸上，那么你的標(biāo)注放在正方形上也不會(huì)亂。
確切的講，如果你是以約束為基礎(chǔ)（constraint-based）來設(shè)計(jì)的界面，那么無論屏幕怎么變化，你的設(shè)計(jì)也會(huì)跟著進(jìn)行調(diào)整。
下面我就來講講AutoLayout到底是如何工作的，以及該如何用約束的思想來進(jìn)行設(shè)計(jì)。
對(duì)于iOS開發(fā)來講，通常會(huì)使用的是兩種布局方式。一種是使用代碼設(shè)置每個(gè)視圖（View）的Frame來進(jìn)行定位。另一個(gè)則是使用AutoLayout進(jìn)行布局（可以在storyboard上，也可以使用代碼）。假設(shè)我們?cè)趇Phone6（375*667）的尺寸下放了有兩個(gè)視圖，A和B。
Tips：在iOS開發(fā)中使用的單位是point，也就是@1x下的尺寸。如果你是以iPhone6（750*1334Px）的尺寸進(jìn)行設(shè)計(jì)的，那么里面的尺寸都要除以2才能用。所以建議大家在@1x的環(huán)境下設(shè)計(jì)。本文不做特殊說明，沒標(biāo)單位的標(biāo)注，默認(rèn)單位都為point。
1.Frame定位
設(shè)置Frame進(jìn)行定位的方法不是本文討論的重點(diǎn)，我只在這里簡(jiǎn)單介紹一下。首先在iOS里的坐標(biāo)系和我們平時(shí)用的有點(diǎn)不同。它的坐標(biāo)原點(diǎn)在左上角。每個(gè)視圖都有自己獨(dú)立的坐標(biāo)系。見下圖。
圖3，使用FRAME進(jìn)行定位
通常我們定義一個(gè)Frame的代碼（Swift）是這樣的：
let frame = CGRectMake(x:CGFloat, y:CGFloat, width:CGFloat, height:CGFloat)
當(dāng)然你不需要看懂它，只需要知道它要你提供四個(gè)參數(shù)：x，y，width，height。x ，y 是你要定位的視圖的原點(diǎn)相對(duì)于包含它的視圖的（superView）坐標(biāo)系的坐標(biāo)。width，height 當(dāng)然就是你要定位的視圖的寬度和高度了。
總結(jié)一下就是你需要提供位置信息（location）以及尺寸（size）信息。
所以上圖中A，和 B的Frame應(yīng)該是這樣的：
let frameA = CGRectMake(60, 60, 255, 160)
let frameB = CGRectMake(60, 280, 255, 160)
2.AutoLayout定位
AutoLayout布局背后的邏輯則完全不同于上一種方式。同一個(gè)圖，AutoLayout可以用下圖這種方式來表示。
圖4，AUTOLAYOUT布局
AutoLayout是通常是通過定義一系列的約束（constrains）來進(jìn)行定位的。和Frame定位一樣，它同樣需要你提供位置和尺寸信息，但是和Frame不同的是，它不是讓你直接提供x，y，width，height，而是通過你給的約束來推斷出相應(yīng)的尺寸和位置。只有當(dāng)能從你給的約束關(guān)系中推斷出位置和大小信息，而且還沒有沖突時(shí)，才能通過。
如上圖中的視圖A，我們通過上下左右四個(gè)約束定好了它的位置。我們提供了它的高度，但是我們并沒有給出它的寬度。之前說過，要確定一個(gè)視圖的布局，你需要提供位置以及尺寸信息。而這里我們卻沒有提供寬度。應(yīng)為寬度不是一個(gè)固定的數(shù)值，需要AutoLayout自己通過現(xiàn)有的約束來推斷出視圖A的寬度 = 375（屏幕寬度)— 60—60 = 255，這樣當(dāng)屏幕寬度變化時(shí)，視圖A的寬度也會(huì)隨之變化。
AutoLayout能夠根據(jù)你在相應(yīng)視圖上設(shè)置的約束，自動(dòng)計(jì)算出的你定義的視圖的位置和大小。
圖5，當(dāng)外部環(huán)境（屏幕寬度）變化時(shí)
當(dāng)周邊環(huán)境變化時(shí)，它也隨之改變，這就是AutoLayout能適配不同屏幕的秘訣。
AutoLayout的應(yīng)用并不局限于應(yīng)對(duì)外部環(huán)境的變化（屏幕大小變化），即使在同一個(gè)屏幕內(nèi)，當(dāng)頁面內(nèi)容開始變化時(shí)，AutoLayout也能做出相應(yīng)的調(diào)整。假設(shè)現(xiàn)在因?yàn)槟撤N原因，視圖A的高度變?yōu)榱?10。那么就會(huì)出現(xiàn)以下兩種結(jié)果：
圖6左，F(xiàn)RAME
圖6右，AUTOLAYOUT
用Frame定位方式，因?yàn)橐晥DA，B的位置信息是獨(dú)立的，A的變化，并不會(huì)影響B(tài)的位置，所以當(dāng)A變高時(shí)，A，B之間高度方向的距離就被壓縮了，可以想象，當(dāng)A繼續(xù)變高時(shí)，A和B之間就會(huì)出現(xiàn)疊加的情況，這顯然不是我們希望看到的效果。
而AutoLayout則不同，由于B高度方向的位置是相對(duì)于A的，所以當(dāng)A變高時(shí)，B的位置也會(huì)跟著變化。這當(dāng)然是我們希望看到的結(jié)果。
由此可見，AutoLayout的應(yīng)用場(chǎng)景不局限于適配不同的屏幕尺寸，即使在軟件運(yùn)行的過程中，當(dāng)頁面變化時(shí)它也能夠跟著調(diào)整。
需要提一下的是，使用Frame定位的方式也是能實(shí)現(xiàn)上面這種AutoLayout的效果的，反之我們也能使用AutoLayout來實(shí)現(xiàn)像Frame這種A,B不相互影響效果，我在這里不細(xì)說，有興趣的可以自己去思考一下。舉這個(gè)例子，只是為了說明絕對(duì)定位和相對(duì)定位的區(qū)別。
3.AutoLayout 的屬性（AutoLayout Attributes）
相對(duì)于Frame通常要你提供的x，y，width，height，AutoLayout可用的屬性則多的多，常用的屬性有這些：
Left
Right
Top
Bottom
Leading
Trailing
Width
Height
CenterX
CenterY
Baseline
查看所有屬性可點(diǎn)擊這里：
圖7，AUTOLAYOUT 屬性
這些屬性也大概可以分為兩類：大小（size）如width ，height ；位置（Location）如Leading，Trailing，Top，Button。
有了這些屬性，我們不僅能夠定義不同視圖之間的距離，讓它們對(duì)齊，定義不同視圖之間的相對(duì)尺寸，甚至可以定義一個(gè)視圖的長(zhǎng)寬比。
值得注意的是其中的Leading 和Trailing，并不等于Left和Right。Leading代表的是閱讀開始位置。通常我們都是習(xí)慣從左邊到右來閱讀，這種情況下Leading就是Left，Trailing就是Right。但并不是所有的國(guó)家都是依照這個(gè)方式的，比如中國(guó)古代的書，就是從右到左的，這時(shí)候Leading就在Right了。如果你的App用戶是國(guó)際化的，需要注意這個(gè)問題。通常情況下，我們都使用Leading，Trailiing。
圖8，不同語言環(huán)境下LEADING和TRAILING的區(qū)別
圖9
假設(shè)我們有以上兩個(gè)View，現(xiàn)在要求他們間隔距離為8，如上圖所示。那么他們之間的約束關(guān)系就可以這么表示：
ViewB.Leading = 1.0 x ViewA.Trailing + 8
其中1.0 是一個(gè)系數(shù)（Multiplier），這種情況下，這個(gè)系數(shù)為1.0
4.舉個(gè)例子
下面就講一個(gè)具體的例子來說明一下AutoLayout應(yīng)用。
假設(shè)我設(shè)計(jì)了一個(gè)這樣的界面（375*667），接下來要交給工程師進(jìn)行開發(fā)。我的要求如下：
1.三個(gè)視圖離頁面兩邊的距離都為37.5
2.每個(gè)視圖之間的距離，包括視圖離頁面頂端和底端的距離都要一樣，為40
3.三個(gè)視圖的寬度和高度要一樣。
我按照這些要求進(jìn)行了標(biāo)注，以下就是我想達(dá)到的效果以及我的標(biāo)注：
圖10左，我要實(shí)現(xiàn)的效果
圖10右，我的標(biāo)注
先分析一下我們的標(biāo)注。
首先我要求每個(gè)視圖離頁面兩邊的距離都為37.5。在標(biāo)注里我很明確地說明了這個(gè)問題。
其次，我要求每個(gè)視圖之間的距離，包括視圖離頁面頂端和底端的距離都要一樣，為40。在標(biāo)注中我也很明確地說明了這一點(diǎn)。
最后，我要求每個(gè)視圖的寬度和高度要一樣。在標(biāo)注里，每個(gè)視圖的高度都標(biāo)了169，符合我一樣高度的要求。我給第一個(gè)視圖標(biāo)上了寬度300，其他兩個(gè)和第一個(gè)首尾對(duì)齊，也是300，符合我一樣寬度的要求。
乍一看這個(gè)標(biāo)注沒有問題。但是這里我們確忽略了一個(gè)很重要的問題。這個(gè)圖我是以iPhone6的尺寸來設(shè)計(jì)的，但是實(shí)際情況，它并不只會(huì)出現(xiàn)在iPhone6的屏幕上。按照上面的標(biāo)注，標(biāo)注的總寬度 = 37.5*2 + 300 = iPhone6的屏幕寬度（375）。但是如果換一個(gè)手機(jī)屏幕，這個(gè)等式就不成立了。同樣，高度也是這個(gè)問題。這樣就和實(shí)際情況產(chǎn)生了沖突。
Tips：當(dāng)你的標(biāo)注在寬度方向，或高度方向的數(shù)值加起來等于某一個(gè)具體的屏幕尺寸時(shí)，你就需要去重新去檢查你的標(biāo)注了，需要說明那些尺寸是固定的，哪些尺寸是可變的。
顯然，工程師無法滿足你標(biāo)注的所有尺寸要求。如果他只看到你給的標(biāo)注文件，而不知道你的三點(diǎn)要求。那么這個(gè)標(biāo)注在寬度方向大概就出現(xiàn)了以下幾種可能性：
1.保持兩邊各37.5的邊距（margin）要求，每個(gè)視圖的寬度根據(jù)屏幕的寬度來伸縮
2.每個(gè)視圖的寬度保持300不變，兩邊的邊距根據(jù)屏幕的寬度來伸縮
3.視圖的寬度和邊距隨著屏幕的寬度變化一起縮放
從我們之前的要求來看，我們希望的是第一種可能性的，只是我們的標(biāo)注沒有很好的說明這個(gè)點(diǎn)。工程師需要靠自己的理解來選擇其中一種，有時(shí)候他的選擇可能并不是我們想要的結(jié)果。
我們?cè)撊绾螛?biāo)注，來很好的表達(dá)我的要求？正確的標(biāo)注應(yīng)該是這樣的：
圖11，正確的標(biāo)注方式
首先，我去掉了寬度的標(biāo)注，就像上個(gè)例子說的一樣，我們需要AutoLayout自己來計(jì)算出它的寬度，也就意味著我們是希望每個(gè)視圖的寬度隨著屏幕的寬度變化而變化。其次，我去掉高度的具體數(shù)值，只標(biāo)了一個(gè)h。同樣，因?yàn)槠聊坏母叨仁遣还潭ǖ模晕覠o法給出具體的高度，但是我又要求每個(gè)視圖的高度是一樣的。通過給每個(gè)視圖標(biāo)注高度h，來表示他們的高度一樣。
5.表達(dá)三種不同可能性
之前我說過，我第一次給出的標(biāo)注大概可以有三種不同的理解，那么我們又該如何來表達(dá)這三種可能性呢？下面我就來說一下，如何使用AutoLayout的方式標(biāo)注，來很明確地來表現(xiàn)以上三種可能性。
圖12
第一個(gè)視圖的標(biāo)注，保持兩邊各37.5的邊距（margin）要求，每個(gè)視圖的寬度根據(jù)屏幕的寬度來伸縮，這個(gè)上面說過。
第二個(gè)，我標(biāo)注了寬度，沒標(biāo)邊距。但是我們要求它水平方向居中，通過這個(gè)約束來確定它水平方向的位置。這樣邊距就可以根據(jù)屏幕的寬度變化而變化。
第三個(gè)，我標(biāo)注了寬度為80%的屏幕寬度，這樣它就能做到和屏幕一起縮放。
圖13
我在Xcode上添加好了上面要求的約束，并選擇在不同的模擬器上運(yùn)行。這樣就可以看到我們?cè)O(shè)計(jì)的頁面在不同設(shè)備上運(yùn)行的效果了。以下就是它在不同屏幕尺寸下顯示的效果：
圖14
可以看到，在iPhone6上一模一樣的三個(gè)視圖，應(yīng)為我們?cè)O(shè)置了不同的約束，在不同的設(shè)備上運(yùn)行就出現(xiàn)了不一樣的效果。因?yàn)锳utoLayout是根據(jù)你設(shè)置的約束，自動(dòng)計(jì)算出的你定義的視圖的位置和大小。
為了適配更多的屏幕，我們?cè)谠O(shè)計(jì)的時(shí)候需要用相對(duì)定位的思維來布局。
這次就講到這里，下一篇我會(huì)介紹更多AutoLayout相關(guān)知識(shí)，以及如何使用Xcode來添加約束，做出你自己設(shè)計(jì)的頁面。
Via: DDC
