讓我們把元件放到 StackView 中，做出一些特別的效果吧！

? 隕石小故事

常常會在開發中碰到「當不同條件時，顯示不同的樣式」，也就是在不同條件上，可能畫面上會有一些改變。因此，一開始我們的元件可能都會存在在畫面上，只是我們根據不同條件來決定他的顯示／隱藏。
但是，也是很發生畫面上太多元件需要判斷了，而每個判斷的條件又各不同。讓開發中的我頭昏眼花。

Overview

在 iOS 中，我們有一個強大的元件叫做 UIStackView，其作用可以想像為一個 AutoLayout 的功能，可以把不同的元件 embed 到其中，並透過 stackView 的屬性來操作其內容間隔、排列方式等等。這個單元就讓我們來看看可以用 StackView 做一些有趣的功能吧！

為什麼要用 StackView 呢？

對我來說，如果某些操作是需要統一管理或有關聯性時，或是用它來進行類似 AutoLayout 的動作時，我就會採用 StackView 來將他們綁在一起，這邊示範一個簡單的例子：

上面是我們用 StackView 製作的畫面，其中 A, B, C 三個 Label 都沒有設置額外的 constraint 條件，而是我們的 StackView 去進行設置自身的 constraint ：

並且在設置完之後，更改 Distribition 為 Fill Equally 來使 A, B, C 三個 Label 同等大小。

這時你可以思考一下，如果沒有用 StackView 做起來會有多麻煩？?

因為這篇文章我們會直接實作 StackView 相關內容，如果想了解更多 StackView 的基本操作／內容。可以參考我之前寫的文章。（絕對是工商 xD）

• UIStackView 設置教學：讓APP 畫面佈局更方便快捷• AppCoda
  

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

• Swift — 玩玩 堆疊視圖（ UIStack View ）
  

實作

｜使用 StackView 配合 isHidden 屬性

這邊我們來製作一個簡單的選單，使用者可以點選我們某個按鈕後，展開顯示其他的按鈕，首先我們選單畫面如下：

之後我們會透過第一個菜單按鈕來操控後面三個按鈕的顯示／隱藏，而我們 StackView 原本就能透過 isHidden 這個屬性來實現一些特殊的動畫效果。所以，在這邊我們就來編寫我們顯示和隱藏的程式碼：

大概講解一下這邊的流程。首先，我們透過 menuStackView 的 arrangedSubViews 來獲取到 menuStackView 中的按鈕們，接著我們會讓他 alpha 屬性以及 isHidden 屬性相反，接著調用 layoutIfNeeded 來更新 layout。

這邊的 delay: 0.15 * Double(index) 只是為了讓動畫輪流出現。

讓我們看看成果吧：

接著讓我們新增一個 stackView，並設置為固定畫面高為 view.height 的一半，並且其中有 3 個 imageView，其圖片對應我們的三個按鈕，之後我們會透過剛剛選單的下方按鈕來控制這個 stackView 的內容顯示：

接著我們對這個新增 stackView 設定一個在橫向時的 Axis 設置，讓我們在裝置在橫向時，變成水平向的 stackView：

接著我們會設置選單按鈕的 tag，之後會透過這個 tag 來控制 stackView 相對應 index 的 arrangedSubView。最後，讓我們連結 @IBAction 到程式碼中：

我們依樣是透過 isHidden 屬性配合動畫來做操作，接著讓我們看看成果吧：

然後我們也可以隨意地將我們的畫面轉橫，而我們 stackView 的排列方式也會改變：

當然水平方向下的 stackView 也能夠完整實現顯示／隱藏的功能：

Summary

StackView 一直是我蠻常使用的元件，不僅是上面隱藏／顯示元件時是一個幫助，而對於我在 AutoLayout 時也是一大福音，有時候覺得 embed 一個 stackView 後可以讓我少拉好幾個 constraint，而且修改時也不會太複雜，因為主要都會圍繞在 stackView 上。所以，也歡迎大家一起嘗試看看使用 StackView 吧，體驗其中的優勢吧！