iOS6 自动布局 入门–Auto Layout(转)
iOS6?自動布局?入門–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的設置:
運行程序并且轉動設備至景觀方向?，F在應該看上去是這樣：
和理想的很接近了，但是還有點瑕疵。三個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旋轉至一個新的方向時會調用這個回調函數?，F在當用戶界面的方向轉動時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并且運行程序?，F在兩個view之間的距離更寬了:
當你的程序需要描述各種view的布局時，Auto Layout比起springs and struts表達能力要強許多。在這份教程的余下部分，你將會學到關于constraints的所有以及如何在Interface Builder應用之并使其能做到各種布局安排。
Auto Layout的工作原理
就像你在上面看到的測試一樣, Auto Layout 的基本工具就是constraint. 一個constraint 描述了兩個view之間的幾何關系。比如說，你可能有一個constraint是這樣的:
“Lable A的右邊界和和Lable B的左邊界以20 points的空白相連接?！?/p>
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應該保持同樣大小?！?br />“這兩個button應該保持同時移動?！?br />“這四個標簽應該同時保持右邊對齊?！?/p>
這就使你的用戶界面設計顯得更加具有描述性。你只需簡單的定義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的左上角?！?/p>
現在再次選中這個按鈕并把它放到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 ，它的意思是在說：
“第二個按鈕將會一直出現在第一個按鈕的右邊，無論第一個按鈕的位置以及大小如何變化?！?/p>
選中左邊的按鈕然后輸入一些字比如說“A longer label”。你會看到當新的標題輸進去以后，左邊的按鈕重新設置了其尺寸，并且另外一個按鈕也移出了它原來的位置。但是它始終是附屬在第一個按鈕的右邊邊界，這也就是我們想要的結果:
請注意Interface Builder重新用一個Horizontal Space代替了原來的Center X Alignment。每次當你對控件做一個尺寸的（或者位置）的改變，Interface Builder會計算出一個它認為對的constraint。通常來說，它都是對的，但有時候它會完全誤解我們的意思。在這里，你明顯想要將按鈕保持在中心位置當你在改變其中的文字時。
把按鈕重新放置到它的中心對齊處去?？纯船F在的constraint是怎么樣的:
這可能不是你想要發生的?，F在兩個按鈕之間不再互相連接了。取而代之的是，新的右按鈕和屏幕的右邊緣有了一個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（如果你像我一樣在同一個點粗糙的放置了那個按鈕的話）:
底部的標簽在屏幕中水平居中對齊，但上邊的按鈕不是的－它總是和左邊緣保持著一樣的距離。
這看上不是很理想，其實你想要的結果是如下目標：
“底部按鈕應該一直保持水平居中，并且頂部按鈕左邊界要一直對齊著底部按鈕的左邊界?！?/p>
對于第一中constraint，你已經擁有了，但是第二種你還沒有。Interface Builder 會顯示對齊的guides, 所以你能夠向左拖拽上邊的按鈕直到它的邊界捕捉到下邊的邊界：
不幸的是，這個操作移出了兩個按鈕之間的Vertical Space（至少在有些時候，這取決于控件是如何拖拽以及放置的操作）。Interface Builder根本“忘了”那曾經有一個Vertical Space，取而代之的操作是于底部的view又重新生成一個Vertical Space：
這和你想要的結果差的太遠了。結果不應該是在兩個按鈕之間有一個Vertical Space?嗎？而不是窗口的底部產生一個Vertical Space。
?
轉載于:https://www.cnblogs.com/iOS-mt/p/4168939.html
總結
以上是生活随笔為你收集整理的iOS6 自动布局 入门–Auto Layout(转)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 创建SVN 本地服务器
- 下一篇： postgresql - mac 启动