Auto Layout是一個有點難用文字來形容如何實作出你想要的版型，因為這沒有一個標準答案，因為同樣能做到這樣的排版，可能有5–6種做法，所以一般介紹Auto Layout都是介紹基本如何設定與使用Xcode提供的Update Frames、Embed In Stack、Add New Alignment Constraints、Add New Constraints與Resolve Auto Layout issue。而每個功能的作用如下面所述：
- Update Frames：用設定的約束條件（Constraints），更新物件的位置與尺寸。
- Embed In Stack：物件嵌入至堆疊視圖（Stack View）。
- Add New Alignment Constraints： 建立物件對齊的約束條件（Constraints），如對齊兩個物件的垂直中央對齊（Vertical Centers）。
- Add New Constraints： 建立物件間距的約束條件（Constraints），如物件到Super View之間的距離。
- Resolve Auto Layout issue：解決佈局的問題。
練習是最好學會Auto Layout的不二法門，不論你看過多少相關資訊或是相關教學，相信我，你還是無法掌握這門技巧，只有不斷的練習，你才有機會進入這奇妙的Auto Layout之門，就像是拜師學藝一樣，名師教了你降龍十八掌，但是你從不練習，或是隨便練練，那你終究還是無法變成武林高手。
練習一：三個 image view 水平排列，彼此間距10，距離左右邊界間距20, 等寬，寬高比例 1:2，垂直置中。
練習一（非Stack View）說明：
Step1：先拉三個Image View到View Controller的View。並設定對應的圖檔，此範例用的是information1.PNG、information2.PNG與information3.PNG。
Step2：按住Shift同時選取三個Image View『如下圖示步驟1』，然後點選Add New Constraints『如下圖示步驟2』，再選擇Aspect Ratio『如下圖示步驟3』，最後點選Add 3 Constraints『如下圖示步驟4』。這樣已經將三個Image View各新增了一個Aspect Ratio的Constraint。
Step3：在Document Outline裡，點選information1的Image View的三角形箭頭，點選後看到Constraints，再點選Constraints的三角形箭頭，則會看到aspect = 18:31（這數值不一定，會依照你拉的Image View Size會不同），點選這個aspect = 18:31，然後修改右側的Aspect Ratio Constraint的Multiplier為1:2。相同步驟也將information2的Image View與information3的Image View的aspect 修改為1:2。
Step4：按住Shift同時選取三個Image View『如下圖示步驟1』，然後點選Add New Constraints『如下圖示步驟2』，將左右的距離設定為10PT『如下圖示步驟3』，並選擇Equal Widths與Equal Heights『如下圖示步驟4』，最後點選Add 8 Constraints『如下圖示步驟5』。這樣就將三個Image View之間的間距與左右兩側的間距都設定為10PT並且Image View的Size都一樣。
Step5：在Document Outline裡，點選與View同一層的Constraints，這邊你會看到剛剛新增的8個Constraints，這時選擇Safe Area.trailing = information3.trailing + 10的Constraint，將右側的Trailing Alignment Constraint的Constant設為20，這樣就將information3的Image View設定距離右邊Safe Area的距離為20PT，同理information1.leading = Safe Area.leading + 10的Constant也設為20。
Step6：按住Shift同時選取三個Image View『如下圖示步驟1』，然後點選Add New Alignment Constraints『如下圖示步驟2』，選擇Vertically In Container『如下圖示步驟3』，最後點選Add 3 Constraints『如下圖示步驟4』。這樣就將三個Image View設定為垂直置中。這樣這個練習就完成了。
練習一（Stack View）說明：
Step1：如練習一（非Stack View）的Step1、Step2與Step3一樣，先建立三個Image View，並設定任一個Image View的Aspect Ratio為1:2。
Step2：按住Shift同時選取三個Image View『如下圖示步驟1』，然後點選Embed In Stack『如下圖示步驟2』，將三個Image View合成一個Stack View『如下面第二張圖』。
Step3：在Document Outline裡，點選Stack View，在右側Stack View內設定Distribution為Fill Equally，Spacing為10。這樣的意思就是三個Image View之間距離為10PT，而且平均填滿Stack View。
Step4：在Document Outline裡，點選Stack View『如下圖示步驟1』，然後點選Add New Constraints『如下圖示步驟2』，將左右的距離設定為10PT『如下圖示步驟3』，最後點選Add 2 Constraints『如下圖示步驟4』。這樣就將Stack View與左右兩側的間距都設定為10PT。
Step5：在Document Outline裡，點選Stack View『如下圖示步驟1』，然後點選Add New Alignment Constraints『如下圖示步驟2』，選擇Vertically In Container『如下圖示步驟3』，最後點選Add 1 Constraints『如下圖示步驟4』。這樣就將Stack View設定為垂直置中。這樣這個練習就完成了。
練習二：2個 Button 水平置中，第一個 Button的Title為“你的時間有限”，第二個 Button的Title為“賈伯斯”， Button 彼此的間距10，垂直置中。如下圖所示，畫面的中心點將大約落在”有”字。
練習二（非Stack View）說明：
Step1：先拉ㄧ個View到View Controller的View『如下圖示步驟1』，然後點選Add New Alignment Constraints『如下圖示步驟2』，選擇Horizontally In Container與Vertically In Container『如下圖示步驟3』，最後點選Add 2 Constraints『如下圖示步驟4』。這樣就將View設定為水平與垂直置中。
Step2：拉兩個Label到剛剛置中View，第一個Label Text設為“你的時間有限”，第二個Label Text設為“賈伯斯”。
Step3：按住Shift同時選取兩個Label『如下圖示步驟1』，然後點選Add New Constraints『如下圖示步驟2』，將上下左右的距離都設定為0PT『如下圖示步驟3』，最後點選Add 7 Constraints『如下圖示步驟4』。這樣就將兩個Label之間的間距與上下左右的間距都設定為0PT。利用SubView 的 Constraint來決定SuperView的⼤小。
Step4：在Document Outline裡，點選與View同一層的Constraints，這邊你會看到剛剛新增的7個Constraints，這時選擇賈伯斯.leading = 你的時間有限.trailing + 10的Constraint，將右側的Horizontally Space Constraint的Constant設為10。這樣這個練習就完成了。
練習二（Stack View）說明：
Step1：拉兩個Label到剛剛置中View，第一個Label Text設為“你的時間有限”，第二個Label Text設為“賈伯斯”。
Step2：按住Shift同時選取兩個Label『如下圖示步驟1』，然後點選Embed In Stack『如下圖示步驟2』，將兩個Label合成一個Stack View『如下面第二張圖』。
Step3：在Document Outline裡，點選Stack View，在右側Stack View內設定Spacing為10。這樣的意思就是兩個Label之間距離為10PT。
Step4：在Document Outline裡，點選Stack View『如下圖示步驟1』，然後點選Add New Alignment Constraints『如下圖示步驟2』，選擇Horizontally In Container與Vertically In Container『如下圖示步驟3』，最後點選Add 2 Constraints『如下圖示步驟4』。這樣就將Stack View設定為水平與垂直置中。這樣這個練習就完成了。
練習三：三個 button 水平排列，垂直置中，彼此的間距和邊界的間距都一樣大， button 的長度等於內容文字長度。不同 iPhone 尺寸時，間距大小不同 (另一種常見的設計為元件長度一樣，間距固定)。
練習三（非Stack View）說明：
Step1：先拉三個Button到View Controller的View，並分別設定Button Title為“求知若飢”、“虛心若愚”與“賈伯斯”。
Step2：先拉四個View到View Controller的View，並分別放在剛剛建立三個Button左右兩邊，所以總共需要四個View。為什麼需要這四個View呢？因為如果Button的寬，不會因裝置的解析度而改變，又要保持Button之間的寬度一樣，則就利用改變透明的View來達成。
Step3：點選第一個View『如下圖示步驟1』，然後點選Add New Constraints『如下圖示步驟2』，將左右的距離都設定為0PT『如下圖示步驟3』，最後點選Add 2Constraints『如下圖示步驟4』。這樣就將第一個View與第一個Button和左邊界之間的間距設定為0PT。相同方式將第二個View與第一個Button和第二個Button之間的間距設定為0PT，然後是第三個View與第二個Button和第三個Button之間的間距設定為0PT，最後為第四個View與第三個Button和右邊界之間的間距設定為0PT。
Step4：點選第二個View按住滑鼠右鍵拉到第一個View來設定兩個物件之間的Constraints『如下圖示步驟1』，按住Shift然後可以同時選取Center Vertically、Equal Widths與Equal Heights『如下圖示步驟2』，最後選取Add Constraints『如下圖示步驟3』。相同步驟設定第三個View與第一個View，最後設定第四個View與第一個View。這樣就設定完每一個View的寬高與中央對齊。
Step5：點選第一個View按住滑鼠右鍵拉到第一個Button來設定兩個物件之間的Constraints『如下圖示步驟1』，然後設定Center Vertically與Equal Heights。相同步驟設定第二個Button與第一個Button與設定第三個Button與第一個Button。
Step6：點選第一個Button『如下圖示步驟1』，然後點選Add New Alignment Constraints『如下圖示步驟2』，選擇Vertically In Container『如下圖示步驟3』，最後點選Add 1 Constraints『如下圖示步驟4』。這樣這個練習就完成了。
練習三（Stack View）說明：
Step1：先拉五個Button到View Controller的View，並分別設定Button Title為“”、“求知若飢”、“虛心若愚”、“賈伯斯”與“”。
Step2：按住Shift同時選取五個Button『如下圖示步驟1』，然後點選Embed In Stack『如下圖示步驟2』，將五個Button合成一個Stack View『如下面第二張圖』。
Step3：在Document Outline裡，點選Stack View，在右側Stack View內設定Distribution為Equal Spacing。這樣的意思就是五個Button之間距離相同。
Step4：在Document Outline裡，點選Stack View『如下圖示步驟1』，然後點選Add New Constraints『如下圖示步驟2』，將左右的距離設定為0PT『如下圖示步驟3』，最後點選Add 2 Constraints『如下圖示步驟4』。這樣就將Stack View與左右兩側的間距都設定為0PT。
Step5：在Document Outline裡，點選最左邊的Button『如下圖示步驟1』，然後點選Add New Constraints『如下圖示步驟2』，將Width設定為0PT『如下圖示步驟3』，最後點選Add 1 Constraints『如下圖示步驟4』。相同方式設定最右邊的Button。這個技巧是利用Equal Spacing的等距方式，將兩個Width為0的Button作為邊界。
Step6：在Document Outline裡，點選Stack View『如下圖示步驟1』，然後點選Add New Alignment Constraints『如下圖示步驟2』，選擇Vertically In Container『如下圖示步驟3』，最後點選Add 1Constraints『如下圖示步驟4』。這樣就將Stack View設定為垂直置中。這樣這個練習就完成了。
練習四：將圖片顯示在 iPhone 螢幕寬度的 1/3 ，高度 2/5 的位置，也就是圖片的 (x, y) 座標為 ( iPhone 螢幕寬度的 1/3， iPhone 螢幕高度的 2/5 )。(圖片的寬高請指定為 200 * 200 )
練習四（非Stack View）說明：
Step1：先拉一個Image View到View Controller的View，設定Image為Information1。
Step2：在Document Outline裡，點選Image View『如下圖示步驟1』，然後點選Add New Constraints『如下圖示步驟2』，將Width與Height設定為200PT『如下圖示步驟3』，最後點選Add 2 Constraints『如下圖示步驟4』。這樣就將Image View的Width與Height限制在200PT。
Step3：點選Image View按住滑鼠右鍵拉到View來設定兩個物件之間的Constraints『如下圖示步驟1』，選取Top Space to Safe Area『如下圖示步驟2』。
Step4：在Document Outline裡，點選剛剛建立的information1.top = Safe Area.top + 230『如下圖示步驟1』，然後修改右側Vertical Space Constraint，將Second Item設為Safe.Area.Bottom， Constant設為0，Multiplier為2/5『如下圖示步驟2』。從Auto Layout的公式可以得知，ImageView.Top = Safe.Area.Bottom * Multiplier + Constant，這意思就是Safe Area的Hight的2/5位置就是ImageView.Top。
Step5：點選Image View按住滑鼠右鍵拉到View來設定兩個物件之間的Constraints『如下圖示步驟1』，選取Leading Space to Safe Area『如下圖示步驟2』。
Step6：在Document Outline裡，點選剛剛建立的information1.leading = Safe Area.leading + 87『如下圖示步驟1』，然後修改右側Leading Alignment Constraint，將Second Item設為Safe.Area.Trailing， Constant設為0，Multiplier為1/3『如下圖示步驟2』。從Auto Layout的公式可以得知，ImageView.leading = Safe.Area.Trailing * Multiplier + Constant，這意思就是Safe Area的Width1/3位置就是ImageView.leading。這樣這個練習就完成了。
練習四（Stack View）說明：
因為只有一個Image View所以無法使用Stack View。
練習五：實作以下畫面， 2 個 label 水平排列，彼此的間距和邊界的間距都是 10， 文字可填入任何內容。當文字內容不夠塞滿畫面寬度時，如左圖所示，讓紅色 label 拉長，藍色 label 維持文字內容的長度。當文字太多，畫面無法完整呈現時，如右圖所示，讓藍色 label 顯示 …，紅色 label 維持文字內容的長度。 (提示: Content Hugging Priority 和 Content Compression Resistance Priority)
練習五（非Stack View）說明：
Step1：先拉兩個Label到View Controller的View，設定Label Text分別為”賈伯斯的經典名言：“與”求知若飢，虛心若愚!“，View的Background顏色分別設為藍色與紅色。
Step2：按住Shift同時選取兩個Label『如下圖示步驟1』，然後點選Add New Constraints『如下圖示步驟2』，將左右的距離都設定為10PT『如下圖示步驟3』，最後點選Add 3 Constraints『如下圖示步驟4』。這樣就將兩個Label之間的間距與左右的間距都設定為10PT。
Step3：按住Shift同時選取兩個Label『如下圖示步驟1』，然後點選Add New Alignment Constraints『如下圖示步驟2』，選擇Vertically In Container『如下圖示步驟3』，最後點選Add 2 Constraints『如下圖示步驟4』。這樣就將兩個Label設定為垂直置中。
Step4：點選”求知若飢，虛心若愚!“的Label『如下圖示步驟1』，然後選擇Show The Size Inspector『如下圖示步驟2』，將Content Hugging Priority的Horizontal設為250，Content Compression Resistance Priority的Horizontal設為751『如下圖示步驟3』。這樣這個練習就完成了。
Note：Content Hugging Priority的比較是相對比較，以剛剛的範例而言，就是兩個Label的Priority比較，因此絕對值並不重要，Priority 比較小的會被拉開變大 (變長或變高)。而Content Compression Resistance Priority的比較也是相對比較，Priority 比較小的會被壓縮變小，以剛剛的範例而言，就會讓無法顯示的文字變….。
練習五（非Stack View）說明：
這主要是練習Content Hugging Priority 與Content Compression Resistance Priority所以不需要Stack View。