前言

昨天已經增加了 collection view 來切換不同飲料清單，雖然有標題列告知使用者在哪個選單，但是因為沒有顏色變化，實在是看不順眼，今天就來實作一下。因為意想不到的簡單。

1.把 Collection View 的元件右鍵拖曳到程式裡面

我們命名為 myCollectionView

@IBOutlet var myCollectionView: UICollectionView!

2.調用func collectionView(didSelectItemAt indexPath: IndexPath)

這邊是 didSelectItemAt，顧名思義就是點選 collection view item 後才會執行，所以這邊是點選 item 後會變色，但是不點選的話就繼續保持同樣顏色

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    let selectedCell:UICollectionViewCell = myCollectionView.cellForItem(at: indexPath)!
    selectedCell.contentView.backgroundColor = UIColor(red: 200/256, green: 105/256, blue: 125/256, alpha: 1)     
}

3.調用 func collectionView(didDeselectItemAt indexPath: IndexPath)

這變調用的就是 didDeselectItemAt，就是取消點選 collection view item。我們在這邊讓背景色 clear
clear的預設設定如下：
open class var clear: UIColor { get } // 0.0 white, 0.0 alpha

func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
    let cellToDeselect:UICollectionViewCell = myCollectionView.cellForItem(at: indexPath)!
    cellToDeselect.contentView.backgroundColor = UIColor.clear
    }

完成，效果如下

後記

因為今天有個約會，就沒有寫得很複雜了。
雖然 App 看起來已經該有都有，但是還是很多地方不滿意，明天再花點時間來優化一下吧～