Swift — 說說 堆疊視圖( UIStack View )

使用 StackView 配合 AutoLayout 來佈局 APP 畫面。

Jeremy Xue
Jul 26, 2018 · 6 min read

前言:

這次來談一個較無關程式碼的題目,是一個叫做 StackView 的元件,可以提供行或列佈局的視圖,可以透過它輕易的定義好在 StackView 中元件的佈局,不需對於所有元件進行 AutoLayout 的約束設置,StackView 會處理大部分的工作。

最近實作的Weather APP,TableView Cell 中的 AutoLayout 都是使用 StackView來配置。

因為常常會有人對這個元件有疑惑,常常在使用它後卻出現一堆約束有問題的紅線,又或是設置完後顯示結果畫面不如預期的想像,加上最近剛好設計APP 畫面時有使用到 StackView 來佈局,加上近期有人有發問,所以就使用它來作為我文章的主題。


Overview:

透過 StackView 讓你可以利用 AutoLayout 的強大功能,創建可以動態適應設備方向、螢幕尺寸和可用空間中的任何變化的用戶畫面。StackView 管理其 arrangeSubviews 屬性中所有視圖的佈局。這些視圖沿著 StackView 的 axis 排列,基於它們在 arrangeSubviews 陣列中的順序。精確的佈局依賴於 StackView 的 axis、distribution、alignment、spacing 以及其他屬性。

你負責定義 StackView 的位置和尺寸( 可選 )。然後 StackView 管理其內容的佈局和尺寸。

注意:放到 StackView ≠ 完成 AutoLayout

所以不是放到 StackView 就完成佈局了,你還必須設定 StackView 的位置和尺寸( 可選 )才算是完成。StackView 只有為其 arrangeSubviews 做佈局。


Configuring The Layout

我們可以透過設置以下值來調整 StackView 中的子視圖的佈局:

Axis.Vertical 手機畫面
Axis.Horizontal 手機畫面

這邊我們使用( = )符號來做一條分隔線,這邊我們必須讓下方的 Label 寬度大於上方的 Label 才好看得出差異。

在 Axis 為 Vertical 下,各個狀態下的對齊方式
在 Axis 為 Horizontal下,各個狀態下的對齊方式

這個屬性算是比較難以理解的屬性,所以我下面一樣用特殊的圖形表示來表示,希望大家能理解。

  • Fill:
    如同前面的 Fill 類似,一樣是把自身的範圍給佔滿。
  • Fill Equally:
    StackView 會平均分配各個子視圖的配置,例如下面的 StackView 垂直排列時,則會高度為其子視圖最高的高度。反之,水平排列則取其子視圖最寬的寬度。
  • Fill Proportionally:
    此屬性可能會覺得與 Fill 的屬性沒有差異,但他們兩者的差異在於 Fill 會根據自身的尺寸來決定在 StackView 中的尺寸。而 Fill Proportionally 則是會根據 StackView 的寬或高按比例分配給其中的子視圖。
  • Equal Spacing:
    此屬性簡單來說就會根據其 StackView 剩餘的可用空間的尺寸來分配其 StackView 子視圖間的間隔。
  • Equal Centering:
    此屬性與上面的 Equal Spacing 意思類似,只是它們是以其子視圖中心點的中心與中心距離是相同來做為配置。

若說明得還不夠清楚可以看看下面這邊文章,它有將其差異標示出來:


這個屬性就不用多加以贅述了,就是可以自定義 StackView 的間隔大小,但是這邊要注意,如果你沒有限制 StackView 的尺寸,那麼會加長或加寬 StackView。但是如果你有限制 StackView 的尺寸,那麼就會在期限至尺寸下增加間隔( 可能會造成跑版或失敗 )。


後記:

希望透過這篇文章大家能夠理解 StackView 這個元件,並且能活用這個功能強大的元件,讓大家在處理 AutoLayout 或是佈局上能夠更快速更方便。

Jeremy Xue

Written by

Hi, I’m Jeremy. [好想工作室 — iOS Developer]

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade