這是博主的WWDC2012筆記系列中的一篇,，完整的筆記列表可以參看這里。如果您是首次來到本站,，也許您會(huì)有興趣通過RSS,，或者通過頁面左側(cè)的郵件訂閱的方式訂閱本站。

AutoLayout在去年的WWDC上被引入Cocoa,，而在今年的WWDC上,，Apple不惜花費(fèi)了三個(gè)Session的前所未見的篇幅來詳細(xì)地向開發(fā)者講解AutoLayout在iOS上的應(yīng)用，是由起原因的：iPhone5的屏幕將變?yōu)?寸,，開發(fā)者即將面臨為不同尺寸屏幕進(jìn)行應(yīng)用適配的工作,。Android平臺(tái)開發(fā)中最令人詬病的適配工作的厄運(yùn)現(xiàn)在似乎也將降臨在iOS開發(fā)者的頭上,。基于這樣的情況,，Apple大力推廣使用AutoLayout的方法來進(jìn)行UI布局,，以一舉消除適配的煩惱。AutoLayout將是自Interface Builder和StoryBoard之后UI制作上又一次重要的變化,，也必然是之后iOS開發(fā)的趨勢,，因此這個(gè)專題很值得學(xué)習(xí)。

AutoLayout是什么,？

使用一句Apple的官方定義的話

AutoLayout是一種基于約束的,，描述性的布局系統(tǒng)。 Auto Layout Is a Constraint-Based, Descriptive Layout System.

關(guān)鍵詞：

• 基于約束 － 和以往定義frame的位置和尺寸不同,，AutoLayout的位置確定是以所謂相對位置的約束來定義的,，比如x坐標(biāo)為superView的中心，y坐標(biāo)為屏幕底部上方10像素等
• 描述性 － 約束的定義和各個(gè)view的關(guān)系使用接近自然語言或者可視化語言（稍后會(huì)提到）的方法來進(jìn)行描述
• 布局系統(tǒng) － 即字面意思,，用來負(fù)責(zé)界面的各個(gè)元素的位置,。

總而言之，AutoLayout為開發(fā)者提供了一種不同于傳統(tǒng)對于UI元素位置指定的布局方法,。以前,，不論是在IB里拖放，還是在代碼中寫,，每個(gè)UIView都會(huì)有自己的frame屬性,，來定義其在當(dāng)前視圖中的位置和尺寸。使用AutoLayout的話,，就變?yōu)榱耸褂眉s束條件來定義view的位置和尺寸,。這樣的最大好處是一舉解決了不同分辨率和屏幕尺寸下view的適配問題，另外也簡化了旋轉(zhuǎn)時(shí)view的位置的定義,，原來在底部之上10像素居中的view,，不論在旋轉(zhuǎn)屏幕或是更換設(shè)備（iPad或者iPhone5或者以后可能出現(xiàn)的mini iPad）的時(shí)候，始終還在底部之上10像素居中的位置,，不會(huì)發(fā)生變化,。

總結(jié)

使用約束條件來描述布局，view的frame會(huì)依據(jù)這些約束來進(jìn)行計(jì)算 Describe the layout with constraints, and frames are calculated automatically.

AutoLayout和Autoresizing Mask的區(qū)別

Autoresizing Mask是我們的老朋友了…如果你以前一直是代碼寫UI的話,，你肯定寫過UIViewAutoresizingFlexibleWidth之類的枚舉,；如果你以前用IB比較多的話，一定注意到過每個(gè)view的size inspector中都有一個(gè)紅色線條的Autoresizing的指示器和相應(yīng)的動(dòng)畫縮放的示意圖,，這就是Autoresizing Mask,。在iOS6之前，關(guān)于屏幕旋轉(zhuǎn)的適配和iPhone,，iPad屏幕的自動(dòng)適配,，基本都是由Autoresizing Mask來完成的,。但是隨著大家對iOS app的要求越來越高，以及已經(jīng)以及今后可能出現(xiàn)的多種屏幕和分辨率的設(shè)備來說,，Autoresizing Mask顯得有些落伍和遲鈍了,。AutoLayout可以完成所有原來Autoresizing Mask能完成的工作，同時(shí)還能夠勝任一些原來無法完成的任務(wù),，其中包括：

• AutoLayout可以指定任意兩個(gè)view的相對位置,，而不需要像Autoresizing Mask那樣需要兩個(gè)view在直系的view hierarchy中。
• AutoLayout不必須指定相等關(guān)系的約束,，它可以指定非相等約束（大于或者小于等）,；而Autoresizing Mask所能做的布局只能是相等條件的。
• AutoLayout可以指定約束的優(yōu)先級(jí),，計(jì)算frame時(shí)將優(yōu)先按照滿足優(yōu)先級(jí)高的條件進(jìn)行計(jì)算,。

總結(jié)

Autoresizing Mask是AutoLayout的子集，任何可以用Autoresizing Mask完成的工作都可以用AutoLayout完成,。AutoLayout還具備一些Autoresizing Mask不具備的優(yōu)良特性,，以幫助我們更方便地構(gòu)建界面。

AutoLayout基本使用方法

Interface Builder

最簡單的使用方法是在IB中直接拖,。在IB中任意一個(gè)view的File inspector下面,，都有Use Autolayout的選擇框（沒有的同學(xué)可以考慮升級(jí)一下Xcode了=。=）,，鉤上,，然后按照平常那樣拖控件就可以了。拖動(dòng)控件后在左邊的view hierarchy欄中會(huì)出現(xiàn)Constraints一向,，其中就是所有的約束條件,。

選中某個(gè)約束條件后，在右邊的Attributes inspector中可以更改約束的條件,，距離值和優(yōu)先度等：

對于沒有自動(dòng)添加的約束,，可以在IB中手動(dòng)添加。選擇需要添加約束的view,，點(diǎn)擊菜單的Edit->Pin里的需要的選項(xiàng),，或者是點(diǎn)擊IB主視圖右下角的按鈕,，即可添加格外的約束條件,。

可視化的添加不僅很方便直觀，而且基本不會(huì)出錯(cuò),，是優(yōu)先推薦的添加約束的方式,。但是有時(shí)候只靠IB是無法完成某些約束的添加的（比如跨view hierarchy的約束），有時(shí)候IB添加的約束不能滿足要求,，這時(shí)就需要使用約束的API進(jìn)行補(bǔ)充,。

手動(dòng)使用API添加約束

創(chuàng)建

iOS6中新加入了一個(gè)類：NSLayoutConstraint,，一個(gè)形如這樣的約束

• item1.attribute = multiplier ? item2.attribute + constant

對應(yīng)的代碼為

[NSLayoutConstraint constraintWithItem:button
                             attribute:NSLayoutAttributeBottom
                             relatedBy:NSLayoutRelationEqual
                                toItem:superview
                             attribute:NSLayoutAttributeBottom
                            multiplier:1.0
                              constant:-padding]

這對應(yīng)的約束是“button的底部（y） ＝ superview的底部 －10”。

添加

在創(chuàng)建約束之后,，需要將其添加到作用的view上,。UIView（當(dāng)然NSView也一樣）加入了一個(gè)新的實(shí)例方法：

• -(void)addConstraint:(NSLayoutConstraint *)constraint; 用來將約束添加到view。在添加時(shí)唯一要注意的是添加的目標(biāo)view要遵循以下規(guī)則：

  • 對于兩個(gè)同層級(jí)view之間的約束關(guān)系,，添加到他們的父view上

* 對于兩個(gè)不同層級(jí)view之間的約束關(guān)系,，添加到他們最近的共同父view上

* 對于有層次關(guān)系的兩個(gè)view之間的約束關(guān)系，添加到層次較高的父view上

刷新

可以通過-setNeedsUpdateConstraints和-layoutIfNeeded兩個(gè)方法來刷新約束的改變,，使UIView重新布局,。這和CoreGraphic的-setNeedsDisplay一套東西是一樣的～

Visual Format Language 可視格式語言

UIKit團(tuán)隊(duì)這次相當(dāng)有愛，估計(jì)他們自己也覺得新加約束的API名字太長了,，因此他們發(fā)明了一種新的方式來描述約束條件,，十分有趣。這種語言是對視覺描述的一種抽象,，大概過程看起來是這樣的：

accept按鈕在cancel按鈕右側(cè)默認(rèn)間距處

最后使用VFL（Visual Format Language）描述變成這樣：

[NSLayoutConstraint constraintsWithVisualFormat:@"[cancelButton]-[acceptButton]" 
                                        options:0 
                                        metrics:nil 
                                          views:viewsDictionary];</pre>

其中viewsDictionary是綁定了view的名字和對象的字典，對于這個(gè)例子可以用以下方法得到對應(yīng)的字典：

UIButton *cancelButton = ...  
UIButton *acceptButton = ...  
viewsDictionary = NSDictionaryOfVariableBindings(cancelButton,acceptButton);  

生成的字典為

{ acceptButton = ""; cancelButton = ""; }

