你是否曾經因為嘗試想讓你的應用同時在景觀方向（橫版）以及肖像方向（豎版）看上去不錯而感到受挫？是否為了讓應用同時支援iphone以及ipad的模型尺寸而抓狂？現在我們可以不用為此而擔心了，我有個好消息帶給大家！
通常來說，如果螢幕是固定尺寸，那麼設計它的使用者界面不會很難，但如果螢幕的frame需要能夠變化，那麼其中各個ui元素的位置以及尺寸也必須為了适應新的尺寸做相應的變化。
目前為止，即使你的界面設計是在合理的複雜度内，你也必須要為之寫許多代碼來适應變化的布局。現在我相信你會很高興聽到這種情況将不會發生了-對于iphone與ipad ios6 帶來了一個非常了不起的特征：自動布局。
自動布局不僅能給你的應用帶來各種螢幕尺寸設計的支援，做為額外的驚喜，它還能使設計中的各種小事比如多語言環境支援。你從此不必再為你想要支援的各種語言重新設計nibs和storyboards檔案，當然這也包括一些從右至左書寫的語言比如說希伯來文和阿拉伯語。
好吧，現在開始拿着你喜歡的零食以及飲料，準備開始做一名自動布局的大師吧！
毫無疑問你可能對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與屬性連接配接起來:
add the following code to viewcontroller.m:
當view controller旋轉至一個新的方向時會調用這個回調函數。現在當使用者界面的方向轉動時view controller使它裡面的view尺寸縮放理想了- 這是一種建立在對iphone螢幕尺寸了解上的寫死能力。因為這個回調函數發生在一個動畫block裡，是以當改變它的尺寸會有動畫效果。
等等，現在還不能運作程式。 你必須先恢複這三個view的autosizing masks 設定如下圖所示，否則 autosizing 機制會與你在 willanimaterotation:
函數設定裡的view的位置、尺寸産生沖突。
現在可以運作程式了，然後将裝置翻轉至景觀方向。可以看到每個view的呈現都很理想，再次翻準螢幕至肖像方向，看上去也還不錯。
這樣做成功了，但是為了這麼個簡單的呈現你就要必須寫許多代碼了。想象一下，當你遇到真正更加複雜，特别是動态的那些獨立view改變尺寸，或者有一系列的subviews沒有被固定時你在代碼上所需要作出的努力。
提示: 你還可以使用另外一種方法，那就是同時做好肖像方向以及景觀方向的nib，然後當裝置轉動時，把對應的view從nib檔案載入進來，把目前的view交換出去。但即使這樣，你還是需要做很多的工作，另外你還多了同時管理兩個nib檔案而不是一個nib檔案的麻煩。
現在我将要展示的是如何用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 的基本工具就是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 來為将來做準備了。
關掉你目前的工程然後建立一個新的項目使用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
你可以對于控件之間的标準距離不受限制。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。這個漫畫可以表達你的心情當這一切發生時。