iOS AutoLayout 百分比佈局

 

iOS AutoLayout 百分比佈局 

 

---

本文記錄如何在 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設計自適應佈局 文中一圖: