自動佈局-Constraint

springs和struts的問題

你確定很熟悉autosizing masks-也被認爲是springs&struts模式。autosizing mask決定了當一個視圖的父視圖大小改變時，其自身須要作出什麼改變。它有一個靈活的或固定不變的margins（struts）嗎？它的寬和高要作出什麼改變（springs）？

 

舉個例子，一個寬度靈活的視圖，若是其父視圖變寬，那麼它也會相應的變寬。一個視圖右邊擁有固定的margin，那麼它的右邊緣將會一直粘住其父視圖的右邊緣。

 

autosizing系統在簡單的狀況下很是奏效，但當你佈局變得更復雜時，它立馬跪了。讓咱們看一個springs和struts不能處理的示例。

 

打開Xcode5，建立一個基於Single View Application模板的iPhone項目。叫作"StrutsProblem":

點擊Main.storyboard。在你作別的以前，首先將這個storyboard的自動佈局關了。你須要在File inspector，第一個選項的第六個tabs裏：

 

將Use Autolayout的box勾選去掉。如今storyboard使用舊的struts-and-springs模型。

 

注意:任何你使用Xcode4.5或更高版本中，nib或者storyboard文件都默認激活了自動佈局。由於自動佈局是iOS6以及以上系統的一個新特性，若是你想使用最新的Xcode開發兼容iOS5的程序，你須要將這個選項去掉。

 

拖拽三個新的視圖到主視圖上，而且像這樣排列起來：

爲了表述更清楚，這裏給出每一個視圖的顏色，這樣你就能分清哪一個是驢子哪一個是馬了。

每一個視圖的inset到窗口的距離都是20點；視圖之間的距離也是20點。底部的視圖的寬是280點，上面兩個視圖的寬都是130點。全部的視圖的高都是254。

 

 

在iPhone Retina 4-inch simulator上運行這個程序，而且將模擬器旋轉到landscape。程序看起來便變成這副鬼樣，這不是我想象的那樣：

注意:你可使用Hardware\Rotate Left和Rotate Right菜單選項旋轉模擬器，或者經過按下鍵盤上的? 鍵，同時按下←或→。

 

而你想象的程序在landscape應該像這樣：

 

很明顯，三個視圖的autosizing masks留下了一些須要改進的地方。將左上方視圖的autosizing設置改爲這樣：

這將會讓視圖貼附左上邊緣（不是右下邊緣）,而且當父視圖大小改變時，從新調整自身水平和垂直方向的大小。

 

一樣的，右上方視圖的autosizing設置改爲這樣：

底部視圖：

再次運行程序，而且旋轉到landscape。如今看起來像這樣：

已經很接近了，但又不徹底同樣。視圖之間的padding不正確。換個說法就是視圖的大小不徹底正確。問題出在當父視圖改變大小時，autosizing masks告訴子視圖調整大小，但又沒告訴子視圖該調整多少（坑兒？）。

 

你能夠調戲autosizing masks-好比，改變靈活寬度和高度設置（springs）-你不會獲得徹底正確的三個間距20點的視圖。

    

爲了解決這個springs和struts方法的佈局問題，很是不幸，你須要額外寫一些代碼。

 

在旋轉用戶界面以前、之間、以後，UIKit會發送一些消息到你的視圖控制器，你能夠截獲這些消息，從而對你UI作出改變。表明性的像viewWillLayoutSubviews，你會重寫這個方法從而改變任何須要從新排列的視圖的frame。

 

在這以前，你須要先作出一個outlet屬性來引用這個視圖。

 

切換到Assistant Editor模式，按住Ctrl，將三個視圖都拖到ViewController.m中去：

 

分別連接視圖到這三個屬性：

1. @property (weak, nonatomic) IBOutlet UIView *topLeftView; 
2. @property (weak, nonatomic) IBOutlet UIView *topRightView; 
3. @property (weak, nonatomic) IBOutlet UIView *bottomView; 

 

下面的代碼寫到ViewController.m:

1. - (void)viewWillLayoutSubviews 
2. { 
3.     if (UIInterfaceOrientationIsLandscape(self.interfaceOrientation)) 
4.     { 
5.         CGRect rect = self.topLeftView.frame; 
6.         rect.size.width = 254; 
7.         rect.size.height = 130; 
8.         self.topLeftView.frame = rect; 
9.   
10.         rect = self.topRightView.frame; 
11.         rect.origin.x = 294; 
12.         rect.size.width = 254; 
13.         rect.size.height = 130; 
14.         self.topRightView.frame = rect; 
15.   
16.         rect = self.bottomView.frame; 
17.         rect.origin.y = 170; 
18.         rect.size.width = 528; 
19.         rect.size.height = 130; 
20.         self.bottomView.frame = rect; 
21.     } 
22.     else 
23.     { 
24.         CGRect rect = self.topLeftView.frame; 
25.         rect.size.width = 130; 
26.         rect.size.height = 254; 
27.         self.topLeftView.frame = rect; 
28.   
29.         rect = self.topRightView.frame; 
30.         rect.origin.x = 170; 
31.         rect.size.width = 130; 
32.         rect.size.height = 254; 
33.         self.topRightView.frame = rect; 
34.   
35.         rect = self.bottomView.frame; 
36.         rect.origin.y = 295; 
37.         rect.size.width = 280; 
38.         rect.size.height = 254; 
39.         self.bottomView.frame = rect; 
40.     } 
41. } 

當視圖控制器旋轉到一個新的方向，這個回調將會被調用。它會監控視圖控制器旋轉的方向，而且適當的調整視圖大小-在這種狀況，根據已知iPhone屏幕大小會有一個hard-code(將可變變量用一個固定值來代替的方法叫作hard-code)偏移。這個回調會在一個動畫block中發生，因此會動態的改變大小。

 

暫時還不要運行這個程序。首先你須要按下面的樣子從新保存三個視圖的autosizing masks，不然autosizing mechanism將會和你在viewWillLayoutSubviews中設置的位置和大小衝突。

這樣就能夠了，運行程序而且翻轉到landscape。如今視圖排列的很是號。翻轉回到portrait，經覈實，一切都良好。

 

這樣奏效了，可是你須要爲這個很是簡單的例子編寫大量的佈局代碼。想象一下，爲佈局付出的努力是很是複雜的，特別是個別視圖動態的改變大小，或者子視圖的個數是不固定的。

 

如今試着在3.5寸的模擬器上運行程序。我了個去。視圖的位置和大小又錯了，由於viewWillLayoutSubviews的hard-code座標是基於4英寸大小的手機(320x568取代320x480)。你能夠增長另外一個if語句判斷屏幕大小，並使用不一樣的座標集，可是你能夠看到這個方法很快變得不切實際。

注意:另外一個你能夠採起的方法就是爲portrait和landscape模式創建獨立的nibs。當設備旋轉時，你從另外一個nib中裝載視圖並替換掉當前的那個。但這任然須要作不少工做，而且維護兩個nibs也會增長問題。當你使用storyboards替代nibs的時候，這個方法也變得不切實際。

 

自動佈局拯救猿！

如今你將會看到如何用自動佈局實現相同的效果，從ViewController.m中移除viewWillLayoutSubviews，由於咱們再也不須要寫任何代碼。

 

選擇Main.storyboard，並在File inspector中選擇開啓Use Autolayout：

運行程序，旋轉到landscape。如今看起來像這樣：

讓咱們把自動佈局付諸行動。當你點擊頂部兩個視圖時，按住?鍵，這樣兩個視圖都被選中了。從Xcode的Editor菜單中選擇Pin\Widths Equally:

再次選中兩個相同的視圖，選擇Editor\Pin\Horizontal Spacing。（儘管你執行完第一次Pin處理後，兩個視圖看起來仍是被選中的，但其實他們只是在一個特別的佈局關係顯示模型裏。因此你須要從新選擇這兩個視圖）

 

storyboard如今看起來像這樣：

橙色的"T-bar"形狀表明視圖間的約束。目前爲止你增長了兩個約束：一個等寬約束和一個位於兩個視圖間的水平約束。約束表達了視圖之間的關係，而且他們是你使用自動佈局創建佈局最主要的工具。這貨看起來有點嚇人，可是一旦弄懂它的意思，便變得至關簡單。

 

爲了繼續爲這個屏幕簡歷佈局，執行下面這些步驟。每一個步驟增長更多橘黃色的T-bars.

 

o Top Space to Superview

o Leading Space to Superview

For the view on the right, choose:

o Top Space to Superview

o Trailing Space to Superview

And for the big view at the bottom:

o Leading Space to Superview

o Trailing Space to Superview

o Bottom Space to Superview

 

如今你應該有了下面這些約束：

注意T-bars仍然是橘黃色的。這意味這你的佈局沒有完成；自動佈局沒有足夠的約束條件計算出視圖的位置和大小。解決辦法即是增長更多約束，直到他們變藍。

 

按下? 鍵並選中三個視圖。從Editor菜單中，選擇Pin\Heights Equally。

 

如今選中左上角的視圖和底部視圖（像前面同樣按住? 鍵），選擇Editor\Pin\Vertical Spacing.

 

Interface Builder看起來應該像這樣：

T-bars已經變藍了。自動佈局如今已經有足夠的信息來計算出一個有效的佈局。這看起來有點雜亂無章，這是由於等寬和等高約束條件佔去了很大空間。

 

運行程序而且...我說吧，不須要寫一行代碼便運行的很好了。無論你在哪一個模擬器上運行；在3.5英寸和4英寸設備上，佈局都運行良好。

這很是酷，可是究竟你在這作了什麼？自動佈局讓你表達出佈局中的視圖和其餘每一個視圖的關係，而不是須要你指出視圖有多大，放在哪兒。你須要放置如下這些關係（即咱們所謂的約束）到佈局中：

1.左上角和右上角的視圖老是有相等的寬度（也就是pin中第一個widths equally命令）。

2.左上角和右上角的視圖水平方向有20點距離（也就是pin中的horizontal spacing）。

3.全部的視圖老是有相同的高度（也就是pin中heights equally命令）。

4.上面兩個視圖和下面那個視圖垂直方向上有20點距離（也就是pin中的vertical spacing）。

5.視圖和屏幕邊緣有20點空間（top，bottom，leading和trailing space相對於父視圖的約束）。

 

這些就足以表達出自動佈局該怎麼放置視圖，以及當屏幕大小改變時該如何處理。

你能夠在左邊Document Outline中看到你全部的約束，組名叫作Constraints（當你爲storyboard激活自動佈局時纔會加進來）。

 

若是你在Document Outline中點擊一個約束，Interface Builder將會在視圖中高亮出它：

 

約束是一個真實的對象（NSLayoutConstraint），而且他們也有屬性。好比，選擇上面兩個視圖的間距約束條件（叫作"Horizontal Space（20）"），而後切換到Attributes inspector。你能夠在那裏經過編輯Constant字段改變邊緣空間的大小。

將它設置爲100，而後再次運行程序。如今他們邊緣空間變得更寬了：

自動佈局在描述視圖上比springs和struts顯得更有表現力。在這篇教程的剩餘部分，你將會學到約束的一切，以及如何將他們應用到Interface Builder上來構造出不一樣種類的佈局。

 

自動佈局如何工做

正如你在上面測試樣例中所看到的同樣，自動佈局最基本的工具是約束。一個約束描述了兩個視圖間的幾何關係。好比，你可能有這樣一個約束：

"label A右邊緣和button B左邊緣有20點的空白空間。"

 

自動佈局會考慮到全部的約束，而後爲你的視圖計算出理想的位置和大小。你不再須要親自爲你的視圖設置frames了-自動佈局會徹底基於你爲這些視圖設置的約束爲你作這個工做。

 

自動佈局之前，你一直須要爲視圖的frames設置hard-code，要麼在Interface Builder中將他們放置在特定的座標，或經過傳遞一個rectangle到initWithFrame：，或者設置視圖的frame，bounds或者center屬性。

 

就你剛剛作的那個程序，你須要明確設置frames爲：

還須要爲這些視圖設置自動調整大小的masks：

 

這不再是你須要爲屏幕設計所考慮的東西了。使用自動佈局，你須要作這些：

視圖的大小和位置不再重要了，只有約束要緊。固然，當你拖一個新建的button或label到畫布上時，它會有必定的大小，而且你會將它拖到某一位置，但這是隻一個用來告訴Interface Builder如何放置約束的設計工具。

 

 

想你所想，如你所願

使用約束最大的優點就是你不再須要把時間浪費在座標上了。相反，你能夠向自動佈局描述視圖如何和其餘視圖相關聯，自動佈局將會爲你完成全部困難的工做。這叫作根據目的設計（designing by intent）。

 

當你根據目的設計時，你表達的是你想要實現什麼，而不須要關心它如何實現。"button的左上角座標爲（20，230）"，如今你能夠這麼說了：button是垂直居中於它的父視圖，而且相對於父視圖的左邊緣有一個固定的距離。

 

使用這個描述，無論父視圖多大或多小，自動佈局均可以自動計算出你的button須要在哪兒出現，

 

其餘根據目的設計的示例（自動佈局能夠處理全部這些指令）：

"這兩個text fields的大小須要一直相等。"

"這兩個button須要一直一塊兒移動。"

"這四個labels須要一直右對齊。"

 

這使得你用戶界面的設置更具描述性。你只需簡單的定義約束，系統會爲你自動計算frames。

 

在第一部分你看到，即便爲幾個視圖在橫豎方向上正確的佈局都須要作大量的工做。有了自動佈局，你能夠繞過這些麻煩。若是你正確的設置了約束，那麼在橫豎屏方向上，佈局將不須要作任何改變。

 

使用自動佈局另外一個重要的好處就是本地化。好比德語中的文本，出了名的比老奶奶的裹腳布還要長，適配起來是一件很麻煩的事。再次，自動佈局拯救了猿，由於它能根據label須要顯示的內容自動改變label的大小。

 

如今增長德語，法語或者其餘任何一種語言，都只是設置約束的事，而後翻譯文本，而後。。。就沒有而後了！

得到自動佈局竅門最好的方法就是使用它，因此這正是剩下教程中你會學到的東西。

 

