iOS AutoLayout 百分比布局

2021-07-24 21:28:28 字數 1531 閱讀 8271

**:

本文記錄如何在 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 工程中檢視。

參考:

background position百分比原理

今天幫別人調 時,看到乙個樣式 background position 50 0 background size 100 auto 對background size 100 auto,意思是背景寬度為元素寬度 100 高度等比縮放。詳情可見css3 background。對background po...

「百分數」與「百分點」

百分數是用一百做分母的分數,在數學中用 來表示,在文章中一般都寫作 百分之多少 百分數與倍數不同,它既可以表示數量的增加,也可以表示數量的減少。運用百分數時,也要注意概念的精確。如 比過去增長20 即過去為100,現在是 120 比過去降低20 即過去是100,現在是 80 降低到原來的20 即原來...

css百分比定位和百分比尺寸

只有設定了定位的 relative,absolute,fixed 的元素才有left,top等屬性。子元素relative定位 百分比定位和百分比尺寸都是相對于父元素,無論父元素有沒有定位 子元素absolute定位 百分比定位和百分比尺寸都是相對於最近的定位了的祖先元素,如果沒有則相對於視窗。可以...