[TOC]
以下配方演示使用相對簡單的約束集來創建常見行為。 將這些示例用作基本構建塊來創建更大,更復雜的布局。
要查看這些配方的源代碼,請參閱 [Auto Layout Cookbook](https://developer.apple.com/sample-code/xcode/downloads/Auto-Layout-Cookbook.zip) 項目。
## 簡單的單一視圖
這個配方定位一個紅色的視圖,以便它在所有四個邊緣上以固定的邊緣填充其父視圖。

### 視圖和約束
在 Interface Builder 中,將視圖拖到場景中,然后調整其大小以填充場景。 使用 Interface Builder 的指導方針來選擇相對于超級視圖邊緣的正確位置。
> 注意
> 不必關注獲得視圖在像素單位精確位置。 設置約束后,系統將計算其正確的大小和位置。
只要視圖就位,請設置以下約束:

1. Red View.Leading = Superview.LeadingMargin
2. Red View.Trailing = Superview.TrailingMargin
3. Red View.Top = Top Layout Guide.Bottom + 20.0
4. Bottom Layout Guide.Top = Red View.Bottom + 20.0
### 屬性
要使視圖呈現紅色背景色,請在“屬性”檢查器中設置以下屬性:
| View | Attribute | Value |
| --- | --- | --- |
| Red View | Background | Red |
### 討論
這個配方中的限制使紅色視圖與超級視圖的邊緣保持固定的距離。 對于前沿和后沿,將視圖固定在超級視角邊緣。 對于頂部和底部,請將您的視圖固定到頂部布局指南和底部布局指南。
> 注意
> 系統自動設置根視圖的邊距,使其具有適當的前后邊距(16或20點,取決于設備)和0點頂部和底部邊距。 這使您可以輕松地在任何控制欄(狀態欄,導航欄,選項卡欄,工具欄等)下滾動內容。
> 但是,這個配方需要將內容放置在工具條下方(如果有的話)。 可以簡單地將紅色視圖的前端和后端固定到超視圖的前端和后端邊距; 但是必須相對于布局指南設置自己的頂部和底部邊距。
默認情況下,Interface Builder 的標準間距在視圖和其超級視圖的邊緣之間為 20.0 點,在同級視圖之間為 8.0 點。 這意味著你應該在紅色視圖的頂部和狀態欄的底部之間使用 8.0 點的空間。 但是,當 iPhone 處于橫向狀態時,狀態欄消失,并且沒有狀態欄,8.0 點的空間看起來太窄。
始終選擇最適合應用的布局。 這個配方為頂部和底部使用固定的 20 點邊距。 這使約束邏輯盡可能簡單,并且在所有方向上仍然看起來合理。 其他布局在固定的 8 點余量下可能會更好。
如果想要自動適應工具欄的存在或不存在的布局,請參閱下一節內容:自適應單一視圖。
## 自適應單一視圖
這個配方固定一個單一的藍色視圖,以便它可以在所有四個邊緣周圍填充其超級視圖。 但是,與簡單單視圖配方中的邊距不同,此配方的頂部邊距基于視圖的上下文進行調整。 如果有狀態欄,視圖將放置在狀態欄下方的標準間距(8.0點)。 如果沒有狀態欄,則視圖放置在超視圖邊緣下方 20.0 個點。
******
可以在并排查看簡單視圖和自適應視圖時看到這一點。

### 視圖和約束
在界面構建器中,將視圖拖放到場景中,然后調整其大小以使其填充場景,并使其邊緣與指南對齊。 然后如圖所示設置約束。

1. Blue View.Leading = Superview.LeadingMargin
2. Blue View.Trailing = Superview.TrailingMargin
3. Blue View.Top = Top Layout Guide.Bottom + Standard (Priority 750)
4. Blue View.Top >= Superview.Top + 20.0
5. Bottom Layout Guide.Top = Blue View.Bottom + Standard (Priority 750)
6. Superview.Bottom >= Blue View.Bottom + 20.0
### 屬性
要使視圖呈現藍色背景色,請在“屬性”檢查器中設置以下屬性:
| View | Attribute | Value |
| --- | --- | --- |
| Blue View | Background | Blue |
### 討論
此配方為藍色視圖的頂部和底部創建自適應邊距。 如果有一個 bar ,視圖的邊緣放置在離 bar 8點的位置。 如果沒有 bar,邊緣定位在距離父視圖邊緣20點的位置。
此配方使用布局指南正確放置其內容。 系統根據任何 bar 的存在和大小設置這些指南的位置。 頂部布局指南位于任何頂部條的底部邊緣(例如,狀態欄和導航欄)。 底部布局指南沿任何底部條的頂部邊緣定位(例如,選項卡條)。 如果沒有 bar ,系統將布局指南沿著父視圖的相應邊緣定位。
配方使用一對約束來建立自適應行為。 第一個約束是必需的,大于或等于約束。 這個約束保證了藍色視圖的邊緣總是距離超級視圖的邊緣至少 20 點。 實際上,它定義了最低 20 點的保險值。
接下來,可選約束會嘗試將視圖與相應的布局指南相距 8 個點。 因為這個約束是可選的,所以如果系統不能滿足約束條件,它仍然會嘗試盡可能接近,約束就像一個彈簧般的力量,將藍色視圖的邊緣拉向它的布局指南。
如果系統沒有顯示 bar ,那么布局指南就等于父視圖的邊緣。 藍色視圖的邊緣不能同時超出視角邊緣 8 點和 2 0點(或更多)。 因此,系統不能滿足可選約束。 盡管如此,它試圖盡可能地接近它 - 將邊距設置為最低 20 點。
如果存在 bar ,則可以滿足這兩個約束條件。 所有 bar 至少20點高。 因此,如果系統將藍色視圖的邊緣放置在距離條邊緣 8 個點的位置,則保證距離父視圖的邊緣超過 20 個點。
這種技術通常用于創建自適應布局,使用一對作用相反方向的力的約束。 將再次看到它,當我們查看具有固有內容大小的視圖中的內容擁抱和抗壓縮(CHCR)優先級時 [Views with Intrinsic Content Size](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/ViewswithIntrinsicContentSize.html#//apple_ref/doc/uid/TP40010853-CH13-SW1)。
## 兩個等寬視圖
這個配方并排列出了兩個視圖。 無論父視圖的界限如何變化,兩個視圖總是具有相同的寬度。 他們一起填補了父視圖,四面都有一個固定的邊界,并且在它們之間有一個標準間距。

### 視圖和約束
在 Interface Builder 中,拖出兩個視圖并放置它們以使它們填滿場景,使用布局指南設置場景中對象之間的正確間距。
不要關注使視圖具有相同的寬度。 只要得到粗糙的相對位置,并讓這些約束完成艱苦的工作。
只要視圖就位,請按照圖示設置約束。

1. Yellow View.Leading = Superview.LeadingMargin
2. Green View.Leading = Yellow View.Trailing + Standard
3. Green View.Trailing = Superview.TrailingMargin
4. Yellow View.Top = Top Layout Guide.Bottom + 20.0
5. Green View.Top = Top Layout Guide.Bottom + 20.0
6. Bottom Layout Guide.Top = Yellow View.Bottom + 20.0
7. Bottom Layout Guide.Top = Green View.Bottom + 20.0
8. Yellow View.Width = Green View.Width
### 屬性
在屬性檢查器中設置視圖的背景顏色。
| View | Attribute | Value |
| --- | --- | --- |
| Yellow View | Background | Yellow |
| Green View | Background | Green |
### 討論
此布局明確定義兩個視圖的頂部和底部邊距。 只要這些邊距是相同的,這些視圖將隱含地是相同的高度。 但是,這不是這種布局的唯一可能的解決方案。 不要將綠色視圖的頂部和底部固定到超級視圖,而是可以將它們設置為等于黃色視圖的頂部和底部。 明確對齊頂部和底部邊緣會使視圖具有相同的垂直布局。
即使是這樣一個相對簡單的布局,也可以使用許多不同的約束條件來創建。 有些顯然比其他的好,但其中許多可能大致相當。 每種方法都有其自身的優點和缺點。 這個配方的方法有兩個主要優點。 首先(也是最重要的),它很容易理解。 其次,如果您刪除了其中一個視圖,布局將基本保持不變。
從視圖層次結構中刪除視圖也會刪除該視圖的所有約束。 這意味著,如果刪除了黃色視圖,那么約束1,2,4,6和8將全部被刪除。 但是,這仍然留下了三個約束來保持綠色視圖。 只需添加一個約束即可定義綠色視圖前端的位置,并且布局是固定的。
主要缺點是需要手動確保所有頂部約束和底部約束相等。 改變其中之一的常數,并且視圖變得明顯不均勻。 在實踐中,當使用 Interface Builder 的 Pin 工具創建約束時,設置一致的常量相對容易。 如果使用拖放操作來創建約束條件,則會變得更加困難。
當面對多個同樣有效的約束集合時,請選擇最容易理解和最容易在布局上下文中維護的集合。 例如,如果您將多個不同大小的視圖對齊,則可能最容易限制視圖的Center X屬性。 對于其他布局,關于視圖的邊緣或高度和寬度可能更容易推理。
有關為布局選擇最佳約束集的更多信息,請參閱[ Creating Nonambiguous, Satisfiable Layouts](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/AnatomyofaConstraint.html#//apple_ref/doc/uid/TP40010853-CH9-SW16) 。
## 兩個不同寬度視圖
這個配方非常類似于兩個等寬視圖配方,有一個顯著的不同。 在這個配方中,橙色視圖寬度總是是紫色視圖的兩倍。

### 視圖和約束
像以前一樣,拖出兩個視圖并放置它們,使它們大致位于正確的位置。 然后,如圖所示設置約束。

1. Purple View.Leading = Superview.LeadingMargin
2. Orange View.Leading = Purple View.Trailing + Standard
3. Orange View.Trailing = Superview.TrailingMargin
4. Purple View.Top = Top Layout Guide.Bottom + 20.0
5. Orange View.Top = Top Layout Guide.Bottom + 20.0
6. Bottom Layout Guide.Top = Purple View.Bottom + 20.0
7. Bottom Layout Guide.Top = Orange View.Bottom + 20.0
8. Orange View.Width = 2.0 x Purple View.Width
### 屬性
在屬性檢查器中設置視圖的背景顏色。
| View | Attribute | Value |
| --- | --- | --- |
| Purple View | Background | Purple |
| Orange View | Background | Orange |
### 討論
此配方在寬度約束上使用乘數。 乘數只能用于約束視圖的高度或寬度。 它可以讓你設置兩個不同視圖的相對大小。 或者,您可以在視圖自身的高度和寬度之間設置約束,以指定視圖的高寬比。
Interface Builder可讓您使用多種不同格式指定乘數。 您可以將乘數寫為十進制數(2.0),百分比(200%),分數(2/1)或比率(2:1)。
## 兩個具有復雜寬度的視圖
這個配方幾乎與兩個不同寬度的視圖相同; 但是,在這里您使用一對約束來為視圖寬度定義更復雜的行為。 在這個配方中,系統嘗試使紅色視圖的寬度與藍色視圖的寬度相同,但藍色視圖的最小寬度為150點。 因此,在縱向 iPhone 上,視圖幾乎是相同的寬度,而在橫向上,這兩個視圖都較大,但紅色視圖現在是藍色的兩倍。

### 視圖和約束
將視圖放置在畫布上,然后按照圖示設置約束。

1. Blue View.Leading = Superview.LeadingMargin
2. Red View.Leading = Blue View.Trailing + Standard
3. Red View.Trailing = Superview.TrailingMargin
4. Blue View.Top = Top Layout Guide.Bottom + 20.0
5. Red View.Top = Top Layout Guide.Bottom + 20.0
6. Bottom Layout Guide.Top = Blue View.Bottom + 20.0
7. Bottom Layout Guide.Top = Red View.Bottom + 20.0
8. Red View.Width = 2.0 x Blue View.Width (Priority 750)
9. Blue View.Width >= 150.0
### 屬性
在屬性檢查器中設置視圖的背景顏色。
| View | Attribute | Value |
| --- | --- | --- |
| Blue View | Background | Blue |
| Red View | Background | Red |
### 討論
這個配方使用一對約束來控制視圖的寬度。 可選的比例寬度約束可以拉動視圖,使得紅色視圖的寬度是藍色視圖的兩倍。 但是,所需的大于或等于約束為藍色視圖定義了恒定的最小寬度。
實際上,如果父視圖的前后邊距之間的距離為 458.0 或更大(150.0 + 300.0 + 8.0),則紅色視圖是藍色視圖的兩倍。 如果邊距之間的距離較小,則藍色視圖設置為150.0寬點,紅色視圖填充剩余空間(視圖之間具有8.0點邊距)。
您可能會認識到這是 “自適應單一視圖 ”配方中引入的模式的另一種變體。
您可以通過添加其他約束來擴展此設計,例如,使用三個約束。 設置紅色視圖的最小寬度所需的約束條件。 用于設置藍色視圖最小寬度的高優先級可選約束和用于設置視圖之間首選大小比率的較低優先級可選約束。
>原文地址
>[Simple Constraints ](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithSimpleConstraints.html#//apple_ref/doc/uid/TP40010853-CH12-SW1)