注意：自動佈局不只對旋轉有做用；它還能輕易的縮放你UI的大小從而適應不一樣尺寸的屏幕。這並非巧合，當iPhone5擁有更高屏幕的同時，這個技術也同時加到了iOS中！自動佈局能輕易的拉伸你程序的用戶界面，從而充滿iPhone5垂直方向上多出來的空間。隨着iOS7中的動態類型，自動佈局變得更加劇要了。用戶如今能夠改變全局字體大小設置--有了自動佈局，這將變得很是簡單。

 

 

擁抱約束（courting constraints）

關閉你當前的項目並用Single View Application模板建立一個新的iPhone項目。叫作"Constraints"。任何用Xcode5建立出來的項目都會自動假定你會使用自動佈局，因此你並不須要額外作任何事情。

 

點擊Main.storyboard打開Interface Builder。拖一個新的Button到畫布上。注意當你拖拽的時候，藍色虛線將會出現。這寫線用來作嚮導。

在屏幕邊緣以及中心的時候，都會有嚮導線：

 

若是以前你已經使用過Interface Builder，那麼你確定看到過這些嚮導線。這對咱們對齊控件有很大的幫助。

 

在Xcode4中激活自動佈局時，嚮導線有另一個目的。你任然能夠用他們來對齊，可是他們也會告訴你新的約束將會在哪兒。若是你將button沿着嚮導線反方向拖拽到左上角時，Xcode4中的storyboard看起來便像這樣：

有兩個藍色的東西附屬在button上面。這些T-bar形狀的對象即是約束了。Xcode 4的Interface Builder中無論你將UI控制器放在哪兒，它老是會給出有效的約束。理論上這聽起來是個好主意，可是實踐起來，在Interface Builder中使用自動佈局卻很是困難。

 

幸運的是，Xcode5中已經有所好轉。將button拖拽到畫布上以後並看不到T-bars形狀的東西：

 

同時在Document Outline面板中也沒用Constraints部分。獲得結論：此時button上並無設置任何約束。

 

那這是如何運做的呢？咱們以前瞭解的自動佈局老是須要足夠多的約束才能決定視圖的大小和位置，可是如今咱們這兒跟本沒有約束。肯定這是一個完整的佈局？

 

這這是Xcode5相對Xcode4來講最大的一個提高：不再強制你老是有一個有效的佈局。

 

注意：1.運行一個無效佈局的程序是不明智的，由於自動佈局不能正確的計算須要將視圖放在哪兒。要麼視圖的位置是不可預知的（約束不夠），要麼程序將會崩潰（約束過多）。

 

2.Xcode4設法保證老是有足夠多正確的約束來建立一個有效的佈局。不幸的是，它常常會將你的約束替換爲你並不想要的。這會使人很沮喪，正是由於這個緣由不少開發者放棄了自動佈局。

 

3.Xcode5中，當你編輯Storyboard時它容許你有不完整的佈局，但它也會指出哪些地方你還須要修改。使用Interface Builder建立的自動佈局驅動用戶界面變得更有趣了，使用Xcode5也消耗更少的時間。

 

若是你根本不提供任何約束，Xcode自動分配一套默認的約束，正是咱們所知的自動約束。它會在程序built的編譯時間中去完成這些事，而不是設計時間。當你設計你的用戶界面時，Xcode5中的自動佈局爲了避免參與你的設計方法而努力工做，這這是咱們喜歡它的緣由。

 

自動約束爲你的視圖提供一個固定尺寸和位置。換句話說，視圖老是擁有跟你在storyboard中看到的同樣的座標。這是很是方便的，由於這就意味着你能夠大量的忽視自動佈局。你能夠爲那些擁有充分約束的控件不增長約束，只爲那些須要特殊規則的視圖建立約束。

 

OK，讓咱們玩一玩約束並看看他們能作什麼。如今，按鈕是在左上角，而且沒有約束。確認按鈕跟兩個拐角嚮導線對齊。

 

使用Editor\Pin菜單爲按鈕增長兩個新的約束，看起來像這樣：

這是Leading Space to Superview和Top Space to Superview選項。

 

全部的約束都會在Document Outline面板中列出來：

目前有兩個約束，一個是button和main view左邊緣的Horizontal Space約束，一個是button和main view上邊緣的Vertical Space約束。這個關係經過約束描述起來即是："button老是位於其父視圖左上角20點處。"

 

注意：這些其實都不是很是有用的約束，由於他們有相同的自動約束。若是你老是想你的button相對於父視圖左上角，那麼你還不如不提供任何約束，讓Xcode爲你作這些。

 

如今拖動button並將它放到屏幕的右上角，再次和藍色嚮導線對齊：

哇哦，這裏發生了什麼？在Xcode4中這會破壞舊的約束並賦值一個基於藍色嚮導線的新約束，可是在Xcode5中button保留了現存的約束。但問題是button在Interface Builder中的大小和位置不再和自動佈局但願基於約束的大小和位置相符合了。這叫作錯位的視圖。（misplaced view）

 

運行程序。Button仍然會出如今屏幕的左上角：

 

當談到自動佈局，橙色表明壞的。Interface Builder繪製兩個橙色方塊：一個是虛線邊框，一個是實線邊框。虛線方塊是根據自動佈局顯示視圖的frame。實線方塊是根據你在屏幕上放置的視圖的frame。這兩個應該吻合的，可是這裏並無。

 

如何修改取決於你想要達到什麼目的：

1.你想讓button附屬於屏幕左邊緣254點處嗎？在這種狀況下你須要將現存的Horizontal Space約束變大234點。這正是橙色badge中"+234"的意思。

2.你想讓button附屬於屏幕的右邊緣？那麼你須要移除現有的約束並從新建立一個新的。

 

刪除Horizontal Space約束。首先在畫布或Document Outline中選中，而後按鍵盤上的Delete鍵。

注意此次Vertical Space約束變橙色了。直到如今它都是藍色的。那一個約束並無任何錯誤；它的意思是剩下的沒有足夠的約束決定button完整的位置。你任然須要在X軸方向增長一個約束。

 

Note：你可能會奇怪，爲何Xcode不爲X軸方向自動增長一個約束。Xcode中的規則是：Xcode只爲那些你沒有設置任何約束的對象建立自動約束。一旦你增長一個約束，你即是告訴Xcode你接管了這個視圖。Xcode將再也不增長任何自動約束，並但願你爲這個視圖增長鬚要的約束。

 

選中button，並選擇Editor\Pin|Trailing Space to Superview.這迫使在button右邊緣和屏幕右邊緣增長一個新的約束。關係表達以下："button老是位於距離其父視圖右上角20點處。"

 

運行程序並旋轉到landscape。注意button如何與屏幕右邊緣保持相同距離：

 

當你放置一個對立於嚮導線的button（或者任何其餘視圖）並新建一個約束時，你會獲得一個根據"HIG"（Apple's iOS Human Interface Guidelines document）定義的標準大小的間隔約束。對於邊框來講，標準大小空間是20點。

 

如今將button向左拖拽一點：

因爲視圖錯位，你獲得了一個橙色虛線邊框。咱們假設這個button新位置的確是你想要的。建立完一個約束後作一些細微的調整是很常見的，但這卻會致使橙色方塊出現。一個修改方法就是移除約束並建立一個新的，但還有一個更簡單的解決方案。

 

Editor菜單上有一個Resolve Auto Layout Issues子菜單。從這個菜單中，選中Update Constraints。就我這個狀況來講，這會告訴Interface Builder須要將約束變大64點，像這樣：

 

很好，T-bars又變藍了，佈局是有效的。在Document Outline中，你能夠看到Horizontal Space約束再也不有一個標準的間隔了：

到目前爲止你已經嘗試過了Horizontal Space和Vertical Space約束。還有一個"center"約束。拖拽一個新的Button對象到畫布底部中心，根據嚮導線無缺入位：

 

爲了保持button在水平方向上一直居中對齊於父視圖，你須要增長一個Center X Alignment約束。從Editor菜單選擇Align\Horizontal Center in Container.這會增長一個很長的橙色線段：

 

 

線之因此是橙色是由於你才僅僅指定了button的X軸，但Y軸並無指定約束。使用Editor\Pin菜單在button和視圖底部間增長一個Vertical Space約束。看起來像這樣：

 

若是你不知道緣由，這是Bottom Space to Superview選項。Vertical Space約束使button遠離視圖底部（再一次使用標準間隔）。

 

運行程序並旋轉到橫屏模式。甚至在橫屏模式，button也保持在屏幕底部的中心：

這就是你表達的意思---這個button始終應該位於底部中心。注意，你根本不須要告訴Interface Builder按鈕的座標是什麼，除非你想將它固定在視圖上。

 

 

經過自動佈局，你不再須要擔憂視圖位置的精確座標或視圖大小了。相反，自動佈局會根據你設置的約束獲得這兩個參數。

 

你能夠在button的Size inspector中看到這個經典轉移，如今有了很大的不一樣：

 

若是不使用自動佈局，輸入值到X，Y，Width或Height字段將會改變選中視圖的位置和大小。使用自動佈局後，你仍然能夠輸入新值到這些字段，可是若是你已經爲視圖設置了約束，那這可能形成視圖錯位。你將不得不更新約束來匹配新值。

 

舉個例子，把button的寬度改成100，畫布會變成這樣：

 

Xcode4用Horizontal Space取代Center X Alignment約束，而且button上會產生一個新約束強制它的寬度爲100 points。然而，Xcode5說，"若是你想讓button寬度變爲100 points，對我來講無所謂，可是你要知道約束並非這麼說的。"

 

在這種狀況下你但願button是100點寬。對此有一個特殊的約束類型：Fixed Width約束。首先按一下Undo，這樣button又居中了，T-bars也變藍了。選中button並選擇Editor\Pin\Width。這會在button下面放置一個新T-bar：

 

選中那個T-bar並在Attributes inspector中改變Constant爲100.無論button的title多大或多小，這都會強制button的寬老是100點。爲了能更好的看清你能夠給button設置一個背景色：

 

 

你也能夠在左邊的Document Outline中看到這個新的Width約束：

 

與其餘約束不一樣，在button和它的父視圖之間，Width約束只會應用到button自己。你能夠將這個認爲是一個button自己和自己之間的約束。

 

你可能懷疑爲何button以前沒有Width約束。自動佈局是爲什麼知道button有多寬？

 

事情是這樣的：button本身是知道本身有多寬。它根據本身的title text加上一些padding就好了。若是你爲button設置一個背景圖片，它也會考慮進去。

 

這正是咱們熟悉的intrinsic content size。並非全部的控制器都有這個，但大部分是（UILabel是一個例子）。若是一個視圖能夠計算本身理想的大小，那麼你就不須要爲它特別指定Width或Height約束了，你將會在稍後看到更多相關內容。

 

 

爲了恢復button到最佳大小，首先咱們須要移除Width約束。而後選中button，並從Editor菜單中選擇Size to Fit Content。這樣就可以恢復button的固有的內容尺寸了。

 

孤掌難鳴

嚮導線不但出如今一個視圖和它的父視圖之間，並且也會出如今相同層級的視圖之間。拖拽一個新的button到畫布上進行演示。若是你將這個button拖近其餘對象，這時他們的嚮導線將會開始相互影響。

 

將新button放到以前一個button的後面無缺入位：

 

這還有一些嚮導虛線。Interface Builder識別出這兩個button能夠經過不一樣方式對齊—頂部，中心以及基線。

 

Xcode4會將這些顯著的嚮導線轉變成新的約束。可是在Xcode5中，若是你想讓這兩個button間有約束，你須要本身建立。以前你已經使用過Editor\Pin菜單來建立這兩個視圖間的約束，可是還有一個更簡單的方式。

 

選中新的button並按住Ctrl拖拽到另外一個button上，像這樣：

放開鼠標按鍵，出現一個彈出框。選擇第一個選項，Horizontal Spacing。

這將會建立一個新的約束：

 

 

它是橙色的，這意味着這個button至少還須要另外一個約束。button的大小是知道的（使用intrinsic content size），而且還有一個button在X軸上的約束。只剩下Y軸沒有約束了。

 

這種缺失約束的狀況是很容易肯定的，可是更復雜的設計可能就沒這麼明顯了。幸運的是，你再也不須要敏思苦想，Xcode已經記錄並能夠確切的告訴你缺乏了什麼。

 

在Document Outline中會有一個紅色的小箭頭，就在View Controller Scene後面。點擊這個箭頭便會看到全部Auto Layout問題：

 

咱們將Y軸方向缺失的約束加進去。按住Ctrl並向下拖拽新的button：

此次彈出菜單有不一樣的選項了。此次菜單的選項是基於上下文環境的—你在哪些視圖間拖拽以及鼠標移動的方向。選擇Bottom Space to Bottom Layout。

 

如今新button有一個位於屏幕底部的Vertical Space，也有一個跟其餘button相關聯的Horizontal Space。雖然空間很是小（只有8 points），T-bar可能不大容易看到，但它就在那裏。

 

點擊Document Outline裏面的Horizontal Space(8):

 

當你選中一個約束，它會高亮本身所屬的控制器。這個特別的約束位於兩個button之間。這個約束表達了：「無論第一個button在哪兒或多大，第二個button老是出如今第一個button的左邊」。

 

選中黃色背景的button並輸入較長的label，好比：「A longer label」。輸入完成後，button會爲新的text改變大小，而且另外一個button會移開。

 

最終，它依附在第一個button的左邊緣，這正是咱們所指望的：

 

爲了更好的摸索這是如何工做的，多練一些吧。拖拽另外一個button到畫布上並放到黃色button的上方，他們會垂直方向對齊到位（不要試着讓兩個button的左邊緣對齊）：

 

爲新button設置一個綠色背景色，這樣就能夠更容易看出它的範圍。

 

由於你將兩個button對齊在一塊兒，如今他們之間存在HIG推薦的8 points間隔。按住Ctrl在兩個button之間拖拽將這變爲一個約束。從彈出菜單中選中Vertical Spacing。

 

Note：「HIG」是「iOS Human Interface Guidelines」的簡稱，包含Apple推薦的良好的用戶界面設計。任何iOS開發者都有必要讀一讀這個規範。HIG解釋了哪些UI元素適合在什麼狀況下使用，以及最佳使用方式。你能夠在這裏找到。（https://developer.apple.com/library/ios/DOCUMENTATION/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html）

 

