iOS6?自動(dòng)布局?入門–Auto?Layout(轉(zhuǎn))

標(biāo)簽：? 雜談

?

目前為止，即使你的界面設(shè)計(jì)是在合理的復(fù)雜度內(nèi)，你也必須要為之寫許多代碼來適應(yīng)變化的布局。現(xiàn)在我相信你會(huì)很高興聽到這種情況將不會(huì)發(fā)生了-對(duì)于iPhone與iPad IOS6 帶來了一個(gè)非常了不起的特征：自動(dòng)布局。

?

自動(dòng)布局不僅能給你的應(yīng)用帶來各種屏幕尺寸設(shè)計(jì)的支持，做為額外的驚喜，它還能使設(shè)計(jì)中的各種小事比如多語言環(huán)境支持。你從此不必再為你想要支持的各種語言重新設(shè)計(jì)nibs和storyboards文件，當(dāng)然這也包括一些從右至左書寫的語言比如說希伯來文和阿拉伯語。

這篇教程將向你展示的是如何開始使用Iterface Builder來做自動(dòng)布局。在iOS 6 by Tutorials里，我們把這篇教程內(nèi)容寫得更深，并且基于這個(gè)知識(shí)會(huì)有一個(gè)全新的章節(jié)，在這里面你會(huì)看到如果通過代碼來釋放自動(dòng)布局的全部功能。

好吧，現(xiàn)在開始拿著你喜歡的零食以及飲料，準(zhǔn)備開始做一名自動(dòng)布局的大師吧！

springs and struts 的問題

毫無疑問你可能對(duì)autosizing masks比較熟悉–這個(gè)也就是?“springs and struts” 模式。autosizing mask決定了一個(gè)view會(huì)發(fā)生什么當(dāng)它的superview 改變大小的時(shí)候。它是否有靈活并且自動(dòng)修復(fù)頁邊處理能力（the struts），它的寬和高同時(shí)也會(huì)發(fā)生什么變化呢（the springs）？

舉個(gè)例子，當(dāng)一個(gè)view的superview的寬度變寬時(shí)，它的寬度也會(huì)靈活地跟著變寬，并且它的右邊界也會(huì)自動(dòng)修復(fù)般的一直緊挨著superview的右邊界。

autosizing 系統(tǒng)處理這種簡(jiǎn)單的情況還是不錯(cuò)的，但是當(dāng)情況稍微復(fù)雜一點(diǎn)的時(shí)候，它就會(huì)很快搞砸你的布局。現(xiàn)在讓我們看一個(gè)springs and struts模式所不能處理的一個(gè)簡(jiǎn)單例子吧。

打開Xcode創(chuàng)建一個(gè)基于Single View Application template新項(xiàng)目，把之命名為”StrutsProblem”，選擇iPhone程序并且禁用Storyboards：

在 Interface Builder 里點(diǎn)擊打開ViewController.xib。在你做任何其他事情之前，請(qǐng)先在nib里把Auto Layout禁用掉。你可以在File inspector里找到這個(gè)選項(xiàng)：

取消選擇“Use Autolayout”復(fù)選框. 那么現(xiàn)在你的nib使用的是舊版本的?struts-and-springs 模式。

提示:?任何你通過Xcode4.5或者更高版本創(chuàng)建的新nib或者storyboard文件會(huì)默認(rèn)使用Auto Layout。因?yàn)锳uto Layout這個(gè)特性只有在IOS 6中有，所以如果你想要使用 Xcode4.5來做一些兼容IOS5的應(yīng)用，你必須要在新的nib或者storyboard文件中通過取消選擇“Use Autolayout”復(fù)選框來禁用Auto Layout。

拖拉三個(gè)新的view到main view中，如圖所示：

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

現(xiàn)在每個(gè)View都離窗體邊界 20 points遠(yuǎn)；各個(gè)填充顏色的view之間的距離也是20 points。底部的view是280 points寬，并且頂部?jī)蓚€(gè)view都設(shè)置成130 points寬。所有的view都設(shè)置成200 points 高。

運(yùn)行程序并且把模擬器或者你的設(shè)備旋轉(zhuǎn)至景觀方向。你的設(shè)備會(huì)如下圖所以，和我們理想的差距甚遠(yuǎn)：

提示：你能夠通過使用?HardwareRotate Left and Rotate Right的菜單選項(xiàng)來旋轉(zhuǎn)模擬器， 或者通過按住Cmd然后使用向左或者向右方向鍵來旋轉(zhuǎn)。

而我想要的是讓程序運(yùn)行后是這個(gè)樣子的在景觀方向下:

很明顯, autosizing masks 對(duì)于要達(dá)到這三個(gè)view的理想變化還需要做點(diǎn)其他的。 從左上角的View來開始設(shè)置autosizing ：

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

類似地, 改變 右上角autosizing 設(shè)置:

這是底部view的設(shè)置:

運(yùn)行程序并且轉(zhuǎn)動(dòng)設(shè)備至景觀方向。現(xiàn)在應(yīng)該看上去是這樣：

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

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

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

UIKit 會(huì)發(fā)送一些消息到你的view controllers當(dāng)用戶界面在開始旋轉(zhuǎn)前，在旋轉(zhuǎn)過程中以及旋轉(zhuǎn)后。你可以通過監(jiān)聽這些消息來改變你用戶界面的布局。通常你會(huì)重寫willAnimateRotationToInterfaceOrientation:duration:?來改變?nèi)魏涡枰匦乱?guī)劃的view的frame。

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

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

逐個(gè)把這些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;} }

當(dāng)view controller旋轉(zhuǎn)至一個(gè)新的方向時(shí)會(huì)調(diào)用這個(gè)回調(diào)函數(shù)。現(xiàn)在當(dāng)用戶界面的方向轉(zhuǎn)動(dòng)時(shí)view controller使它里面的view尺寸縮放理想了- 這是一種建立在對(duì)iPhone屏幕尺寸了解上的硬編碼能力。因?yàn)檫@個(gè)回調(diào)函數(shù)發(fā)生在一個(gè)動(dòng)畫block里，所以當(dāng)改變它的尺寸會(huì)有動(dòng)畫效果。

等等，現(xiàn)在還不能運(yùn)行程序。 你必須先恢復(fù)這三個(gè)view的autosizing masks 設(shè)置如下圖所示，否則?autosizing 機(jī)制會(huì)與你在?willAnimateRotation: 函數(shù)設(shè)置里的view的位置、尺寸產(chǎn)生沖突。

現(xiàn)在可以運(yùn)行程序了，然后將設(shè)備翻轉(zhuǎn)至景觀方向。可以看到每個(gè)view的呈現(xiàn)都很理想，再次翻準(zhǔn)屏幕至肖像方向，看上去也還不錯(cuò)。

這樣做成功了，但是為了這么個(gè)簡(jiǎn)單的呈現(xiàn)你就要必須寫許多代碼了。想象一下，當(dāng)你遇到真正更加復(fù)雜，特別是動(dòng)態(tài)的那些獨(dú)立View改變尺寸，或者有一系列的subviews沒有被固定時(shí)你在代碼上所需要作出的努力。

提示:?你還可以使用另外一種方法，那就是同時(shí)做好肖像方向以及景觀方向的nib，然后當(dāng)設(shè)備轉(zhuǎn)動(dòng)時(shí)，把對(duì)應(yīng)的view從nib文件載入進(jìn)來，把當(dāng)前的view交換出去。但即使這樣，你還是需要做很多的工作，另外你還多了同時(shí)管理兩個(gè)nib文件而不是一個(gè)nib文件的麻煩。

Auto Layout 來拯救了！

現(xiàn)在我將要展示的是如何用Auto Layout來做到同樣的效果。首先，把willAnimateRotationToInterfaceOrientation:duration:這個(gè)方法從ViewController.m里面刪除，因?yàn)槟壳拔乙龅腁uto Layout是不需要寫任何代碼的。

回到ViewController.xib然后在File inspector控制面板里，把“Use Autolayout”的復(fù)選框勾上使Auto Layout對(duì)這個(gè)nib文件起作用：

提示：?Auto Layout 功能在整個(gè)nib或者storyboard文件里總是被開啟著的。在這兩種文件里的所有view都會(huì)使用Auto layout功能如果你把勾選上的話。

現(xiàn)在運(yùn)行程序并且轉(zhuǎn)動(dòng)屏幕，呈現(xiàn)的樣子還是之前的混亂樣。

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

再次重新選中這兩個(gè)view并且做?EditorPinHorizontal Spacing操作。?(即使這兩個(gè)view看上去像被選中了當(dāng)你做第一個(gè)Pin操作后。但是請(qǐng)注意目前他們處在一種特殊的布局關(guān)系顯示模式中，你還是必須要重新選中這兩個(gè)view。)

在左邊的文檔概要圖中, 你會(huì)注意到有一個(gè)新的section名叫 “Constraints”. 這個(gè)section 會(huì)被自動(dòng)加入當(dāng)你在nib文件中啟用Auto Layout時(shí)。在這篇文檔的下一部分你會(huì)了解到這些Contraints是什么以及他們是如何操作的。

現(xiàn)在, 我們把一個(gè)名叫 ?“Horizontal Space (170)” 的從Constraints列表里面刪除：

運(yùn)行程序并轉(zhuǎn)動(dòng)屏幕. 現(xiàn)在看上去好多了 – 頂部的兩個(gè)view 有了合適的寬度和間距 – 但還不是我們想要的樣子:

按住Cmd鍵同時(shí)選中所有的三個(gè)view。 在菜單欄, 做PinHeights Equally?操作。

現(xiàn)在還是按住Cmd鍵同時(shí)選中左上角的以及底部的view,然后做EditorPinVertical Spacing?操作。

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

如果你一下子同時(shí)選中所有的三個(gè)view，Interface Builder應(yīng)該如下圖所示：

藍(lán)色的T型狀對(duì)象定義了各個(gè)view之間的限制。這看上去有點(diǎn)復(fù)雜, 但是你一旦學(xué)會(huì)了，你會(huì)發(fā)現(xiàn)這種表達(dá)相當(dāng)簡(jiǎn)潔明了。

運(yùn)行程序 … 哇, 沒有寫一行代碼每樣?xùn)|西都看上去非常棒了！

酷, 但剛才你究竟做了什么呢?Auto Layout 能使你簡(jiǎn)單地表達(dá)清楚頁面布局中的各個(gè)view之間的關(guān)系而不會(huì)讓你為了各種view有多大以及他們?cè)摱ㄎ辉谀睦镉簿幵S多代碼 。

你剛才做了如下的關(guān)系操作 – 也就是 constraints – 在頁面布局里:

• 左上角和右上角的view (也就是第一次的pin widths equally 操作).
• 在左上角view和右上角view之間有20-point的間距 (相應(yīng)的操作是 pin horizontal spacing).
• 所有的view是相同的高度 (相應(yīng)的操作是pin heights equally).
• 在頂部?jī)蓚€(gè)view與底部的view之間有一個(gè)20-point的間距 (the pin vertical spacing).

以上這些就足以展示，當(dāng)屏幕尺寸變化時(shí)，Auto Layout如何放置布局里的各種view以及它是如何工作的。

提示：?springs-and-struts布局模式也會(huì)帶來一些其他限制當(dāng)你從它切換至“Use Autolayout”模式時(shí)。對(duì)于各個(gè)view和屏幕邊緣之間的邊距都基本會(huì)有一條限制，是這么說的：“這個(gè)view總是和頂部/底部/左邊/右邊保持 著20-points的距離。”

你可以看到你的所有contraints在文檔概要里。如果你在文檔概要里點(diǎn)擊一個(gè)constraint，Interface Builder會(huì)在contraint在view中所體現(xiàn)的地方通過畫一條白色的邊框并且對(duì)之添加一個(gè)陰影使其高亮顯示：

Constraints是真實(shí)的對(duì)象 (屬于?NSLayoutConstraint類) ，他們也擁有相應(yīng)的屬性。 比如說，選中頂部?jī)蓚€(gè)view間距的constraint（名為“Horizontal Space (20)”）然后切換至它的Attributes inspector。 現(xiàn)在你可以通過修改Constant里的值來改變兩個(gè)view之間的距離大小。

將之設(shè)置成100并且運(yùn)行程序。現(xiàn)在兩個(gè)view之間的距離更寬了:

當(dāng)你的程序需要描述各種view的布局時(shí)，Auto Layout比起springs and struts表達(dá)能力要強(qiáng)許多。在這份教程的余下部分，你將會(huì)學(xué)到關(guān)于constraints的所有以及如何在Interface Builder應(yīng)用之并使其能做到各種布局安排。

Auto Layout的工作原理

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

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

Auto Layout用所有的這些constraints來對(duì)你所有的view做一些數(shù)學(xué)計(jì)算以致view達(dá)到一個(gè)理想的位置以及尺寸。 你不再需要自己來設(shè)置view的frame-Auto Layout會(huì)幫你做這一切-完全基于你對(duì)view所設(shè)置的constraints。

在沒有Auto Layout之前,你總是通過硬編碼來設(shè)置view的框架, 也可能通過Interface Builder 坐標(biāo)里面精確的放置他們，通過initWithFrame:來傳遞一個(gè)矩形,或者通過設(shè)置view的frame，bounds或者center 屬性。

對(duì)于剛剛你做的應(yīng)用, 你特地把frames設(shè)置到下圖所示：

你也可以對(duì)每個(gè)view做autosizing masks設(shè)置：

那應(yīng)該不再是你認(rèn)為的屏幕設(shè)計(jì)方式了。使用Auto Layout，你所要做的只是如下圖所示:

現(xiàn)在對(duì)于view來說尺寸和位置已經(jīng)不那么重要了; 把問題都交給constraints吧。當(dāng)然, 當(dāng)你在canvas里拖進(jìn)一個(gè)新的按鈕或者標(biāo)簽時(shí)，這個(gè)控件會(huì)有一個(gè)特定的尺寸然后你把它放到一個(gè)特定的位置, 但這也只是一種設(shè)計(jì)目的來告訴Interface Builder在哪里放置constraints。

設(shè)計(jì)成你想要的樣子

對(duì)你來說一個(gè)巨大的優(yōu)勢(shì)來使用constraints是你不再需要擺弄坐標(biāo)系統(tǒng)來使你的各個(gè)view出現(xiàn)在合適的位置。你要做的只是通過對(duì)Auto Layout描述每個(gè)view之間的聯(lián)系關(guān)系。這種設(shè)計(jì)方式我們叫做?通過目的來設(shè)計(jì).

當(dāng)你通過目的來設(shè)計(jì)時(shí), 你在表達(dá)的是你想要達(dá)到的目標(biāo)是什么而不是如何來完成目標(biāo)。在以前會(huì)是這么個(gè)說法：“這個(gè)按鈕的左上角的坐標(biāo)是（20, 230）”, 現(xiàn)在你可以這么表達(dá)了:

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

使用這個(gè)描述, Auto Layout能自動(dòng)計(jì)算出你的按鈕該出現(xiàn)在哪里, 無論它的superview的大小。

這里是其他通過目的來設(shè)計(jì)的例子(Auto Layout 能夠應(yīng)付所有的這些指示):

“這兩個(gè)text fields應(yīng)該保持同樣大小。”
“這兩個(gè)button應(yīng)該保持同時(shí)移動(dòng)。”
“這四個(gè)標(biāo)簽應(yīng)該同時(shí)保持右邊對(duì)齊。”

這就使你的用戶界面設(shè)計(jì)顯得更加具有描述性。你只需簡(jiǎn)單的定義constraints, 然后系統(tǒng)會(huì)自動(dòng)幫你計(jì)算frames。

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

對(duì)于使用Auto Layout另外個(gè)重要的好處是國(guó)際化。 比如說德文字符， 是出了名的長(zhǎng)，把它放進(jìn)你的標(biāo)簽會(huì)是一件十分頭疼的事情。 但是再一次，Auto Layout會(huì)來拯救你，因?yàn)樗軌驇湍阕詣?dòng)縮放基于內(nèi)容需要表現(xiàn)的標(biāo)簽-除此以外的每樣?xùn)|西還是會(huì)根據(jù)constraints來調(diào)整。

添加對(duì)德文, 法文, 以及其他的語言的支持要做的只是簡(jiǎn)單設(shè)置你的constraints ，translating the text，僅僅是這樣哦！

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

提示：?Auto Layout is 不僅僅對(duì)方向旋轉(zhuǎn)有幫助；它也能很簡(jiǎn)單的拉升你的用戶界面來適應(yīng)不同的屏幕尺寸。這不是一個(gè)巧合嗎！當(dāng)iPhone 5的長(zhǎng)屏幕出現(xiàn)時(shí)這項(xiàng)技術(shù)正好被加進(jìn)了ISO里 了。 Auto Layout 使得你在填滿iPhone 5的多余垂直屏幕內(nèi)容時(shí)變得非常簡(jiǎn)單。并且天知道會(huì)不會(huì)有一個(gè)傳言中的 “iPad mini”出現(xiàn)… 至少你現(xiàn)在可以用Auto Layout 來為將來做準(zhǔn)備了。

愛上constraints

關(guān)掉你目前的工程然后創(chuàng)建一個(gè)新的項(xiàng)目使用Single View Application模板。命名項(xiàng)目為“Constraints”。然后選擇為iPhone project并且不使用storyboards，但是我們需要用到ARC。

一個(gè)使用Xcode4.5創(chuàng)建的新項(xiàng)目會(huì)默認(rèn)為你選擇啟動(dòng)Auto Layout,所以你必要做任何特別的事情來啟用它。

點(diǎn)擊ViewController.xib?來打開Interface Builder。把一個(gè)新的圓角按鈕拖進(jìn)canvas。 注意當(dāng)你拖拽的時(shí)候，藍(lán)色虛線會(huì)出現(xiàn)。這些線被認(rèn)為是?guides:

這些guides會(huì)顯示在屏幕的頁邊, 也會(huì)顯示在中心：

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

把button對(duì)著guides放到左上角。 現(xiàn)在的nib文件會(huì)看上去像這樣：

看，有兩個(gè)藍(lán)色的東西附屬在按鈕上。 這些 T型狀對(duì)象就是設(shè)置在這個(gè)按鈕上的constraint。

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

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

“這個(gè)按鈕會(huì)一直待在它的superview的左上角。”

現(xiàn)在再次選中這個(gè)按鈕并把它放到nib文件右上角，還是對(duì)著藍(lán)色guides:

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

當(dāng)你對(duì)著guides放置一個(gè)按鈕（或者其他什么view）的時(shí)候，你會(huì)得到一個(gè)標(biāo)準(zhǔn)的大小，這個(gè)是被定義在“HIG”里面，這是蘋果公司的iOS Human Interface Guidelines文檔。對(duì)于屏幕的邊緣的頁邊距，標(biāo)準(zhǔn)的大小是20-points的空白。

