Swift — 說說 堆疊視圖（ UIStack View ）

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

前言：

這次來談一個較無關程式碼的題目，是一個叫做 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：配置視圖的軸線，簡單說就是 StackView 整體的排列方式（ 行或列 ）。

Axis.Vertical 手機畫面

Axis.Horizontal 手機畫面

# Alignment：排列的子視圖的對齊垂直於 StackView 的軸。

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

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

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

# Distribution

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

• Fill：
  如同前面的 Fill 類似，一樣是把自身的範圍給佔滿。

• Fill Equally：
  StackView 會平均分配各個子視圖的配置，例如下面的 StackView 垂直排列時，則會高度為其子視圖最高的高度。反之，水平排列則取其子視圖最寬的寬度。

• Fill Proportionally：
  此屬性可能會覺得與 Fill 的屬性沒有差異，但他們兩者的差異在於 Fill 會根據自身的尺寸來決定在 StackView 中的尺寸。而 Fill Proportionally 則是會根據 StackView 的寬或高按比例分配給其中的子視圖。

• Equal Spacing：
  此屬性簡單來說就會根據其 StackView 剩餘的可用空間的尺寸來分配其 StackView 子視圖間的間隔。

• Equal Centering：
  此屬性與上面的 Equal Spacing 意思類似，只是它們是以其子視圖中心點的中心與中心距離是相同來做為配置。

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

Exploring the 5 UIStackView Distribution Types for iOS Dev

# Spacing

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

後記：

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