然而你並無被限制在controls間的標準間隔。約束是成熟的對象，就像視圖同樣，所以你能夠改變它們的屬性。

 

選中兩個button之間的Vertical Space約束。你能夠在畫布上點擊T-bar，雖然這有點麻煩。目前最簡單的辦法就是在Document Outline裏面選擇約束。一旦你選中約束，再切換到Attributes inspector：

 

在Constant字段裏輸入40改變約束大小。如今兩個button更進一步的分開了，可是他們任然是鏈接在一塊兒的：

 

運行程序並翻轉到landscape模式查看效果：

 

button必然會保持他們垂直方向的排列，可是水平方向就不了！緣由很明顯：綠色button尚未X軸方向的約束。

 

爲綠色button增長一個到屏幕左邊緣的Horizontal Space並不能解決問題。這樣的約束只會讓綠色按鈕老是保持在同一個X軸座標，即使是在橫屏模式下。這看起來感受不大對，因此你須要表述這樣一個目的：

「黃色button會一直水平居中，藍色button左邊緣會一直跟黃色button左邊緣對齊。」

 

你已經爲第一種狀況建立了一個約束，可是第二個並無。Interface Builder爲對齊顯示了嚮導線，這樣你就能夠將上面button一直拖拽到跟黃色左邊緣對齊的位置：

 

若是你也在垂直方向上拖拽button，這時button框架和Vertical Space約束之間就不能達到正確的距離了。你在T-bar上將會看到橙色的badge：

若是發生這樣的狀況，簡單的使用方向鍵將button微調到位，直到badge消失。

 

最終，按住Ctrl在兩個button間拖拽，從彈出菜單中選擇Left。這會建立一個約束：「兩個視圖的左邊緣一直對齊」。換句話說，這兩個button一直會有相同的X軸座標。這時T-bars變成藍色了：

 

運行程序並旋轉到橫屏模式：

 

何去何從？

如今你已經對自動佈局進行了第一次嘗試，感受怎麼樣？這可能須要一些時間習慣，可是它能讓你的工做更加簡單，也會讓你的app更加靈活。

 

想要學習更多的內容？繼續閱讀第二部分吧，你將會繼續在Interface Builder中使用button進一步理解Auto Layout提供的多種可能性，以及你可能遇到的問題。

 

最重要的是，你將會使用Auto Layout在一個真實的程序中建立一個逼真的佈局。

 

 

（翻譯）開始iOS 7中自動佈局教程(二)

0

來源：cnblog    閱讀：189   時間：2014-09-20

 

原文地址：Beginning Auto Layout Tutorial in iOS 7: Part 2

正文以下：

 

在開始iOS 7中自動佈局教程(一) 你已經看到舊的「struts-and-springs」模型讓user interfaces不能較容易的解決全部的佈局問題。自動佈局是一個解決方案，可是也是由於它的強大，因此在使用它的時候，咱們須要一點小技巧。

值得高興的是，Xcode5讓自動佈局更容易了。若是你在Xcode4中嘗試過自動佈局而且放棄了，那如今咱們但願你能再給它一個機會。咱們將在Xcode5中使用它。

在第二部分和最後一部分自動佈局的系列教程中，你將要繼續學習全部關於約束的知識以及如何應用它們。

 

千里之行始於足下

這個自動佈局的教程將從下面這個很是簡單的app開始：

app中有兩個設置了背景色的按鈕，你能夠更清楚的看到它們的邊界。它們之間有一些約束。若是你學習的上一部分，你能夠繼續使用你以前的app，只要你移除界面上的其它兩個按鈕。

若是你打算從新開始，請使用Single View Application模板建立一個新的iPhone應用。拖兩個按鈕到場景中而且給它們設置背景顏色。使用Editor\Pin菜單在兩個按鈕之間建立一個Vertical Spacing約束，而後靠下的按鈕建立一個Bottom Space to Superview約束（大小爲20點）。使用Editor\Align菜單給黃色按鈕建立一個橫向居中的約束，而後兩個按鈕align the left edges（對齊左邊緣）。

在Interface Builder中執行，一切看起來都很棒。可是讓咱們看看它們是怎麼工做的。在ViewController.m中加入下面的方法：

- (IBAction)buttonTapped:(UIButton *)sender
{
    if ([[sender titleForState:UIControlStateNormal] isEqualToString:@"X"]) {
        [sender setTitle:@"A very long title for this button" 
                forState:UIControlStateNormal];
   } else {
        [sender setTitle:@"X" forState:UIControlStateNormal];
   }
}

給長標題和短標題按鈕都設置單擊觸發事件。在Interface Builder中將按鈕都鏈接到action方法上。按住ctrl拖拽每一個按鈕到view controller而且在彈出窗中選擇buttonTapped。

運行這個app而且單擊按鈕，看看它是怎麼變化的。能夠在橫屏和豎屏都進行測試。

無論按鈕是長標題仍是短標題，佈局老是被安全的約束着：

• 靠下的按鈕老是在視圖中橫向居中
• 靠下的按鈕老是距離視圖底部20點
• 靠上的按鈕老是和靠下的按鈕左對齊，而且它們之間的距離老是40點。

上面三點就是你的user interface中所顯示的所有說明

讓咱們來試試，移除左對齊約束（在outline窗口中選擇而且按下Delete鍵），而後選中在Interface Builder裏的全部按鈕，在對齊菜單中選擇對齊右邊緣。如今再次運行你的app觀察與以前的區別。

咱們再來一次，此次選擇Align\Horizontal Centers。它將使兩個按鈕老是居中對齊。運行app，點擊按鈕，看看它們是怎麼運行的。（記住，若是你改變約束時看到了橘黃色的虛線矩形，你可使用 Editor\Resolve Auto Layout Issuesmenu來更新按鈕的大小和位置。）

處理寬度

Pin菜單有一個選項是Widths Equally。若是你在兩個view中設置了這個約束，自動佈局將老是讓全部view的寬度等同於最大的那個view的寬度，讓咱們來試試。

選中全部按鈕，而且選擇Editor\Pin\Widths Equally。這就給全部按鈕都加上了一個新約束：

在這以前，你能夠先看看教程第一部分的關於約束類型的內容。它看起來就像一個T字架，但在中間有一個寫着「=」號的圓。

固然，也許是兩個T字架，在Outline文檔中顯示了一個單獨的Equal Widths約束：

改變按鈕上的label文本，兩個按鈕的尺寸都會同時改變。將下面的按鈕的label文本改成「X」。這時候，你會發現上面的按鈕，不能再匹配它的文本了：

那自動佈局是怎麼知道使用哪一個按鈕的寬度呢？若是你留心一點，你可能注意到上面的按鈕的尺寸再也不正確了：

顯然這不是你想要的效果，選擇上面的按鈕並選擇Size to Fit Content從Editor菜單中（或使用快捷鍵 ⌘ =）。如今，文本再次匹配按鈕了，而且由於Equal Widths約束的緣由，黃色按鈕也改變了尺寸。

運行app而且單擊按鈕，這個按鈕如今老是同樣寬了，無論哪個label更大：