甚至假設(shè)你把button放在某些沒有g(shù)uide的地方，你還是會(huì)得到一個(gè)Horizontal or Vertical Space的constraint。試一下。然后把按鈕像左挪一點(diǎn)，得到如圖所示的效果:

目前還是有一個(gè)?Horizontal Space的constraint。在文檔概要圖里，你能看到現(xiàn)在沒有一個(gè)標(biāo)準(zhǔn)space了。

你的按鈕放在哪里，你就會(huì)得到一個(gè)對(duì)應(yīng)的constraint。

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

請(qǐng)注意這個(gè)Horizontal Space constraint現(xiàn)在被一個(gè)Center X Alignment constraint取代了，這也就意味著這個(gè)按鈕會(huì)一直跟著它的superview中心對(duì)其在水平軸上。依然有一個(gè)Vertical Space constraint值保持著這個(gè)按鈕待在view的最底部。（還是請(qǐng)使用標(biāo)準(zhǔn)頁邊距）。

運(yùn)行程序并且轉(zhuǎn)動(dòng)設(shè)備至景觀方向。看，甚至在景觀方向，這個(gè)按鈕還是呆在底部的中心位置：

對(duì)于這個(gè)按鈕，這是你想要表達(dá)的目的是: “這個(gè)按鈕應(yīng)該一直待在底部的中心位置。” 請(qǐng)注意，現(xiàn)在沒有任何地方你必須要告訴Interface Builder你的按鈕的坐標(biāo)是什么, 你只要把它放置的view中就行了。

有個(gè)Auto Layout，你可以不用在關(guān)心你的view在canvas里面的精確坐標(biāo)位置了。所有這一切，Auto Layout會(huì)幫你從你設(shè)置的constraints里面派生出來（或者說是Interface Builder為你設(shè)置了這一切）。

在這個(gè)范例里你可以看出這個(gè)按鈕在Size inspector里面的轉(zhuǎn)化，那是相當(dāng)?shù)拇蟀?#xff1a;

當(dāng)Auto Layout 禁用時(shí)，在X，Y，Width或者Height里的值會(huì)改變所選中view的位置以及尺寸。當(dāng)Auto Layout 啟用時(shí)，你還是能夠在這些框里面輸入新的值，但通常結(jié)果不會(huì)你是想要的效果。那個(gè)view 會(huì)移動(dòng)，但是Interface Builder也會(huì)基于你的新值來計(jì)算出新的constraints。

比如說，把Width的值改到100，canvas里面的按鈕會(huì)變成下圖這個(gè)樣子：

現(xiàn)在 Center X Alignment constraint的值消失了, 取而代之的是一個(gè)把按鈕連在屏幕左邊緣的Horizontal Space，這個(gè)按鈕同時(shí)也會(huì)產(chǎn)生了一個(gè)新的constraint，它強(qiáng)制使按鈕的寬度固定在100 points（可以看到按鈕下方的藍(lán)色欄）。

你在文檔概要圖的左邊看到現(xiàn)在有了一個(gè)新的Width constraint：

不像其他的constraint，那些是在按鈕和它的superview之間，這個(gè)寬度constraint只能應(yīng)用于按鈕本身。你可以認(rèn)為它是一個(gè)按鈕和按鈕之間的constraint。

拖動(dòng)按鈕使它再次卡在?Center X Alignment constraint 上。

小貼士:?因?yàn)橥ㄟ^?Size inspector來改變位置和大小可能會(huì)搞亂你的constraints，我建議盡量不要這么做，如果你非要改動(dòng)布局，請(qǐng)更改constraints。

你現(xiàn)在可能想知道為什么按鈕之前沒有一個(gè)Width constraint。在沒有的情況下，Auto Layout是如何知道要改變按鈕的長(zhǎng)度的呢?

可以這么解釋:這個(gè)按鈕自身知道他的寬度應(yīng)該是多少，它通過基于它里面的標(biāo)題文字外加上一些圓角的邊距填充，可以計(jì)算出來的。如果你設(shè)置了一個(gè)按鈕的背景圖片，它也會(huì)把這一點(diǎn)計(jì)算在內(nèi)的。

這個(gè)現(xiàn)象被認(rèn)為是固有內(nèi)容尺寸。不是所有的空間都會(huì)這樣，但是大部分是這樣的（UILable不在內(nèi)）。如果一個(gè)view能夠計(jì)算出它自己的首選尺寸，那么你就沒有必要對(duì)其專門設(shè)置Width or Height constraints 了。關(guān)于這個(gè)以后你就看得多了。

為了得到按鈕的最佳尺寸，選中它并且在Editor菜單里將至設(shè)置為Size to Fit Content?。這步操作會(huì)使按鈕擺脫明確的Width constraint 并且將之恢復(fù)為按鈕的固有內(nèi)容尺寸模式。

兩個(gè)按鈕的探戈

Guides 不僅可以出現(xiàn)在view與superview的, 也可以出現(xiàn)在同一階層的多個(gè)view之間。為了證明這點(diǎn)，現(xiàn)在請(qǐng)?jiān)赾anvas里面拖進(jìn)一個(gè)新的圓角矩形按鈕。

如果你把這個(gè)按鈕放得離另外一個(gè)比較遠(yuǎn)，這個(gè)按鈕回得到自己的constraints。然而，如果你把兩個(gè)按鈕放的足夠近，那么這兩個(gè)按鈕的constraint會(huì)開始互相作用。

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

現(xiàn)在這里會(huì)出現(xiàn)一些點(diǎn)狀guidelines，但I(xiàn)nterface Builder不會(huì)把他們?nèi)哭D(zhuǎn)換成constraint；因?yàn)檫@有一點(diǎn)多了。但這基本會(huì)認(rèn)出這兩個(gè)按鈕能在各個(gè)方位對(duì)齊－在他們的頂部，中心以及基線處。

在把新按鈕放下后，這個(gè)按鈕的constraints會(huì)看上去像這樣:

如圖所示，新的按鈕有一個(gè)Vertical Space對(duì)于屏幕的底部，也有一個(gè)Horizontal Space對(duì)于另外一個(gè)按鈕。但是這個(gè)space是非常小的（只有8points），T型狀對(duì)象可能很難看到，但一定是存在于那里的。

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

當(dāng)你選中一個(gè)constraint的時(shí)候，它會(huì)在屏幕中屬于它的地方高亮顯示。這個(gè)顯示在兩個(gè)按鈕之間特別的constraint ，它的意思是在說：

“第二個(gè)按鈕將會(huì)一直出現(xiàn)在第一個(gè)按鈕的右邊，無論第一個(gè)按鈕的位置以及大小如何變化。”

選中左邊的按鈕然后輸入一些字比如說“A longer label”。你會(huì)看到當(dāng)新的標(biāo)題輸進(jìn)去以后，左邊的按鈕重新設(shè)置了其尺寸，并且另外一個(gè)按鈕也移出了它原來的位置。但是它始終是附屬在第一個(gè)按鈕的右邊邊界，這也就是我們想要的結(jié)果:

請(qǐng)注意Interface Builder重新用一個(gè)Horizontal Space代替了原來的Center X Alignment。每次當(dāng)你對(duì)控件做一個(gè)尺寸的（或者位置）的改變，Interface Builder會(huì)計(jì)算出一個(gè)它認(rèn)為對(duì)的constraint。通常來說，它都是對(duì)的，但有時(shí)候它會(huì)完全誤解我們的意思。在這里，你明顯想要將按鈕保持在中心位置當(dāng)你在改變其中的文字時(shí)。

把按鈕重新放置到它的中心對(duì)齊處去。看看現(xiàn)在的constraint是怎么樣的:

這可能不是你想要發(fā)生的。現(xiàn)在兩個(gè)按鈕之間不再互相連接了。取而代之的是，新的右按鈕和屏幕的右邊緣有了一個(gè)Horizontal Space的constraint。兩個(gè)按鈕之間沒有Horizontal Space了。

當(dāng)然，你可以通過把捕捉在一起然后再將他們重新連接，但這個(gè)問題是可以通過不拖拽view來避免的。

首先，通過快捷鍵Cmd－Z來取消操作，使第一個(gè)按鈕不再中心對(duì)齊。現(xiàn)在選中按鈕并且在Editor?菜單選擇?AlignHorizontal Center in Container。這次不僅是第一個(gè)按鈕移到了屏幕的中心處－另外一個(gè)也跟著移了過來。更可能應(yīng)該這樣操作吧！

為了能夠?qū)χ拍钣懈玫牧私?#xff0c;還是多做一些操作吧。選中小的按鈕然后把它放到大的上面去，這樣以來他們被捕捉進(jìn)了place vertically（但不要嘗試對(duì)齊這兩個(gè)按鈕的左邊緣）：

因?yàn)槟惆褍蓚€(gè)按鈕捕捉在了一起，所以現(xiàn)在他們之間有一個(gè)Vertical Space。這個(gè)間距依然是由HIG推薦的8 points遠(yuǎn)。

提示:?這個(gè) “HIG”, 是 iOS Human Interface Guidelines的簡(jiǎn)稱, 介紹了蘋果對(duì)設(shè)計(jì)優(yōu)秀的用戶界面推薦設(shè)置。對(duì)于IOS開發(fā)人員來說是必讀的.。HIG 解釋了在哪種情況下選擇哪種UI元素是合適的，并且提供使用他們的最好實(shí)例. 你可以在這里查看它。

你可以對(duì)于控件之間的標(biāo)準(zhǔn)距離不受限制。constraint是完全成熟的對(duì)象，就像view，所以你也可以改變其屬性。

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

默認(rèn)的Standard attribute的勾是選上的。對(duì)于兩個(gè)對(duì)象之間的space constraint是8 points；對(duì)于一個(gè)view于之superview之間的邊緣距是20 points。在constraint框里面輸入40來改變其constraint大小。看，現(xiàn)在兩個(gè)按鈕離的更遠(yuǎn)了，但他們之間還是連接著的：

運(yùn)行程序來看看效果：

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

如果你仔細(xì)看nib文件，你會(huì)發(fā)現(xiàn)上邊的按鈕和canvas的左邊緣之間有一個(gè)Horizontal Space（如果你像我一樣在同一個(gè)點(diǎn)粗糙的放置了那個(gè)按鈕的話）:

底部的標(biāo)簽在屏幕中水平居中對(duì)齊，但上邊的按鈕不是的－它總是和左邊緣保持著一樣的距離。

這看上不是很理想，其實(shí)你想要的結(jié)果是如下目標(biāo)：

“底部按鈕應(yīng)該一直保持水平居中，并且頂部按鈕左邊界要一直對(duì)齊著底部按鈕的左邊界。”

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

不幸的是，這個(gè)操作移出了兩個(gè)按鈕之間的Vertical Space（至少在有些時(shí)候，這取決于控件是如何拖拽以及放置的操作）。Interface Builder根本“忘了”那曾經(jīng)有一個(gè)Vertical Space，取而代之的操作是于底部的view又重新生成一個(gè)Vertical Space：

這和你想要的結(jié)果差的太遠(yuǎn)了。結(jié)果不應(yīng)該是在兩個(gè)按鈕之間有一個(gè)Vertical Space?嗎？而不是窗口的底部產(chǎn)生一個(gè)Vertical Space。

?

轉(zhuǎn)載于:https://www.cnblogs.com/iOS-mt/p/4168939.html

總結(jié)

以上是生活随笔為你收集整理的iOS6 自动布局 入门–Auto Layout(转)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。