iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
0
Mobile Development

諸神黃昏下的 iOS 工程師系列 第 11

D11 - 爭什麼?摻在一起做成 StackView 啊~笨蛋

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

? 隕石小故事

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

Overview

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


為什麼要用 StackView 呢?

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

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

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

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

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


實作

|使用 StackView 配合 isHidden 屬性

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

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

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

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

讓我們看看成果吧:

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

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

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

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

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

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


Summary

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


上一篇
D10 - 神說:「要有 Picker」,就有了 Picker
下一篇
# D12 - 躺著玩,坐著玩,趴著玩... 還是不要亂玩好了 QQ
系列文
諸神黃昏下的 iOS 工程師31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言