固然，若是label都很是短，按鈕都會等寬收縮。除非有其餘約束阻止了，不然按鈕尺寸將會精確的匹配它們的標題，很少，很多。咱們怎麼稱呼這種狀況？對的，就是固有內容大小。

固有內容大小

在有自動佈局以前，你老是須要告訴按鈕和其餘的控件它們應該有多大，而後設置它們的frame或bounds，再或者在Interface Builder裏恢復它們的尺寸。可是如今狀況改變了。大多數控件徹底能夠根據內容來決定它們到底須要多寬。標籤能夠知道本身有多寬多高，由於它知道文本的長度和文字的大小。按鈕也同樣，能夠根據文本，背景圖和內邊距等來決定大小。一樣的，這對於segmented controls, progress bars和其餘大多數的控件也都是有效的，不過可能其中有一些控件只能預判高度而不能知道它的寬度。這種特性被叫作固有內容大小，它對於自動佈局是一個很重要的概念。你已經見過button的action了。自動佈局會詢問你的控件須要多大，而且會依據那些信息在屏幕上把控件畫出來。一般狀況下，你都會使用固有內容大小，但也有一些特殊狀況你不想用它。那你就能夠給控件設置一個準確的Width和Height約束來阻止固有尺寸大小的使用。設想一下，你在UIImageView上設置了一張圖片，若是圖片的大小超出了屏幕，會發生什麼？你能夠給這個image view一個固定的寬高和縮放比例，除非你想重定義圖片的尺寸。

 若是你給按鈕一個固定寬度的約束會發生什麼？按鈕會計算本身的尺寸，可是若是你給了一個固定的尺寸，它就不會再計算。選擇靠上的按鈕而且選擇Pin\Widthfrom菜單。給按鈕添加一個固定寬度（在按鈕下方出現一個完整的T字架）：

由於這種類型的約束只會對按鈕自己有效，對它的父視圖無效，因此在Outline文檔中，它將會列在按鈕對象下面，你能夠固定這個按鈕的寬度爲46點。

你不能簡單的拉伸按鈕來調整大小。若是你這麼作了，你最後只會獲得一個橘黃色的虛線框。必定要記住，在Xcode5中不會自動更新約束（不像Xcode4）。所以，若是你改變了按鈕的尺寸和位置，他會提示你須要讓約束再次匹配。這是僅簡單的改變約束的一種替代方法。

選擇Width約束並進入Attributes inspector選項卡。把按鈕的寬度約束改成80點：

運行app並點擊按鈕，發生了什麼？按鈕的文本改變了，可是它被刪除了一部分，這是由於在按鈕中沒有足夠的空間：

由於靠上的按鈕有一個fixed-width約束，而且全部的按鈕都要求同樣的尺寸，全部它們就永遠不會收縮或者擴展。

注意：你可能在設計中不想給按鈕設置Width約束，那最好的辦法就是讓按鈕使用固有尺寸，可是若是你遇到你想在app運行時改變控件的尺寸，可是卻不能的狀況。你就應該仔細檢查一下是否是有fixed Width尺寸約束在做祟。

Play around with this stuff for a bit to get the hang of pinning and aligning views. Get a feel for it, （這句翻譯不了，自行解決~）不是一切都能馬上就顯而易見的，你只要記住必須有足夠的約束自動佈局才能預計算全部視圖的位置和尺寸。

畫廊例子

你如今可能會想約束究竟是什麼，你要怎麼樣才能經過創建不一樣視圖之間的關係，從而構建起本身的佈局。在下面一節中，你將看到怎麼使用自動佈局和約束來建立一個符合真實世界場景的佈局。

讓咱們僞裝你想作一個瀏覽你圖片的程序。它在橫屏和豎屏中看起來就像下面這樣：

屏幕被分紅了4塊，每一塊都有一個image view和label。咱們要怎麼樣才能達到這種效果呢？

讓咱們開始創做這個app吧。首先用Single View Application模板建立一個新的iphone項目，名字叫「Gallery」。

打開Main.storyboard。從Object Library中拖拽View到視圖上。把尺寸設置爲160點和284點，而且把它的背景色變爲白色之外的其餘顏色（例如:綠色）：

注意：拖拽UIView到故事板上有兩個緣由：a)你要使用它來包含其餘的控件視圖，這些控件能夠幫助你組織起場景的內容；b）它也做爲一個自定義view或控制器的佔位符，你能夠設置它的Class屬性，將它變爲你自定義的UIView/UIControl的類（即繼承UIView/UICtontrol的類）。

讓咱們給這些view一點約束。你已經看過加約束的兩種方式：用Editor\Pin和Align菜單，還有按住ctrl在兩個view之間拖拽。這裏告訴你第三種添加約束的方法。在Interface Builder窗口的底部有一行這樣的按鈕： 

橢圓包圍的四個按鈕就是用於自動佈局的。從左到右分別是：對其（Align），固定（Pin），解決自動佈局問題（Resolve Auto Layout Issues）和重定義尺寸（Resizing Behavior）。前三個按鈕魚Editor菜單中的對應項有一致的功能。Resizing Behavior按鈕容許你在從新設置view的尺寸的時候，改變已經添加的約束。

選擇綠色的view而且點擊Pin按鈕。會彈出一系列你能夠添加的約束：

 

頂部的Spacing to nearest neighbor是最常常用到的。點擊者4個T字架，它們就會變成實體的紅色：

這樣就會給綠色的view和它的父視圖的四邊建立四個新約束。實際上的間距值因人而異，這要看你view的位置。（你不須要改變這些值來匹配個人圖）。點擊 Click Add 4 Constraints完成約束的添加

如今你的故事板看起來應該這樣：

視圖須要這4個約束來保證它的位置。UIView不像button或者label，它沒有固有內容大小。你必須有足夠的約束來保證每一個view的位置和尺寸，view老是須要約束來告訴它，它須要多大。

你可能會奇怪，尺寸的約束在哪？在這個案例中，view的尺寸約束是隱含在父視圖的尺寸中。佈局中有兩個Horizontal Spaces約束和兩個Vertical Spaces約束，這樣就能保證固定的長度。你在Outline文檔中能夠看到他們：

綠色view的寬是由這個公式計算出來的：「父視圖的寬-（98+62）」，它的高是：「父視圖的高-（65+199）」。這樣，間距就被固定了，你的view除了從新定義尺寸以外別無他法。（你的值可能會有所不一樣，它依據於你的view放的位置）。

當你旋轉這個app的時候，父視圖的規格就會從320X568變爲568X320。公式就會從新計算寬和高，這時候你會獲得新的綠色view的尺寸（408X56）。

你能夠旋轉你本身的試試，你也能夠在Interface Builder直觀的模擬它們。打開Assistant editor（按Xcode工具欄中看起來像 外星人/男管家 的那個按鈕）而且在彈出的菜單中選擇Preview:

單擊底部的箭頭按鈕能夠改變界面的方向。這樣就能馬上給你一個橫屏的故事板佈局預覽。綠色view會重定義尺寸以知足橫向間距和縱向間距的約束。

你能夠留下這個預覽窗口，當你設計UI時，它會自動改變。你也能夠在3.5吋和4吋屏之間切換。

