前言

又在一次發揮工程師的半殘美術能力，絞盡腦汁想出了一個畫面，如下：

每個記帳畫面的記錄，都是有三個元件組成：

• 左上：金額（沒資料時顯示錢號）
• 右上：播放錄音的按鈕（沒資料時顯示叉叉）
• 下方：顯示標籤用的橫向 UICollectionView（沒資料時用灰色區塊代替）

其實不應該允許三個都沒有資料，後續會在做一些檢查、限制。

製作顯示快速記帳的 Cell：QuickRecordTableViewCell

首先，先初始化三個必要元件，如下：

let amountLabel: UILabel = {
    let label = UILabel()
        label.font = UIFont.preferredFont(forTextStyle: .largeTitle)
        label.textColor = MMColor.white
        label.backgroundColor = MMColor.black
        label.textAlignment = .center
        return label
    }()

    let playButton: UIButton = {
        let button = UIButton()
        button.setTitle("▶", for: .normal)
        button.setTitleColor(MMColor.white, for: .normal)
        button.backgroundColor = MMColor.black
        return button
    }()

    let tagCollectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        return UICollectionView(frame: CGRect.zero, collectionViewLayout: layout)
    }()
}

緊接著將這些元件加入 UITableViewCell 中，因爲我們預計讓上方顯示金額、播放按鈕的部分有圓角，所以先在上方加入一個大的 UIView，再將金額、播放按鈕放入其中，方便削成圓角，如下：

override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)

    let topInnerView = UIView()
    topInnerView.layer.cornerRadius = 4
    topInnerView.layer.masksToBounds = true
    topInnerView.layoutMargins = .zero

    topInnerView.addSubview(amountLabel)
    topInnerView.addSubview(playButton)

    contentView.addSubview(topInnerView)
    contentView.addSubview(tagCollectionView)

    topInnerView.translatesAutoresizingMaskIntoConstraints = false
    // ...因不想佔太多篇幅，所以略過：）

    playButton.translatesAutoresizingMaskIntoConstraints = false
    // ...因不想佔太多篇幅，所以略過：）

    amountLabel.translatesAutoresizingMaskIntoConstraints = false
    // ...因不想佔太多篇幅，所以略過：）

    tagCollectionView.translatesAutoresizingMaskIntoConstraints = false
    // ...因不想佔太多篇幅，所以略過：）

    tagCollectionView.dataSource = self
    tagCollectionView.delegate = self
    tagCollectionView.backgroundColor = MMColor.white
    tagCollectionView.register(ReadOnlyTagCollectionViewCell.self, forCellWithReuseIdentifier: NSStringFromClass(ReadOnlyTagCollectionViewCell.self))
}

Auto Layout 的程式碼部分請前往 GitHub 瞭解更多。

加入顯示標籤的 UICollectionView

我們已經將 UICollectionView 加入 UITableViewCell，接下來我們只要實做 UICollectionView 的 DataSource、Delegate 即可，如下：

extension QuickRecordTableViewCell: UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return tags.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: NSStringFromClass(ReadOnlyTagCollectionViewCell.self), for: indexPath) as! ReadOnlyTagCollectionViewCell

        cell.label.text = tags[indexPath.row]

        return cell
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let cell = ReadOnlyTagCollectionViewCell()
        cell.label.text = tags[indexPath.row]
        cell.label.sizeToFit()

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

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets.zero
    }
}

備註：因爲顯示在 UITableView 裡面的標籤不需要刪除按鈕，所以我另外實做了一個 ReadOnlyTagCollectionViewCell，這兩種標籤的物件應該要合在一起，不過爲了趕文章，所以先偷懶一下。

成果展示

程式碼：GitHub

下一篇開始我們會專注在處理錄音檔的部分。