iT 邦幫忙鐵人賽 Day 14: 使用製作一個切換顯示模式的方法!

使用 UISegmentControl 來切換我們 Cell 的檢視模式吧。

Jeremy Xue
3 min readOct 29, 2018

前言:

在我們這個 App 中,要做到切換兩種 Cell 的檢視模式其實很容易實現,因為我們只有兩種 Style,我們可以透過 UIButton 來做一個簡單樣式的切換或是使用 UISwitch 來開關。但是在 iOS 中有一個元件,不僅能夠做到切換兩種模式,甚至可以做到兩種以上的選擇,那就是我們的 UISegmentControl,這次教學我們會用UISegmentControl 來取代原先使用 BarButtonItem 的方式。

#UISegmentControl

並且我們可以在 StoryBoard 這邊設置每個 Segment 的內容:

設置完之後,我們可以看到畫面上我們的 SegmentControl 的 UI 就完成了,並且我們將它放在我們 bookshelfCollectionView 上:

接下來我們會先到我們的 BookshlefViewController 設置一個 Enum 叫做 BookCellStyle:

enum BookCellStyle: Int {
case simple
case detail
}

接下來我們還需要新增一個 UISegmentControl 的 Action,並且 Event 選擇 Value Change ,接著我們配合 BookCellStyle 這個 Enum 來處理:

接著我們只要在 cellForItemAt 新增一個判斷是來判斷我們的 CellStyle 是哪一種 BookCellStyle 即可:

switch cellStyle {
case .simple:
// 生成簡易檢視的 CollectionViewCell
case .detail:
// 生成詳細檢視的 CollectionViewCell
}

如此一來我們就能透過 UISegmentControl 來切換我們 Cell 的檢視模式啦~

#後記

這次教學就到這邊結束了,使用 UISegmentControl 在執行切換的操作比起 UIButton 還是 UISwitch 的擴充性好很多,也很容易對每個 Segment 執行額外的操作,加上它還有 selectedSegmentIndex 讓我們很容易地知道被點選的選項是哪個,如果再配合 enum 使用那更是強大。

--

--

Jeremy Xue
Jeremy Xue

Written by Jeremy Xue

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

No responses yet