注意：你可能會奇怪爲何頂部的約束沒有頂到屏幕的最上面：

而是停在了狀態欄處。這是由於在ios7中，狀態欄老是繪製在view控制器的頂部 - 而再也不是一個單獨的bar。這樣作有什麼用？當你建立約束時，它沒法確切的依附在屏幕頂部，可是頂部會有一個看不見的行，它叫作 Top Layout Guide。

在一個正常的view控制器中，這個guide距頂部有20點，至少在狀態欄不隱藏的時候是這樣的。在導航控制器中，它位於導航欄下面。由於導航欄在視圖中有不同的高度， Top Layout Guide會在設備旋轉時隨着導航欄移動。這樣就很容易的獲得view和導航欄的相對位置。一樣的，底部也有Bottom Layout Guide，用來放置標籤欄和工具欄。

有時候，可能你不想在設備旋轉時重設你的UIView的尺寸，所以你能夠給這個view一個固定的寬高約束。如今，讓咱們來試試。選擇綠色的view並點擊Pin按鈕；在彈出窗口中給width和height打上勾。

點擊Add 2 Constraints來完成約束的添加。如今你給視圖添加了兩個新約束，一個是寬度160點的約束，一個是高度284點的約束：

由於寬和高僅應用在當前視圖，因此它們在Outline文檔中位於本身的view下面。通常來講，約束都表達了兩個不一樣view之間的某種關係 - 例如：橫向間距和縱向間距（Horizontal and Vertical Space）約束就是綠色視圖與它父視圖的關係 - 你也能夠認爲寬度和高度約束是綠色視圖和它本身的約束。

運行app，噢，看起來多棒啊。如今把你的屏幕橫置，哎喲！沒有像你想的那樣 - 視圖的尺寸再次該變 - 而是報錯了，Xcode給出了一堆錯誤的信息：

Gallery[39367:a0b] Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: 　　　　 (1) look at each constraint and try to figure out which you don't expect; (2) find the code that 　　　　 added the unwanted constraint or constraints and fix it. (Note: If you're seeing 　　　　 NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for 　　　　 the UIView property translatesAutoresizingMaskIntoConstraints) ( "<NSLayoutConstraint:0xc1a1e80 V:[UIView:0xc1a2b10(284)]>", "<NSLayoutConstraint:0xc1a36c0 V:[_UILayoutGuide:0xc1a2d20]-(65)-[UIView:0xc1a2b10]>", "<NSLayoutConstraint:0xc1a36f0 V:[UIView:0xc1a2b10]-(199)-[_UILayoutGuide:0xc1a3230]>", "<_UILayoutSupportConstraint:0xc15dbd0 V:[_UILayoutGuide:0xc1a2d20(20)]>", "<_UILayoutSupportConstraint:0xc1a1510 V:|-(0)-[_UILayoutGuide:0xc1a2d20] (Names: '|':UIView:0xc1a2930 )>", "<_UILayoutSupportConstraint:0xc1a3720 V:[_UILayoutGuide:0xc1a3230(0)]>", "<_UILayoutSupportConstraint:0xc1a30e0 _UILayoutGuide:0xc1a3230.bottom == UIView:0xc1a2930.bottom>", "<NSAutoresizingMaskLayoutConstraint:0x8c6c6a0 h=--& v=--& H:[UIView:0xc1a2930(320)]>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0xc1a1e80 V:[UIView:0xc1a2b10(284)]> Break on objc_exception_throw to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful. . . .

你還記得我說過「必須有足夠的約束，自動佈局才能計算全部視圖的位置和尺寸」麼？好吧，在這個例子中，約束又太多了。當你看到「不能同時知足全部約束（Unable to simultaneously satisfy constraints）」的錯誤的時候，那就意味着你的約束之間有衝突。

讓咱們再看一下哪些約束：

綠色視圖上設置了6個約束，4個間距約束（1-4）和你剛剛設置的寬高約束（5和6）。衝突在哪呢？

在豎屏的時候不該該有問題，由於在數學上是知足的。父視圖的寬是320點。若是你添加了Horizontal Space和Width約束，你應該保證它們的總長度小於等於320點。這是我計算視圖位置的方式：98+160+62 = 320。一樣的，全部豎向約束相加之後就應該是568點。

可是當你旋轉設備爲橫屏時，窗口（指的父視圖）就變成了568點寬。這意味着98+160+62+？ = 568。這裏額外多了248點，沒法知足方程式，因此自動佈局不知道從哪裏來獲得這248點。一樣的，對於豎向約束也是同樣。

解決衝突的辦法有兩個：第一是保持view的寬度固定，但外邊距必須可變。第二是保持外邊距固定，但寬度必須可變。你不能同時固定它們。你要去掉這些約束中的其中一個。在上面的例子中，若你想要在橫屏豎屏中都擁有一樣的寬，那Horizontal Space就必須去掉。

移除右邊的橫向間距和下邊豎向間距。故事板上會顯示成這樣：

好了，如今view就有一個正確約束來預判它的尺寸與位置了 - 很少，很多。運行app來查證一下錯誤信息是否已經沒有了，而後這個view在旋轉之後是否能保持寬度。

注意：儘管Interface Builder能夠很好的警告你有無效的約束，但它不是神。它只會警告你：噢，你的約束不夠。可是若是你約束太多了，它就沒法檢測出來了。不過至少在出錯的時候，自動佈局仍是會給出一個詳細的錯誤信息。若是你想要學習更多關於如何分析錯誤信息和診斷佈局問題，那你能夠看 iOS 6 by Tutorials中的「Intermediate Auto Layout」。

豎屏繪製

拖拽一個label到綠色的view上。注意看，如今參考線出如今了綠色view的內部，由於它是label的父視圖。

調整label的位置到參考線的下邊距，橫向居中的地方。給label下面添加與綠色view之間的間距約束，有20點的距離。快速的方式是使用Pin按鈕，僅選擇下面的T字架：

如今給label添加橫向居中的約束。你已經試過Editor\Align菜單了，但你也可使用自動佈局菜單的Align按鈕。選擇label並點擊Align按鈕，獲得一個彈出窗：

在Horizontal Center前打上勾而後點擊Add 1 Constraint。這時候，故事板應該是這個樣子的：

注意這兩個新的橫向和縱向間距約束是位於綠色view本身的約束列表裏，而不是在主視圖裏。

拖拽一個新的Image View對象到故事板上，讓你的佈局看起來像這樣：:

這個圖片視圖固定了上，左，右邊緣在父視圖上，但下部以標準的8點間距鏈接在了label的頂部。若是你不肯定要怎麼作，那就跟着下面的步驟走：

1. 拖拽image view到綠色視圖中，如今不用擔憂它的尺寸和位置：

2. 選中image view，按Pin按鈕選擇下面的選項：

上，左，右的T字架設置爲20點，可是下面的設置爲8點。重點：對於Update Frames，你應該選擇Items of New Constraints。若是你左邊距已經默認知足要求，故事板看起來就是這樣的：

上面這個約束是你選擇了一個不同的frame。若是你選擇了Items of New Constraints, Interface Builder將自動的調整畫面來添加約束，一切看起來都很棒：

固然，若是你選錯了frame，你也可使用Resolve Auto Layout Issues button來修復它：

下載這個教程資源並解壓這個文件。你就會找到一個圖片文件夾 - 添加這個文件夾到你的項目。設置Ray.png做爲這個image view的圖片，改變image view的模式爲Aspect Fit而且設置它的背景色爲白色。把label的文本改成「Ray」。

你的佈局應該是這樣的：

你可能注意到綠色view內部的約束忽然變成了橘黃色。這發生在你給image view設置圖片的時候。你的佈局爲何忽然無效了？幸運的是你能夠帶着你的猜測來讓Xcode告訴你爲何錯處了。

點擊這個這個紅色的靶子，它位於View控制器的Outline文檔中：

你會看到一個Content Priority Ambiguity（內容優先級歧義）的錯誤。這意味着：若是image view和label都沒有固定的高度，那自動佈局系統就不知道應該怎麼分配大小。（Interface Builder彷佛會忽略已經設置過的固定高度約束）

讓咱們把綠色的view的高度變爲100點試試。自動佈局是怎麼將這100點分配給view內部的label和image view的？是label保持尺寸而image view變成100點高了麼？仍是label變高了而image view保持尺寸？仍是他們各自被分配了50點，又或者劃分紅25/75，40/60，又或者其它的什麼結合？

若是你不解決這個問題，那麼自動佈局系統就會去猜想，就可能致使結果莫名其妙。

恰當的解決辦法是改變label的「Content Compression Resistance Priority」。你將從隨後內容中學習到更多。如今，打開label的Size inspector，設置Content Compression Resistance Priority的vertical爲751。這樣就使它的優先級高於image view。而後繼續設置Content Hugging Priority爲252。

這時候T字架就會再次變成藍色，自動佈局系統的警告也會消失。

添加到另外一個頂端

拖拽綠色的view到主視圖的左上角。回憶一下以前作過的，綠色的view已經有Horizontal Space和Vertical Space約束來控制它在父視圖中的位置了。如今，這些約束依然存在，它們致使了視圖的frame沒法對齊參考線。

爲了修正它，使用Resolve Auto Layout Issues按鈕並選擇Update Constraints。以前你使用的Update Frames，用來移動和重定義view的尺寸來匹配你的約束。如今這恰好是一個相反的操做：你會用你的約束來匹配view的frame。

你可能注意到在頂部的Vertical Space如今是負的。這種狀況是由於約束連接到了Top Layout Guide（頂部參考線）。不要問爲何，沒有規定說約束值不能是負的，你能夠就像這樣留下它。（若是你看着礙眼，那就刪掉 「Vertical Space (-20)」約束，而後把view從新綁定到窗口的頂部）

Horizontal Space如今爲0，表現爲一條緊貼窗口左邊緣的粗藍線。儘管view已經位於角落裏了，可是它任然須要約束來固定住它：

選擇綠色的視圖按下⌘D來複制它。移動複製的視圖到右上角：

注意T字架如今是橘黃色的。當你複製它的時候，它已經上丟失了X,Y座標的約束。爲了修正它，固定view到窗口的右、上邊緣。

再複製兩次，分別把複製的視圖放在坐下角落和右下角落。而後再把他們固定在他們該在地方。

改變後的場景以下：

 

哈哈~他們看起來好像都是程序員 :-)