當(dāng)然,，不嫌累的話自己手寫也未嘗不可?，F(xiàn)在字典啊數(shù)組啊寫法相對簡化了很多了，因此也不復(fù)雜,。關(guān)于Objective-C的新語法,，可以參考我之前的一篇WWDC 2012筆記：WWDC 2012 Session筆記——405 Modern Objective-C。

在view名字后面添加括號(hào)以及連接處的數(shù)字可以賦予表達(dá)式更多意義,，以下進(jìn)行一些舉例：

• [cancelButton(72)]-12-[acceptButton(50)]
  • 取消按鈕寬72point,，accept按鈕寬50point，它們之間間距12point
• [wideView(>=60@700)]
  • wideView寬度大于等于60point,，該約束條件優(yōu)先級(jí)為700（優(yōu)先級(jí)最大值為1000,，優(yōu)先級(jí)越高的約束越先被滿足）
• V:[redBox][yellowBox(==redBox)]
  • 豎直布局，先是一個(gè)redBox,，其下方緊接一個(gè)寬度等于redBox寬度的yellowBox
• H:|-[Find]-[FindNext]-[FindField(>=20)]-|
  • 水平布局,，F(xiàn)ind距離父view左邊緣默認(rèn)間隔寬度，之后是FindNext距離Find間隔默認(rèn)寬度,；再之后是寬度不小于20的FindField,，它和FindNext以及父view右邊緣的間距都是默認(rèn)寬度。（豎線'|‘ 表示superview的邊緣）

容易出現(xiàn)的錯(cuò)誤

因?yàn)樯婕凹s束問題,，因此約束模型下的所有可能出現(xiàn)的問題這里都會(huì)出現(xiàn),，具體來說包括兩種：

• Ambiguous Layout 布局不能確定
• Unsatisfiable Constraints 無法滿足約束

布局不能確定指的是給出的約束條件無法唯一確定一種布局,，也即約束條件不足,，無法得到唯一的布局結(jié)果,。這種情況一般添加一些必要的約束或者調(diào)整優(yōu)先級(jí)可以解決。無法滿足約束的問題來源是有約束條件互相沖突,，因此無法同時(shí)滿足，需要?jiǎng)h掉一些約束,。兩種錯(cuò)誤在出現(xiàn)時(shí)均會(huì)導(dǎo)致布局的不穩(wěn)定和錯(cuò)誤，Ambiguous可以被容忍并且選擇一種可行布局呈現(xiàn)在UI上,，Unsatisfiable的話會(huì)無法得到UI布局并報(bào)錯(cuò)。

對于不能確定的布局,，可以通過調(diào)試時(shí)暫停程序,，在debugger中輸入

• po [[UIWindow keyWindow] _autolayoutTrace]

來檢查是否存在Ambiguous Layout以及存在的位置,，來幫助添加條件。另外還有一些檢查方法,，來查看view的約束和約束狀態(tài)：

• [view constraintsAffectingLayoutForOrientation/Axis: NSLayoutConstraintOrientationHorizontal/Vertical]
• [view hasAmbiguousLayout]
  • [view exerciseAmbiguityInLayout]

2013年9月1日作者更新：在iOS7和Xcode5中,，IB在添加和檢查Autolayout約束方面有了長足的進(jìn)步。現(xiàn)在使用IB可以比較容易地完成復(fù)雜約束,，而得益于新的IB的約束檢查機(jī)制,，我們也很少再會(huì)遇到遺漏或者多余約束情況的出現(xiàn)（有問題的約束條件將直接在IB中得到錯(cuò)誤或者警告）。但是對于確實(shí)很奇葩的約束條件有可能使用IB無法達(dá)成,，這時(shí)候還是有可能需要代碼補(bǔ)充的,。

布局動(dòng)畫

動(dòng)畫是UI體驗(yàn)的重要部分，更改布局以后的動(dòng)畫也非常關(guān)鍵,。說到動(dòng)畫,，Core Animation又立功了..自從CA出現(xiàn)以后，所有的動(dòng)畫效果都非常cheap,，在auto layout中情況也和collection view里一樣,，很簡單（可以參考WWDC 2012 Session筆記——219 Advanced Collection Views and Building Custom Layouts），只需要把layoutIfNeeded放到animation block中即可～

[UIView animateWithDuration:0.5 animations:^{
    [view layoutIfNeeded];
}];

如果對block不熟悉的話,，可以看看我很早時(shí)候?qū)懙囊黄?a href="http://blog./2011/11/objc-block/">block的文章。