iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 11
1
Software Development

iOS 三十天上架記帳 APP系列 第 11

Money Mom - 將快速記帳資料顯示於首頁 Part 2

前言

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

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

  • 左上:金額(沒資料時顯示錢號)
  • 右上:播放錄音的按鈕(沒資料時顯示叉叉)
  • 下方:顯示標籤用的橫向 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

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


上一篇
Money Mom - 將快速記帳資料顯示於首頁 Part 1
下一篇
Money Mom - 將快速記帳資料顯示於首頁 Part ∞
系列文
iOS 三十天上架記帳 APP30

1 則留言

0
陳董 Don
iT邦新手 5 級 ‧ 2017-12-30 09:24:54

我需要工人智慧幫我記帳~

我要留言

立即登入留言