添加自動佈局約束（下文簡稱約束）有以下三種方式：
- 使用Xcode的Interface Builder界面設計器添加並設置約束
- 通過代碼逐條添加約束
- 通過可視化格式語言VFL添加約束
本文將以一個簡單的例子來演示如何使用這幾種方式添加約束，如下圖所示。程序的界面主要有三部分組成，最上面是一張公司logo圖片，下面是可以滾動的區域，包含公司名稱和詳細介紹。
打開Xcode（本文使用的版本爲6.1.1），新建項目，選擇iOS -> Application -> Single View Application。
項目命名爲AutoLayoutXcode，語言選擇Objective-C，設備選擇Universal。
點擊Main.storyboard，拖入一個Image View，一個Scroll View以及兩個Label，並將兩個Label作爲ScrollView的子視圖。爲了便於識別，將Image View的名稱改爲Logo Image，兩個Label的名稱修改爲Name Label與Description Label。
下載蘋果Logo圖片apple.jpg，並將其拖入項目中。文件下載地址：http://yunpan.cn/cfmJB82dfSwf6 （提取碼：4049）
選中Logo Image，在屬性窗口（Attributes Inspector）的Image View中，將Image設置爲apple.jpg，將Mode設置爲Aspect Fit。這樣就能根據Image View的大小來調整圖片的顯示。
爲了能夠正確定位Image View，我們需要添加4個約束，分別是：
- Image View左側與父視圖左側對齊
- Image View右側與父視圖右側對齊
- Image View頂部與父視圖頂部對齊
- Image View的高度爲父視圖高度的一半
於是選中Logo Image，點開設計器下方的Pin菜單，在彈出菜單上方取消勾選Constrain to margins（否則會有間距），並設置左側、右側與頂部的約束值均爲0（注意要將約束標記由虛線點亮爲實線），最後點擊彈出菜單下面的Add 3 Constraints按鈕，這樣就添加了上述三個對齊約束，如下圖所示。
Size Inspector可以查看當前選中界面元素的尺寸及所添加的約束。選中Logo Image並點擊Size Inspector，可以看到剛剛添加的三個約束，如下圖所示。
三條藍線分別表示左側、頂部與右側對齊約束。下面的列表也詳細列出了這三條約束，Trailing Space to...爲右對齊、Leading Space to...爲左對齊、Top Space to...爲頂部對齊。鼠標雙擊Top Space to: Superview約束會顯示該約束的詳細信息，如下圖所示。
回憶一下上一篇文章中關於約束的介紹，約束就是一個線性關係：
y = m * x + c
圖中的Vertical Space Constraint表示當前約束是一個垂直間距約束。First Item對應公式中的y，表示因變量，這裏顯示的是Logo Image.Top表示圖片頂部。Relation對應公式中的=，表示相等關係，這裏顯示的是Equal即相等。Second Item對應公式中的x，表示自變量，這裏顯示的是Superview.Top表示其父視圖的頂部。Multiplier對應公示中的m，表示縮放比例係數，這裏的值爲1。Constant對應公示中的c，表示偏移常量，這裏的值爲0。所以完整串下來就很清楚地表達了圖片與父視圖頂部對齊這樣一個關係。
注意，建立約束的雙方是對等的，既可以說y相對於x發生變化，亦可以說x相對於y發生變化，所以First Item與Second Item是可以互換的，即反函數：
x = 1/m * y - c/m
點擊First Item或者Second Item下拉菜單，選擇Reverse First And Second Item即可交換雙方的位置。
交換後的Multiplier與Constant會自動根據反函數公式計算得出。
注意到左側文檔結構窗口（Document Outline）右上角出現了一個紅色按鈕，表示當前界面存在佈局約束錯誤。
點擊該按鈕，Xcode將列出錯誤並給出解決建議。
我們現在僅爲圖片添加了3個約束，還缺少確定圖片最下面位置的約束，即圖中所指出的缺少高度約束（Need constraints for: height）。點擊紅色按鈕，Xcode會給出解決建議。
此時如果點擊Add Missing Constraints按鈕，Xcode會自行添加缺失的約束，但可能並非如我們所願，甚至造成混亂。因此我們點擊Cancel，自己添加約束。
我們希望圖片總能夠佔據上半部分屏幕，因此可以在圖片與父視圖之間建立高度約束。在文檔結構窗口中，鼠標單擊選中Logo Image，按住Control鍵拖拽到其父視圖View上，在彈出的菜單中選中Equal Height
保持Logo Image選中，在Size Inspector窗口中雙擊Equal Height to: Superview約束，修改Multiplier的值爲0.5。
此時文檔結構窗口右上方的紅色箭頭變成黃色箭頭，表示約束存在警告而非錯誤。點擊黃色箭頭後出現Misplaced Views，表示設計器中某些視圖的當前佈局狀態並非應用約束之後的最終狀態，需要根據約束的要求更新位置。點擊黃色三角按鈕，在彈出窗口中選擇Update Frame，點擊Fix Misplacement按鈕即可。
接着建立Scroll View的約束，它與父視圖之間具有左對齊、右對齊、下對齊，並且Image View與Scroll View的垂直間距爲0。除了使用Pin菜單之外，也可以直接在文檔結構窗口中或者設計器中通過拖拽建立約束。在文檔結構窗口中選中Scroll View，按住control拖拽到其父視圖View，在彈出的窗口中同時按住Shift鍵與Option鍵，選中Leading Space to Container、Trailing Space to Container和Bottom Space to Bottom Layout Guide，點擊窗口外區域關閉該窗口。
在設計器中選擇Logo Image，按住Control鍵拖拽到Scroll View上，在彈出窗口中選中Vertical Spacing。
界面設計器可以實時顯示所選視圖的約束。在選中Scroll View後，其四周會顯示出4條工字型藍線，每條藍線爲一個約束。
通過拖拽方式建立約束，Xcode會按照視圖的當前實際大小來確定約束的常量值，因此需要手動進行修改。在Size Inspector窗口中分別點擊每條約束的Edit按鈕，將Constant的值改爲0。
現在Scroll View的約束添加完畢。接着我們可以按照同樣的方式爲Name Label添加約束，將其左側、頂部與右側與Scroll View的對應部分對齊，並限定其高度爲20。
點擊Add 4 Constraints添加約束後，界面設計器顯示出4條橙色工字型線，表示視圖的當前位置尺寸不匹配約束，需要根據約束更新位置尺寸。點擊界面設計器下方的Resolve Auto Layout Issues按鈕，並點擊Update Frames以更新位置尺寸。
選中Name Label，在Attribute Inspector窗口中設置Label的Text爲“蘋果公司”，設置Background爲綠色。
同樣爲Description Label添加約束，將其左側、底部與右側與Scroll View的對應部分對齊，並且頂部與Name Label的底部相等。在Attribute Inspector窗口中設置Label的Text爲
“蘋果公司（Apple Inc. ）是美國的一家高科技公司。由史蒂夫·喬布斯、斯蒂夫·沃茲尼亞克和羅·韋恩(Ron Wayne)等三人於1976年4月1日創立，並命名爲美國蘋果電腦公司（Apple Computer Inc. ）， 2007年1月9日更名爲蘋果公司，總部位於加利福尼亞州的庫比蒂諾。
蘋果公司創立之初主要開發和銷售的個人電腦，截至2014年致力於設計、開發和銷售消費電子、計算機軟件、在線服務和個人計算機。蘋果的Apple II於1970年代助長了個人電腦革命，其後的Macintosh接力於1980年代持續發展。該公司硬件產品主要是Mac電腦系列、iPod媒體播放器、iPhone智能手機和iPad平板電腦；在線服務包括iCloud、iTunes Store和App Store；消費軟件包括OS X和iOS操作系統、iTunes多媒體瀏覽器、Safari網絡瀏覽器，還有iLife和iWork創意和生產力套件。蘋果公司在高科技企業中以創新而聞名世界。
蘋果公司1980年12月12日公開招股上市，2012年創下6235億美元的市值記錄，截至2014年6月，蘋果公司已經連續三年成爲全球市值最大公司。蘋果公司在2014年世界500強排行榜中排名第15名。2013年9月30日，在宏盟集團的“全球最佳品牌”報告中，蘋果公司超過可口可樂成爲世界最有價值品牌。2014年，蘋果品牌超越谷歌（Google），成爲世界最具價值品牌 。”
設置Lines的值爲0，設置Background爲黃色，並更新位置尺寸。
我們可以使用Xcode的Preview工具隨時對界面進行預覽。打開Assistant Editor，在快速跳轉下拉菜單中選擇Preview -> Main.storyboard。
在右側預覽窗口中就可以看到在不同設備上的實際運行效果。可以點擊預覽窗口左下角的+按鈕，在彈出菜單中添加需要預覽的設備。
現在不妨在模擬器中實際運行一下程序，發現Scroll View變成了橫向滾動而非縱向滾動，這並不是我們想要的效果。
請注意，當使用自動佈局爲Scroll View添加約束時，除了需要確定ScrollView本身的位置尺寸之外，還需要明確ScrollView的ContentSize大小。對於上述例子，Scroll View本身會佔用下半部分屏幕，但是其ContentSize的大小是不確定的，所以會出現異常滾動效果。因此我們還需要爲兩個Label確定寬高，這樣才能計算出ContentSize。按住Command鍵，在文檔結構窗口中選中Logo Image、Name Label與Description Label，點擊Pin按鈕，在彈出的窗口中選中Equal Width，這樣就使得兩個Label的寬度總與Image View的寬度相等，即Scroll View的ContentSize的寬度總是和Scroll View本身的寬度相同，因此就不會出現橫向滾動的情況了。
再次運行，現在只能縱向滾動了。程序最終項目文件鏈接：http://yunpan.cn/cfu9J9qvUQz2P （提取碼：7654）
通過這個例子我們不難發現，其實自動佈局的概念並不難，而且它能夠很好地解決多設備界面適配與屏幕旋轉處理等工作。而且在這幾種添加約束的方式當中，使用Xcode的Interface Builder來可視化地創建約束，以及使用預覽工具來實時調整約束，這種方式是最簡單直觀而且最常用的方式。