本文為原創，未經允許勿轉載

本文記錄如何在 UIStoryboard 或者 xib 中進行百分比佈局，包括

• View.Width 佔其 Superview.Width 的百分比
• View.Leading 與 Superview.Leading 間距佔 Superview.Width 的百分比
• View.Trailing 與 Superview.Trailing 間距佔 Superview.Width 的百分比
• View.Leading 與 Superview.CenterX 間距佔父檢視 Superview.Width 的百分比
• 限定View的寬高比
• 以 Superview.Width 寬度的某一百分比為 View 之間的間隔

在 iOS NSLayoutConstraint priority 一文中提到過 multiplier, 上述提到的百分比佈局都是基於 multiplier 實現的，下面來一一檢視其實現。

View.Width 佔其 Superview.Width 的百分比

該功能實現很簡單，以一個居中的按鈕 Button 為例，首先將按鈕相對於父容器新增 Equal Width 的 constraint，然後將它的 multiplier 設成 0.2，這樣就可實現 Button1 的寬度為父容器寬度的 0.2 倍。操作步驟如下:

View.Leading 與 Superview.Leading 間距佔 Superview.Width 的百分比

該功能實現其實是使 View.Leading 相對於 Superview.Trailing 佈局，然後再調整 multiplier 引數實現，如下操作步驟實現了將 Button 的左邊距離父檢視左邊界的距離站父檢視寬度的0.2倍，如下:

View.Trailing 與 Superview.Trailing 間距佔 Superview.Width 的百分比

該需求實現是使 View.Trailing 相對於 Superview.Trailing 佈局，然後再調整 multiplier 引數，需要注意的是使用 Reverse First And Second Item 調整如下表達式中 item1 和 item2 在等式中兩邊的位置。

item1.attribute1 = multiplier × item2.attribute2 + constant

以下步驟實現 Button 的 Trailing 距離父檢視右邊距為父檢視寬度的0.2倍，需要注意的是，此時的 multiplier 是 (1-0.2=0.8)，在修改 Button 約束值時，可以從頂部導航中看到約束表示式的變化:

View.Leading 與 Superview.CenterX 間距佔父檢視 Superview.Width 的百分比

有時間需要將 UI 元件相對於父檢視的中線進行佈局，比如將 View.Leading 與父檢視中線的距離設定為父檢視寬度20%, 即相對於父檢視 CenterX 的 multiplier 值為 1.4

限定View的寬高比

有時候我們需要保持檢視的寬高比不變進行縮放，此時可以設定其 Aspect Ratio 保持其在進行縮放時寬高比固定。

以 Superview.Width 寬度的某一百分比為 View 之間的間隔

要實現這個需求就沒有之前那麼簡單了，這需要新增一個間距檢視，設定每個檢視與相鄰間距檢視的邊緣間距約束，然後給所有的間距檢視新增相對於其父檢視的等寬約束，設定合適的比例即可。這裡借用 為iPhone 6設計自適應佈局 文中一圖:

參考:

如果覺得本文對你有幫助，就請用微信打賞我吧^_^

如果覺得本文對你有幫助，就請用微信打賞我吧^_^