#2 透過 Extensions 及純程式實現 Auto Layout

Auto Layout

Ethan
Jul 9, 2021

如果今天想做出下圖的格狀版型,但不想處理繁瑣的 autolayout constraint,該如何用 Extensions 和純程式碼的方式實現呢?

  1. 讓紅色覆蓋整個螢幕。constraint 先通通寫在 viewDidLoad(){} 裡面。

2. 改用 extension 的寫法。這邊 top 和 bottom 不超出 safeArea。

3. 接著左右各加 16 的 padding。

4. 右上角放一個寬高都 100 的紅方塊。

4. 繼續加上藍色和綠色方塊。(注意限制條件)

5. 讓紅色方塊的高隨寬改變,且寬高相等。不要寫死藍色方塊的 size,加上 constraint 使其能自適應紅色方塊 size 的變化。

6. 換種寫法,畫面同5。

7. 突然想蓋掉整個畫面。

參考資料

LBTA — Advanced Swift: Making Programmatic Auto Layout Easy through Extensions

--

--

Ethan
Ethan

Written by Ethan

Life is what happens to you while you’re busy making other plans.

No responses yet