iOS StoryBord百分比布局

標籤： ios

autolayout

2016-11-25 09:05

4327人閱讀收藏

舉報

ios（14）

作者同類文章x

目錄(?)

[+]

viewwidth 佔其 superviewwidth 的百分比

viewleading 與 superviewleading 間距佔 superviewwidth 的百分比

viewtrailing 與 superviewtrailing 間距佔 superviewwidth 的百分比

viewleading 與 superviewcenterx 間距佔父檢視 superviewwidth 的百分比

限定view的寬高比

以 superviewwidth 寬度的某一百分比為 view 之間的間隔

歡迎到個人部落格: liumh.com檢視本文。

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

在 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設計自適應布局文中一圖:

關於文中所涉及到的方法，可在 autolayoutmultiplier 工程中檢視。

參考:

頂 2

踩 0

我的同類文章

ios（14）