LineageM Collection – 篩選卡片

Lineage M 這個遊戲在抽完卡片以後,卡片會進入收藏夾裡面,收藏到特定的卡組後會有一些 buff.

所以呢,開卡包的角子機效果做完以後,接著想做一個卡片的瀏覽工具。


LineageM Collection

  • 右側可以滑動瀏覽卡牌。
  • 左邊是篩選卡牌種類的按鈕,通過篩選來改變右邊的卡片種類。

CardModel

繼續沿用之前的 CardModel 定義卡片的分類以及卡片的圖案


CardViewCell

這次瀏覽圖片使用 UICollectionView 所以我們通過繼承 UICollectionViewCell 來顯示圖片。

根據拿到的 model 來改變底圖,和卡片圖案。


HomeViewController

這個介面的結構很簡單,頂部一張圖片,左側通過 StackView 放入5個按鈕,右側放置一個 UICollectionView.

建立基本卡組

一開始我們需要一套卡組 (cards) 來進行瀏覽,這裡準備了95張卡片圖案,隨機分配他們不同的 cardLevel.

篩選按鈕功能

當其中一個篩選按鈕被點下時,會執行 switchFilterTo 方法,並根據 filterType 執行幾個動作:

  • 更換按鈕樣式(按鈕圖 & 按鈕文字顏色)
  • 更新 currentFilterLevel
  • 更新 filteredCards(更具當前篩選的內容,重新從卡組中篩選出卡片)


UIColor Extension

為了方便更改一些顏色,這裡直接對 UIColor 進行擴充。


Reference

發表迴響

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

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料