標籤系列收尾啦～～

加入叉叉按鈕方便刪除標籤

首先在 TagCollectionViewCell 裡面加入一個 UIButton 方便使用者點擊，用以刪除標籤：

class TagCollectionViewCell: UICollectionViewCell {
    // ...略

    let button: UIButton = {
        var button = UIButton()
        button.setTitle("⤫", for: .normal)
        button.setTitleColor(MMColor.red, for: .normal)
        button.sizeToFit()
        return button
    }()

    // ...略
}

加入按鈕後，勢必得調整排版的設定，主要重點是：

1. 標籤文字在左邊
2. 按鈕跟在標籤之後
3. 按鈕不能被壓縮
4. 總寬度（按鈕、標籤文字）最長限制在螢幕的一半

首先是標籤本身的 Auto Layout 修改：

private func addSubviews() {
    contentView.addSubview(label)
    contentView.addSubview(button)

    label.translatesAutoresizingMaskIntoConstraints = false
    label.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true
    label.leadingAnchor.constraint(equalTo: contentView.layoutMarginsGuide.leadingAnchor).isActive = true
    label.trailingAnchor.constraint(equalTo: button.leadingAnchor).isActive = true

    button.translatesAutoresizingMaskIntoConstraints = false
    button.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true
    button.trailingAnchor.constraint(equalTo: contentView.layoutMarginsGuide.trailingAnchor).isActive = true
    button.setContentCompressionResistancePriority(.required, for: .horizontal)
}

緊接著是每個標籤 Cell 寬度計算：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    if indexPath.row == tags.count {
        // ...略
    } else {
        let cell = TagCollectionViewCell()
        cell.label.text = tags[indexPath.row]
        cell.label.sizeToFit()

        return CGSize(width: min(cell.label.frame.width + cell.button.frame.width + cell.layoutMargins.right + cell.layoutMargins.left, tagCollectionView.frame.width / 2), height: 50);
    }
}

完成後，最後我們在用 Protocol、Delegate 的設計模式，監聽叉叉按鈕被碰觸時，就要移除該標籤，因為之前有實作類似的概念，就不再列出，請直接看程式碼差異：GitHub。

點擊 UICollectionView 叉叉按鈕以外的地方，要啟動鍵盤進入標籤輸入模式

備註：因為 UICollectionView 新增 Cell 後，要馬上捲動到最後一個標籤輸入框，並顯示鍵盤輸入，需要一些非同步的處理，目前還沒有想到好方法可以解決，先暫時調整讓標籤輸入框固定為第一個顯示的 Cell。詳情請見：GitHub。

目前我們是讓標籤輸入框出現後，自動進入輸入模式，但實際上，這個快速記帳的頁面還會有其它輸入框，所以我們必須調整成「使用者點擊 UICollectionView 時，再進入標籤輸入模式」。

首先，先加入一個 Boolean 用來判斷使用者目前是否想新增標籤。

class QuickCreateViewController: UIViewController {
    // ...略
    var startCreatingTags = false

    // ...略
}

extension QuickCreateViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
        if startCreatingTags, cell is TagTextFieldCollectionViewCell {
            (cell as? TagTextFieldCollectionViewCell)?.textField.becomeFirstResponder()
        }
    }

    // ...略
}

然後，為了偵測使用者「碰觸」UICollectionView 的事件，我們偷偷放了一個跟 UICollectionView 一樣大小，隱藏的 UIButton，來偵測使用者「碰觸」的事件，一但使用者開始編輯後，就把這個 UIButton 隱藏起來。

請參考 GitHub。

之後會加入鍵盤上方的 AccessoryView 方便使用者切換輸入框、隱藏鍵盤。

收尾

最後，調整一下顏色、介面位置、圓角等等。

程式碼：GitHub

UI 設計美感有非常大的進步空間...

終於可以暫時結束標籤輸入的系列了，接下來要加入快速記帳中，錄音的功能。