Expandable Buttons – 折疊式按鈕

在 Web 應用中,我們常常會看到畫面的右下角會提供一個按鈕,點下去後會展開更多的按鈕,用來提供一些功能(例如分享到 Facebook/Line/Weibo)

這次要在 iOS 中實現這個功能。


ExpandableButtons

藍色的按鈕負責顯示/隱藏其餘的四個按鈕。


SKExpandableView

為了讓這個折疊式按鈕可以被 reuse ,這裡建立一個繼承於 UIView 的 SKExpandableView.

排版的時候我們從上到下依次放入按鈕,功能按鈕通過一個 Array 來保管,藍色按鈕命名為 baseButton

並且給每個按鈕加入 touchUpInside 事件

負責處理每個按鈕 touchUpInside 事件的方法:

當 baseButton 被點下的時候,就會執行 switchMenu 方法,將功能性的按鈕通過動畫來隱藏或顯示。

Delegate

通過建立 Delegate 來讓調用者能夠得知哪一個功能性的按鈕觸發了 touchUpInside 事件


Example

在 HomeViewController 中加入 SKExpandableView 並設定 delegate 方法

實作 delegate 方法

當 SKExpandableView 中的功能性按鈕觸發 touchUpInside 事件的時候跳出提示


筆記

  • 問題:將 UIView 設定 alpha = 0 和 isHidden = true 是相同的嗎?(目前我認為是不同的,alpha = 0 依舊會被畫出來,而 isHidden = true 就不會觸發繪畫)
  • TODO:在  SKExpandableView 中 setupButtons 的時候,可以根據拿到的 frame 來放置按鈕,取代 hard code.

參考

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *