iOS7 自動布局 入門–Auto Layout

標籤：

目前為止，即使你的介面設計是在合理的複雜度內，你也必須要為之寫許多代碼來適應變化的布局。現在我相信你會很高興聽到這種情況將不會發生了-對於iPhone與iPad IOS6 帶來了一個非常了不起的特徵：自動布局。

 

自動布局不僅能給你的應用帶來各種螢幕尺寸設計的支援，做為額外的驚喜，它還能使設計中的各種小事比如多語言環境支援。你從此不必再為你想要支援的各種語言重新設計nibs和storyboards檔案，當然這也包括一些從右至左書寫的語言比如說希伯來文和阿拉伯語。

這篇教程將向你展示的是如何開始使用Iterface Builder來做自動布局。在iOS 6 by Tutorials裡，我們把這篇教程內容寫得更深，並且基於這個知識會有一個全新的章節，在這裡面你會看到如果通過代碼來釋放自動布局的全部功能。

好吧，現在開始拿著你喜歡的零食以及飲料，準備開始做一名自動布局的大師吧！

springs and struts 的問題

毫無疑問你可能對autosizing masks比較熟悉–這個也就是 “springs and struts” 模式。autosizing mask決定了一個view會發生什麼當它的superview 改變大小的時候。它是否有靈活並且自動修複頁邊處理能力（the struts），它的寬和高同時也會發生什麼變化呢（the springs）？

舉個例子，當一個view的superview的寬度變寬時，它的寬度也會靈活地跟著變寬，並且它的右邊界也會自動修複般的一直緊挨著superview的右邊界。

autosizing 系統處理這種簡單的情況還是不錯的，但是當情況稍微複雜一點的時候，它就會很快搞砸你的布局。現在讓我們看一個springs and struts模式所不能處理的一個簡單例子吧。

開啟Xcode建立一個基於Single View Application template新項目，把之命名為”StrutsProblem”，選擇iPhone程式並且禁用Storyboards：

在 Interface Builder 裡點擊開啟ViewController.xib。在你做任何其他事情之前，請先在nib裡把Auto Layout禁用掉。你可以在File inspector裡找到這個選項：

取消選擇“Use Autolayout”複選框. 那麼現在你的nib使用的是舊版本的 struts-and-springs 模式。

提示: 任何你通過Xcode4.5或者更高版本建立的新nib或者storyboard檔案會預設使用Auto Layout。因為Auto Layout這個特性只有在IOS 6中有，所以如果你想要使用 Xcode4.5來做一些相容IOS5的應用，你必須要在新的nib或者storyboard檔案中通過取消選擇“Use Autolayout”複選框來禁用Auto Layout。

拖拉三個新的view到main view中，：

為了使看起來更清晰，我們把每個view都填注顏色。

現在每個View都離表單邊界 20 points遠；各個填充顏色的view之間的距離也是20 points。底部的view是280 points寬，並且頂部兩個view都設定成130 points寬。所有的view都設定成200 points 高。

運行程式並且把模擬器或者你的裝置旋轉至景觀方向。你的裝置會如所以，和我們理想的差距甚遠：

提示：你能夠通過使用 HardwareRotate Left and Rotate Right的菜單選項來旋轉模擬器， 或者通過按住Cmd然後使用向左或者向右方向鍵來旋轉。

而我想要的是讓程式運行後是這個樣子的在景觀方向下:

很明顯, autosizing masks 對於要達到這三個view的理想變化還需要做點其他的。 從左上方的View來開始設定autosizing ：

這一步使View能緊挨著頂部和左邊緣（而不是底部與右邊緣），並且在水平和垂直方向上都能夠支援伸縮當superview改變其大小時。

類似地, 改變 右上方autosizing 設定:

這是底部view的設定:

運行程式並且轉動裝置至景觀方向。現在應該看上去是這樣：

