Swift纯Code之旅 Day9. 「TableView(1) - TableView Cell内容制作」

前言

昨天已经将TableView给建立完毕了，今天来跟大家聊聊TableViewCell的建立方法，
首先介绍一下TableViewCell，TableViewCell就是TableView上面的栏位，
一个栏位就等於一个Cell。

第一步：观察

实作TableViewCell前，必须先观察Cell中有哪些元件，才知道要时做出哪些元件出来。
观察结果如下：

会发现共有两种不同的Cell:

包含两个UILabel的Cell
包含一个UILabel和一个Button的Cell

因此会需要实作两个TableViewCell，马上来实作吧。

建立TableViewCell

这边会先建立包含两个UILabel的TableViewCell，
那要如何建立TableViewCell呢？跟着以下做看看吧～

Step. 1

Step. 2

Step. 3 (将这个TableViewCell命名为：「addAlarmContentTableCell」)

Step. 4 完成

建立完成後内容应该会如下：

class addAlarmContentTableViewCell: UITableViewCell {

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }
}

但由於我们是用Code建立的，因此必须要先将里面的 awakeFormNib() & setSelected() 删除，
并该改为以下：

class addAlarmContentTableViewCell: UITableViewCell {

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

接着就来实作TableViewCell的内容吧！

实作TableViewCell内容

首先建立两个UILabel，一个命名为：titleLabel，另一个为：contentLabel

let titleLabel: UILabel = {
        let label = UILabel()
        label.textColor = .white
        return label
    }()

    let contentLabel: UILabel = {
        let label = UILabel()
        return label
    }()

一样要记得加进 TableViewCell 里面

func setViews() {
        self.addSubview(titleLabel)
        self.addSubview(contentLabel)
    }

然後做Layout

func setLayouts() {
        titleLabel.snp.makeConstraints { make in
            // titleLabel 的顶部跟底部贴齐TableViewCell的顶部跟底部
            make.top.bottom.equalTo(self)
            // titleLabel 的左边距离TableViewCell的左边间隔10
            make.leading.equalTo(self).offset(10)
        }

        contentLabel.snp.makeConstraints { make in
            // contentLabel 的顶部、底部都贴齐TableViewCell
            make.top.bottom.equalTo(self)
            // contentLabel 的右边距离TableViewCell的右边间隔50
            // 为了不跟TableView Accessory重叠
            make.trailing.equalTo(self).offset(-50)
        }
    }

设定完後记得将SetViews() & setLayouts() 加入init()内，然後执行看看吧！
你的画面应该会长下面这样：