[Xcode 實際操做]9、實用進階-(25)使用Storyboard(故事版)的約束功能，使項目快速適配各類分辨率的設備

目錄：[Swift]Xcode實際操做

本文將演示使用故事版的約束功能，使項目快速適配各類分辨率的設備。

在項目導航區打開並編輯主故事版【Main.storyboard】。

在當前故事版中，已經存在一個適配4寸屏幕的界面，

點擊設備名稱，更改設備類型。在彈出的模擬器列表中，選擇一款擁有4.7寸屏幕的模擬器。

而後經過系統提供的約束功能，對各尺寸屏幕進行適配。

在故事版文檔框架區中的【View Controller】，點擊顯示【MainView】視圖下的全部子元素。

該視圖是添加的自定義視圖，尺寸與根視圖相同，而且包含了頁面中的全部元素。

創建約束的原則是首先須要對父視圖進行約束，而後再對子視圖進行約束。

因此先對當前視圖進行約束。在【MainView】視圖上按下鼠標右鍵，而後拖動到根視圖，

以建立視圖與根視圖之間的約束關係。在彈出的約束類型列表中，

選擇【Leading Space to Container】視圖左邊界與容器外間距之間，保持約束關係。

即不管出於那種尺寸的屏幕，二者之間的距離都保持不變。

視圖周圍出現了紅色邊框，而且在故事版文檔框架區的右上角出現了紅色錯誤標識。

這是由於系統還不清楚視圖右邊界、以及寬度和高度的約束關係。

在【MainView】視圖上按下鼠標右鍵，而後拖動到根視圖，在彈出的約束類型列表中，

若是在約束名稱左側，出現一個白色圓點，則標識該約束類型已經存在。

選擇【Trailing Space to Container】視圖右邊界與容器外間距之間，保持約束關係。

使用一樣的方式，繼續設置當前視圖與根視圖之間的約束關係。在彈出的約束類型列表中，

選擇【Vertical Spacing to Top Layout Guide】視圖與頂部佈局參考線，保持固定的垂直距離。

即不管處於那種尺寸的屏幕，二者間距都保持不變。

使用一樣的方式，繼續設置當前視圖與根視圖之間的約束關係。在彈出的約束類型列表中，

選擇【Vertical Spacing to Bottom Layout Guide】視圖底部佈局參考線，保持固定的垂直距離。

即不管處於那種尺寸的屏幕，二者間距都保持不變。

在模擬器中，暫時還看不到變化，由於剛剛調整的視圖，與根視圖具備相同的背景顏色。

不過在適配父視圖以後，如今能夠給子視圖添加約束。

而後選擇分割器子視圖，也就是在視圖控制器中，那條較粗的灰色橫線。

在分割線視圖上按下鼠標右鍵，而後拖動到父視圖。

由於父視圖與根視圖，創建了約束關係，因此子視圖只要和父視圖機創建約束關係便可。

參照MainView拖動到根視圖的操做進行。

將分割線視圖的左右邊界和上下邊界添加約束：

【Leading Space to Container】

【Top Space to Container】

【Trailing Space to Container】

如今只要固定分割線高度便可。

按下鼠標右鍵，而後拖動到分割線自身的其餘位置，創建自身的約束。

在彈出的約束類型列表中，選擇【Height】選項，

即不管出於哪種尺寸的屏幕，其高度始終保持不變。

【創建約束的原則】：首先須要對右向箭頭所在的控件的父視圖進行約束，而後再對箭頭頭所在的控件視圖進行約束

---

在添加完約束後，如何修改一個控件的位置？

點擊【顯示和隱藏檢查器】圖標，打開檢查器面板。

點擊【尺寸檢查器圖標】，進入尺寸和位置設置面板。

點擊右側的垂直滾動條，跳轉到下方的約束區域。

在【Constraints】區域，能夠看到當前控件的全部約束信息，

點擊底部間距【Buttom Space to】的【Edit】編輯圖標，彈出約束編輯面板。

【Constant】:30，修改常量值。此時按鈕的位置已經發生了變化。