ios Autolayout 按比例相對佈局

看到一篇講ios storyboard 按比例相對佈局的博客,挺不錯的轉下來了!

可到liumh.com查看。


本文記錄如何在 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寬度佔父視圖寬度百分比

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

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

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

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.Trailing 與 Superview.Trailing 間距佔 Superview.Width 的百分比

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

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

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

限定View的寬高比

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

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

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

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

關於文中所涉及到的方法,可在 AutoLayoutMultiplier 工程中查看。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章