和理想的很接近了，但是還有點瑕疵。三個view之間的距離是不正確的。另外仔細看，這三個view的尺寸也不是100%正確. 造成這個原因是autosizing masks雖然知道要改變view的尺寸當superview改變時，但是它不知道具體該改變多少尺寸。

你可以玩一下 autosizing masks-比如說，改變可以改變的寬和高的值（“springs”）- 但是你幾乎不可能精確設定到20-points的距離在三個view之間。

為瞭解決使用 the springs and struts 方式改變布局所造成的問題，很不幸的，你必須要寫一些代碼來做。

UIKit 會發送一些訊息到你的view controllers當使用者介面在開始旋轉前，在旋轉過程中以及旋轉後。你可以通過監聽這些訊息來改變你使用者介面的布局。通常你會重寫willAnimateRotationToInterfaceOrientation:duration: 來改變任何需要重新規劃的view的frame。

但在你開始做這之前, 你首先需要聲明views裡面的outlet 屬性。

Xcode切換到 the Assistant Editor 模式(在Xcode工具列的右上方的編輯器工具包的中間一個按鈕)然後把每個view拖拉至view controller：

逐個把這些view與屬性串連起來:

@property (weak, nonatomic) IBOutlet UIView *topLeftView;@property (weak, nonatomic) IBOutlet UIView *topRightView;@property (weak, nonatomic) IBOutlet UIView *bottomView;

Add the following code to ViewController.m:

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration{ [super willAnimateRotationToInterfaceOrientation:toInterfaceOrientation duration:duration]; if (toInterfaceOrientation == UIInterfaceOrientationLandscapeLeft || toInterfaceOrientation == UIInterfaceOrientationLandscapeRight) { CGRect rect = self.topLeftView.frame; rect.size.width = 210; rect.size.height = 120; self.topLeftView.frame = rect; rect = self.topRightView.frame; rect.origin.x = 250; rect.size.width = 210; rect.size.height = 120; self.topRightView.frame = rect; rect = self.bottomView.frame; rect.origin.y = 160; rect.size.width = 440; rect.size.height = 120; self.bottomView.frame = rect; } else { CGRect rect = self.topLeftView.frame; rect.size.width = 130; rect.size.height = 200; self.topLeftView.frame = rect; rect = self.topRightView.frame; rect.origin.x = 170; rect.size.width = 130; rect.size.height = 200; self.topRightView.frame = rect; rect = self.bottomView.frame; rect.origin.y = 240; rect.size.width = 280; rect.size.height = 200; self.bottomView.frame = rect; }}

當view controller旋轉至一個新的方向時會調用這個回呼函數。現在當使用者介面的方向轉動時view controller使它裡面的view尺寸縮放理想了- 這是一種建立在對iPhone螢幕尺寸瞭解上的寫入程式碼能力。因為這個回呼函數發生在一個動畫block裡，所以當改變它的尺寸會有動畫效果。

等等，現在還不能運行程式。 你必須先恢複這三個view的autosizing masks 設定如所示，否則 autosizing 機制會與你在 willAnimateRotation: 函數設定裡的view的位置、尺寸產生衝突。

現在可以運行程式了，然後將裝置翻轉至景觀方向。可以看到每個view的呈現都很理想，再次翻准螢幕至肖像方向，看上去也還不錯。

這樣做成功了，但是為了這麼個簡單的呈現你就要必須寫許多代碼了。想象一下，當你遇到真正更加複雜，特別是動態那些獨立View改變尺寸，或者有一系列的subviews沒有被固定時你在代碼上所需要作出的努力。

提示: 你還可以使用另外一種方法，那就是同時做好肖像方向以及景觀方向的nib，然後當裝置轉動時，把對應的view從nib檔案載入進來，把當前的view交換出去。但即使這樣，你還是需要做很多的工作，另外你還多了同時管理兩個nib檔案而不是一個nib檔案的麻煩。

Auto Layout 來拯救了！

現在我將要展示的是如何用Auto Layout來做到同樣的效果。首先，把willAnimateRotationToInterfaceOrientation:duration:這個方法從ViewController.m裡面刪除，因為目前我要做的Auto Layout是不需要寫任何代碼的。

回到ViewController.xib然後在File inspector控制台裡，把“Use Autolayout”的複選框勾上使Auto Layout對這個nib檔案起作用：

提示： Auto Layout 功能在整個nib或者storyboard檔案裡總是被開啟著的。在這兩種檔案裡的所有view都會使用Auto layout功能如果你把勾選上的話。

現在運行程式並且轉動螢幕，呈現的樣子還是之前的混亂樣。

現在讓我們啟動Auto Layout功能. 按住Cmd鍵同時選中頂部的兩個view (綠色的以及黃色的),。 從 Xcode的Editor 菜單, 選擇PinWidths Equally:

再次重新選中這兩個view並且做 EditorPinHorizontal Spacing操作。 (即使這兩個view看上去像被選中了當你做第一個Pin操作後。但是請注意目前他們處在一種特殊的布局關係顯示模式中，你還是必須要重新選中這兩個view。)

在左邊的文檔概要圖中, 你會注意到有一個新的section名叫 “Constraints”. 這個section 會被自動加入當你在nib檔案中啟用Auto Layout時。在這篇文檔的下一部分你會瞭解到這些Contraints是什麼以及他們是如何操作的。

現在, 我們把一個名叫  “Horizontal Space (170)” 的從Constraints列表裡面刪除：

運行程式並轉動螢幕. 現在看上去好多了 – 頂部的兩個view 有了合適的寬度和間距 – 但還不是我們想要的樣子:

按住Cmd鍵同時選中所有的三個view。 在功能表列, 做PinHeights Equally 操作。

現在還是按住Cmd鍵同時選中左上方的以及底部的view,然後做EditorPinVertical Spacing 操作。

最後,把“Vertical Space (240)” 從constraint列表裡面刪除。

如果你一下子同時選中所有的三個view，Interface Builder應該如所示：

藍色的T型狀對象定義了各個view之間的限制。這看上去有點複雜, 但是你一旦學會了，你會發現這種表達相當簡潔明了。

運行程式 … 哇, 沒有寫一行代碼每樣東西都看上去非常棒了！

酷, 但剛才你究竟做了什麼呢?Auto Layout 能使你簡單地表達清楚頁面配置中的各個view之間的關係而不會讓你為了各種view有多大以及他們該定位在哪裡硬編許多代碼 。

你剛才做了如下的關係操作 – 也就是 constraints – 在頁面配置裡:

• 左上方和右上方的view (也就是第一次的pin widths equally 操作).
• 在左上方view和右上方view之間有20-point的間距 (相應的操作是 pin horizontal spacing).
• 所有的view是相同的高度 (相應的操作是pin heights equally).
• 在頂部兩個view與底部的view之間有一個20-point的間距 (the pin vertical spacing).

以上這些就足以展示，當螢幕尺寸變化時，Auto Layout如何放置布局裡的各種view以及它是如何工作的。

提示： springs-and-struts配置模式也會帶來一些其他限制當你從它切換至“Use Autolayout”模式時。對於各個view和螢幕邊緣之間的邊距都基本會有一條限制，是這麼說的：“這個view總是和頂部/底部/左邊/右邊保持 著20-points的距離。”

你可以看到你的所有contraints在文檔概要裡。如果你在文檔概要裡點擊一個constraint，Interface Builder會在contraint在view中所體現的地方通過畫一條白色的邊框並且對之添加一個陰影使其高亮顯示：

Constraints是真實的對象 (屬於 NSLayoutConstraint類) ，他們也擁有相應的屬性。 比如說，選中頂部兩個view間距的constraint（名為“Horizontal Space (20)”）然後切換至它的Attributes inspector。 現在你可以通過修改Constant裡的值來改變兩個view之間的距離大小。

將之設定成100並且運行程式。現在兩個view之間的距離更寬了:

當你的程式需要描述各種view的布局時，Auto Layout比起springs and struts表達能力要強許多。在這份教程的餘下部分，你將會學到關於constraints的所有以及如何在Interface Builder應用之並使其能做到各種布局安排。

Auto Layout的工作原理

就像你在上面看到的測試一樣, Auto Layout 的基本工具就是constraint. 一個constraint 描述了兩個view之間的幾何關係。比如說，你可能有一個constraint是這樣的:

“Lable A的右邊界和和Lable B的左邊界以20 points的空白相串連。”

Auto Layout用所有的這些constraints來對你所有的view做一些數學計算以致view達到一個理想的位置以及尺寸。 你不再需要自己來設定view的frame-Auto Layout會幫你做這一切-完全基於你對view所設定的constraints。

在沒有Auto Layout之前,你總是通過寫入程式碼來設定view的架構, 也可能通過Interface Builder 座標裡面精確的放置他們，通過initWithFrame:來傳遞一個矩形,或者通過設定view的frame，bounds或者center 屬性。

對於剛剛你做的應用, 你特地把frames設定到所示：

你也可以對每個view做autosizing masks設定：

那應該不再是你認為的螢幕設計方式了。使用Auto Layout，你所要做的只是如所示:

現在對於view來說尺寸和位置已經不那麼重要了; 把問題都交給constraints吧。當然, 當你在canvas裡拖進一個新的按鈕或者標籤時，這個控制項會有一個特定的尺寸然後你把它放到一個特定的位置, 但這也只是一種設計目的來告訴Interface Builder在哪裡放置constraints。

設計成你想要的樣子

對你來說一個巨大的優勢來使用constraints是你不再需要擺弄座標系統來使你的各個view出現在合適的位置。你要做的只是通過對Auto Layout描述每個view之間的聯絡關係。這種設計方式我們叫做 通過目的來設計.

當你通過目的來設計時, 你在表達的是你想要達到的目標是什麼而不是如何來完成目標。在以前會是這麼個說法：“這個按鈕的左上方的座標是（20, 230）”, 現在你可以這麼表達了:

“這個按鈕在它的superview中垂直置中,把他放置在離它的superview左邊緣的一個固定位置。”

使用這個描述, Auto Layout能自動計算出你的按鈕該出現在哪裡, 無論它的superview的大小。

這裡是其他通過目的來設計的例子(Auto Layout 能夠應付所有的這些指示):

“這兩個text fields應該保持同樣大小。”
“這兩個button應該保持同時移動。”
“這四個標籤應該同時保持右邊對齊。”

這就使你的使用者介面設計顯得更加具有描述性。你只需簡單的定義constraints, 然後系統會自動幫你計算frames。

在第一部分你看到了，要想讓一個只有幾個view的頁面配置同時在iPhone的兩個方向顯示的合適所需要做到的很多工作。但如果你用Auto Layout來做的話就可以省去那一方面的力氣了。如果你對constraints設定的恰當，那麼布局會自動恰當顯示而不需要你對肖像方向和景觀方向的 view做一絲變化。

對於使用Auto Layout另外個重要的好處是國際化。 比如說德文字元， 是出了名的長，把它放進你的標籤會是一件十分頭疼的事情。 但是再一次，Auto Layout會來拯救你，因為它能夠幫你自動縮放基於內容需要表現的標籤-除此以外的每樣東西還是會根據constraints來調整。

添加對德文, 法文, 以及其他的語言的支援要做的只是簡單設定你的constraints ，translating the text，僅僅是這樣哦！

Auto Layout 最好的入門方式就是和它玩。這也就是這份教程餘下部分要講到的。

提示： Auto Layout is 不僅僅對方向旋轉有協助；它也能很簡單的拉升你的使用者介面來適應不同的螢幕尺寸。這不是一個巧合嗎！當iPhone 5的長螢幕出現時這項技術正好被加進了ISO裡 了。 Auto Layout 使得你在填滿iPhone 5的多餘垂直螢幕內容時變得非常簡單。並且天知道會不會有一個傳言中的 “iPad mini”出現… 至少你現在可以用Auto Layout 來為將來做準備了。

愛上constraints

關掉你目前的工程然後建立一個新的項目使用Single View Application模板。命名項目為“Constraints”。然後選擇為iPhone project並且不使用storyboards，但是我們需要用到ARC。

一個使用Xcode4.5建立的新項目會預設為你選擇啟動Auto Layout,所以你必要做任何特別的事情來啟用它。

點擊ViewController.xib 來開啟Interface Builder。把一個新的圓角按鈕拖進canvas。 注意當你拖拽的時候，藍色虛線會出現。這些線被認為是 guides:

這些guides會顯示在螢幕的頁邊, 也會顯示在中心：

如果你之前使用過Interface Builder，那你毫無疑問會對這些guides很熟悉。當你想要對其東西時他們會非常有協助。而當Auto Layout 啟用時，這些guides有了不同的意義。你當然還是需要他們來幫你對其東西，但同時他們也會告訴你新的constraints會體現在哪裡。

把button對著guides放到左上方。 現在的nib檔案會看上去像這樣：

看，有兩個藍色的東西附屬在按鈕上。 這些 T型狀對象就是設定在這個按鈕上的constraint。

所有的constraints 也都列在Interface Builder的左邊的文檔概要面板裡:

目前我們有兩個constraints, 在button和main view的左邊緣之間有一個Horizontal Space, 在button和main view的頂部有一個Vertical Space。這層關係被constraint表示為:

“這個按鈕會一直待在它的superview的左上方。”

現在再次選中這個按鈕並把它放到nib檔案右上方，還是對著藍色guides:

現在 Horizontal Space 的constraint值改變了。它不再依附在按鈕的左邊界而是右邊界了。

當你對著guides放置一個按鈕（或者其他什麼view）的時候，你會得到一個標準的大小，這個是被定義在“HIG”裡面，這是蘋果公司的iOS Human Interface Guidelines文檔。對於螢幕的邊緣的頁面邊界，標準的大小是20-points的空白。

甚至假設你把button放在某些沒有guide的地方，你還是會得到一個Horizontal or Vertical Space的constraint。試一下。然後把按鈕像左挪一點，得到的效果:

目前還是有一個 Horizontal Space的constraint。在文檔概要圖裡，你能看到現在沒有一個標準space了。

你的按鈕放在哪裡，你就會得到一個對應的constraint。

還有一個“center”的constraint.。把按鈕拖到canvas的底部中心處，讓他正好能卡到中心guides：

請注意這個Horizontal Space constraint現在被一個Center X Alignment constraint取代了，這也就意味著這個按鈕會一直跟著它的superview中心對其在水平軸上。依然有一個Vertical Space constraint值保持著這個按鈕待在view的最底部。（還是請使用標準頁面邊界）。

運行程式並且轉動裝置至景觀方向。看，甚至在景觀方向，這個按鈕還是呆在底部的中心位置：

對於這個按鈕，這是你想要表達的目的是: “這個按鈕應該一直待在底部的中心位置。” 請注意，現在沒有任何地方你必須要告訴Interface Builder你的按鈕的座標是什麼, 你只要把它放置的view中就行了。

有個Auto Layout，你可以不用在關心你的view在canvas裡面的精確座標位置了。所有這一切，Auto Layout會幫你從你設定的constraints裡面派生出來（或者說是Interface Builder為你設定了這一切）。

在這個範例裡你可以看出這個按鈕在Size inspector裡面的轉化，那是相當的大啊：

