前面介紹了這麼多總算要開始介紹怎麼拉約束了！

要開啟 Document Outline 記得把星星處的選項開啟

我們可以用 View 的方式直接在視圖中拉需要的方位，也可以透過 Document Outline 來拉約束(夠熟悉自己介面的話用 Document Outline 來拉會比較快喔！）

具體操作步驟 - 快捷鍵介紹(以下都以Picker View來當示範)：

• Control + 鼠標點擊移動：調整當前選取元件和目標元件之間的約束
  

這裡我們先選取了Picker View 在和 Safe Area 做約束
下面會在介紹更詳細的內容

• Option + 鼠標移動：觀察當前選取元件和目標元件之間的間距
  

這裡我們選取 Picker View 在和 Button 做比較
(可以發現他是和最先靠近的邊緣做比較)

• Option + 鼠標點擊移動： 複製相同元件出來
  

這裡我們把 Picker View 直接給複製一份到下方

• Command + 鼠標點擊移動：觀察移動後和移動前約束的間距差異
  

這裡我們把 Picker View 往右下調整，大家可以觀察差異喔！

具體操作步驟 - 用法介紹：

左邊有 Safe Area 跟在他上方的 View 很多人剛學習時很容易弄不清楚他們之間的關係。

Safe Area 是除了最上方瀏海內，和最底部的Home Indicator之外的設計範圍

要比較 Safe Area 只能透過 Document Outline 來做調整

而 最頂部的 View 則是所有白色範圍內都是

約束調整-1

• Leading Space to Safe Area (Leading Space，前置空間至安全區域): 控制元件左側或開始側與安全區域的距離。Leading Space 為左側。

• Top Space to Safe Area (Top Space，頂部空間至安全區域): 控制元件頂部與安全區域的距離。這有助於確保元件不會被狀態欄或其他系統界面遮擋。

• Trailing Space to Safe Area (Trailing Space，後置空間至安全區域): 控制元件右側或結束側與安全區域的距離。Trailing Space 為右側。

• Bottom Space to Safe Area (Bottom Space，底部空間至安全區域): 控制元件底部與安全區域的距離。這有助於確保元件不會被底部的標籤欄或Home Indicator遮擋。

• Center Horizontally in Safe Area (水平居中於安全區域): 使元件在安全區域內水平居中。

• Center Vertically in Safe Area (垂直居中於安全區域): 使元件在安全區域內垂直居中。

• Equal Width to Safe Area (等於安全區域的寬度): 將元件的寬度設置為與安全區域的寬度相同。

• Equal Height to Safe Area (等於安全區域的高度): 將元件的高度設置為與安全區域的高度相同。

約束調整-2

• Horizontal Spacing (水平間距): 控制兩個元件之間的水平距離。
• Vertical Spacing (垂直間距): 控制兩個元件之間的垂直距離。
• Top : 控制元件的頂部與另一元件的頂部或底部的距離。
• Center Vertically : 讓元件在垂直方向上與另一元件居中對齊。
• First Baseline : 控制元件的第一行基線與另一元件的第一行基線的距離。
• Bottom : 控制元件的底部與另一元件的頂部或底部的距離。
• Leading : 控制元件的左側與另一元件的左側或右側的距離。
• Center Horizontally : 讓元件在水平方向上與另一元件居中對齊。
• Trailing : 控制元件的右側與另一元件的左側或右側的距離。

約束調整-3(介紹開頭那張圖右下方區塊)前一天也有介紹喔

中間的選項

• Width : 設置元件的固定寬度。
• Height : 設置元件的固定高度。

右邊第2個選項

• Reset to Suggested Constraints : 如果您不滿意當前的約束設置，可以使用此選項將其重置為Xcode建議的約束。這有助於快速解決約束衝突和佈局問題。
• Clear Constrains : 完全移除所選元件的所有約束。這樣做可以讓您重新開始設置約束，或者將元件的佈局改為非約束模式。