運行app，在豎屏上很棒，可是橫屏上可能不是那麼好：

原本應該很棒的戰士卻變糟了：你給4個色彩鮮豔的容器view設定了固定的寬和高，所以它們就老是保證這樣的尺寸，而無論它們的父視圖的尺寸如何。

從這4個view下，選擇Width (160)和Height (284)的約束並刪除它們（在Outline文檔中很容易完成）。若是你如今運行app，你會看到：

注意：若是你很奇怪爲何有的view變得比其餘的大了，那我告訴你，這是固有內容尺寸的緣由。圖片的尺寸決定了image view有多大。文本的尺寸決定了label有多大。再加上四邊的20點外邊距，全部的尺寸加起來決定了每一個視圖的尺寸。

這看起來很像你的上一部分解決的問題，所以你要向前思考，你可能回憶起來了，你要讓每一個view的寬和高都相等。

選擇這4個view。Outline大綱裏很容易完成；按住⌘點擊這4個view。你就能夠添加這個約束。在彈出窗中，給Equal Widths和Equal Heights打上勾，而後點擊Add 6 Constraints。

再次運行這個app而且旋轉設備。噢...仍是不咋地：

全部的view都有一樣的高，而且他們也有一樣的寬，你的約束是對的。但這個寬和高可能不是你想要的。

光告訴自動佈局系統必須有一樣的尺寸是不夠的。由於自動佈局系統不知道這4個view是互相鏈接的。它們的邊貼邊的設計，但在它們之間沒有這樣的約束。自動佈局就不知道它須要在「Ray」個「Matthijs」之間劃分窗口。

若是自動佈局系統本身不能完成，那你就要告訴它。

 

選擇Ray和Matthijs的視圖，從編輯菜單選擇Pin\Horizontal Spacing。由於view之間是邊貼邊的，那在它們之間就要加上尺寸爲0的Horizontal Space約束。好了，如今有足夠的約束讓自動佈局系統瞭解兩個view之間的關係了。再給Ray和Dennis Ritchie視圖之間使用Editor\Pin\Vertical Spacing。

再運行app，如今看起來就像這樣：

注意：Interface Builder任然會抱怨view的位置不對。我不確信爲何會發生這種狀況，多是Xcode有bug吧。若是這些警告信息讓你不爽，那就選擇主視圖（或view控制器）而且從Resolve Auto Layout Issues菜單選擇Update All Frames in View Controller。不過你的app運行時這種改變不會起做用，但至少讓Xcode看起來很舒心。

image view上有一點要注意：它們可能會延伸了，由於你沒有給它們一個固定尺寸。你可能不知道，這是有意這樣作的。image view不能適配橫屏的模式。若是你想保持image view的原始寬高比，那很不幸。在Interface Builder中你是沒法獲得下面這樣的效果的：

 

 

 

 

Demo代碼：

不幸的是，Interface Builder不能正確的提供用約束保持view的原樣寬高比。若是要這麼作，你就須要本身編程。你能夠在iOS 6 by Tutorials的「Intermediate Auto Layout」中學習如何操做。

我該去哪繼續學習？

若是你全都看完作完了，祝賀你 - 你如今知道自動佈局是什麼了，而且有了必定的實踐基礎！但你任然有許多須要學習...

這個教程的第一部分你能夠從iOS 6 by Tutorials一書中的自動佈局章節閱讀到。第二部分會教你如何使用自動佈局來建立更多「真實世界」的場景佈局，你能夠從Interface Builder學習一切你想知道的自動佈局的知識。

可是就像其餘的視覺設計工具同樣，Interface Builder也有本身的侷限性。有時，它只能經過NSLayoutConstraint對象來從代碼實現。IOS 6的教程有一個章節包含了這個主題全部的內容，Intermediate Auto Layout。所以，若是你想知道自動佈局的後半部分，請買這本書吧!（翻譯到最後，發現竟然帶廣告，爲了尊重原做者，仍是給出鏈接吧~~~）