當Auto Layout 禁用時，在X，Y，Width或者Height裡的值會改變所選中view的位置以及尺寸。當Auto Layout 啟用時，你還是能夠在這些框裡面輸入新的值，但通常結果不會你是想要的效果。那個view 會移動，但是Interface Builder也會基於你的新值來計算出新的constraints。

比如說，把Width的值改到100，canvas裡面的按鈕會變成這個樣子：

現在 Center X Alignment constraint的值消失了, 取而代之的是一個把按鈕連在螢幕左邊緣的Horizontal Space，這個按鈕同時也會產生了一個新的constraint，它強制使按鈕的寬度固定在100 points（可以看到按鈕下方的藍色欄）。

你在文檔概要圖的左邊看到現在有了一個新的Width constraint：

不像其他的constraint，那些是在按鈕和它的superview之間，這個寬度constraint只能應用於按鈕本身。你可以認為它是一個按鈕和按鈕之間的constraint。

拖動按鈕使它再次卡在 Center X Alignment constraint 上。

小貼士: 因為通過 Size inspector來改變位置和大小可能會搞亂你的constraints，我建議盡量不要這麼做，如果你非要改動布局，請更改constraints。

你現在可能想知道為什麼按鈕之前沒有一個Width constraint。在沒有的情況下，Auto Layout是如何知道要改變按鈕的長度的呢?

可以這麼解釋:這個按鈕自身知道他的寬度應該是多少，它通過基於它裡面的標題文字外加上一些圓角的邊距填充，可以計算出來的。如果你設定了一個按鈕的背景圖片，它也會把這一點計算在內的。

這個現象被認為是固有內容尺寸。不是所有的空間都會這樣，但是大部分是這樣的（UILable不在內）。如果一個view能夠計算出它自己的首選尺寸，那麼你就沒有必要對其專門設定Width or Height constraints 了。關於這個以後你就看得多了。

為了得到按鈕的最佳尺寸，選中它並且在Editor菜單裡將至設定為Size to Fit Content 。這步操作會使按鈕擺脫明確的Width constraint 並且將之恢複為按鈕的固有內容尺寸模式。

兩個按鈕的探戈

Guides 不僅可以出現在view與superview的, 也可以出現在同一階層的多個view之間。為了證明這點，現在請在canvas裡面拖進一個新的圓角矩形按鈕。

如果你把這個按鈕放得離另外一個比較遠，這個按鈕回得到自己的constraints。然而，如果你把兩個按鈕放的足夠近，那麼這兩個按鈕的constraint會開始互相作用。

把新的按鈕捕捉到原來按鈕的旁邊:

現在這裡會出現一些點狀guidelines，但Interface Builder不會把他們全部轉換成constraint；因為這有一點多了。但這基本會認出這兩個按鈕能在各個方位對齊－在他們的頂部，中心以及基準處。

在把新按鈕放下後，這個按鈕的constraints會看上去像這樣:

，新的按鈕有一個Vertical Space對於螢幕的底部，也有一個Horizontal Space對於另外一個按鈕。但是這個space是非常小的（只有8points），T型狀對象可能很難看到，但一定是存在於那裡的。

在文檔概要圖中選中Horizontal Space constraint ：

當你選中一個constraint的時候，它會在螢幕中屬於它的地方高亮顯示。這個顯示在兩個按鈕之間特別的constraint ，它的意思是在說：

“第二個按鈕將會一直出現在第一個按鈕的右邊，無論第一個按鈕的位置以及大小如何變化。”

選中左邊的按鈕然後輸入一些字比如說“A longer label”。你會看到當新的標題輸進去以後，左邊的按鈕重新設定了其尺寸，並且另外一個按鈕也移出了它原來的位置。但是它始終是附屬在第一個按鈕的右邊邊界，這也就是我們想要的結果:

請注意Interface Builder重新用一個Horizontal Space代替了原來的Center X Alignment。每次當你對控制項做一個尺寸的（或者位置）的改變，Interface Builder會計算出一個它認為對的constraint。通常來說，它都是對的，但有時候它會完全誤解我們的意思。在這裡，你明顯想要將按鈕保持在中心位置當你在改變其中的文字時。

把按鈕重新放置到它的中心對齊處去。看看現在的constraint是怎麼樣的:

這可能不是你想要發生的。現在兩個按鈕之間不再互相串連了。取而代之的是，新的右按鈕和螢幕的右邊緣有了一個Horizontal Space的constraint。兩個按鈕之間沒有Horizontal Space了。

當然，你可以通過把捕捉在一起然後再將他們重新串連，但這個問題是可以通過不拖拽view來避免的。

首先，通過快速鍵Cmd－Z來取消操作，使第一個按鈕不再中心對齊。現在選中按鈕並且在Editor 菜單選擇 AlignHorizontal Center in Container。這次不僅是第一個按鈕移到了螢幕的中心處－另外一個也跟著移了過來。更可能應該這樣操作吧！

為了能夠對之概念有更好的瞭解，還是多做一些操作吧。選中小的按鈕然後把它放到大的上面去，這樣以來他們被捕捉進了place vertically（但不要嘗試對齊這兩個按鈕的左邊緣）：

因為你把兩個按鈕捕捉在了一起，所以現在他們之間有一個Vertical Space。這個間距依然是由HIG推薦的8 points遠。

提示: 這個 “HIG”, 是 iOS Human Interface Guidelines的簡稱, 介紹了蘋果對設計優秀的使用者介面推薦設定。對於IOS開發人員來說是必讀的.。HIG 解釋了在哪種情況下選擇哪種UI元素是合適的，並且提供使用他們的最好執行個體. 你可以在這裡查看它。

你可以對於控制項之間的標準距離不受限制。constraint是完全成熟的對象，就像view，所以你也可以改變其屬性。

選擇兩個view之間的Vertical Space constraint。你也可以通過點擊T型狀對象來做到，儘管這有點太過講究。但目前為止最簡單的方式還是點擊文檔概要圖裡面的constraint。一旦你選中了，切換到Attributes inspector:

預設的Standard attribute的勾是選上的。對於兩個對象之間的space constraint是8 points；對於一個view於之superview之間的邊緣距是20 points。在constraint框裡面輸入40來改變其constraint大小。看，現在兩個按鈕離的更遠了，但他們之間還是串連著的：

運行程式來看看效果：

按鈕之間明顯保持著他們的垂直距離安排，但是他們的水平方向卻沒有！

如果你仔細看nib檔案，你會發現上邊的按鈕和canvas的左邊緣之間有一個Horizontal Space（如果你像我一樣在同一個點粗糙的放置了那個按鈕的話）:

底部的標籤在螢幕中水平置中對齊，但上邊的按鈕不是的－它總是和左邊緣保持著一樣的距離。

這看上不是很理想，其實你想要的結果是如下目標：

“底部按鈕應該一直保持水平置中，並且頂部按鈕左邊界要一直對齊著底部按鈕的左邊界。”

對於第一中constraint，你已經擁有了，但是第二種你還沒有。Interface Builder 會顯示對齊的guides, 所以你能夠向左拖拽上邊的按鈕直到它的邊界捕捉到下邊的邊界：

不幸的是，這個操作移出了兩個按鈕之間的Vertical Space（至少在有些時候，這取決於控制項是如何拖拽以及放置的操作）。Interface Builder根本“忘了”那曾經有一個Vertical Space，取而代之的操作是於底部的view又重建一個Vertical Space：

這和你想要的結果差的太遠了。結果不應該是在兩個按鈕之間有一個Vertical Space 嗎？而不是視窗的底部產生一個Vertical Space。

iOS7 自動布局 入門–Auto Layout