iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 8
0

標籤系列收尾啦~~

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

首先在 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 設計美感有非常大的進步空間...

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


上一篇
Money Mom - 實作標籤輸入 Part 3
下一篇
Money Mom - 快速記帳錄音功能
系列文
iOS 三十天上架記帳 APP30

1 則留言

0
Don
iT邦新手 5 級 ‧ 2017-12-27 10:03:53

堅持!!

我要留言

立即登入留言