Swift纯Code之旅 Day13. 「TableView(4) - 使用两个TableViewCell」

前言

现在我们就差第四个栏位需要让他有开关的效果，由於这边是使用TableView实作的，
因此我打算使用两个TableViewCell来达到这个效果：

建立第二个 TableViewCell

首先建立一个TableViewCell，并命名为：「AddAlarmButtonTableViewCell」
一样建立这个TableViewCell的识别码

static let identifier = "addAlarmButtonTableViewCell"

一样建立一个Label，并设定Layout对齐萤幕左边间隔10

// 建立Label
let titleLabel: UILabel = {
    let label = UILabel()
    label.textColor = .white
    return label
}()
    
// Layout
titleLabel.snp.makeConstraints { make in
    // titleLabel 的顶部跟底部贴齐TableViewCell的顶部跟底部
    make.top.bottom.equalTo(self)
    // titleLabel 的左边距离TableViewCell的左边间隔10
    make.leading.equalTo(self).offset(10)
}

一样去更改昨天说的accessoryView，这次使用UISwitch去更改

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        self.backgroundColor = #colorLiteral(red: 0.1734634042, green: 0.1683282256, blue: 0.1771324873, alpha: 1)
        // 设定accessoryView 为 UISwitch
        self.accessoryView = UISwitch(frame: .zero)
        setViews()
        setLayouts()
    }

这边TableViewCell的设定就完成罗。

实作一个TableView使用两个TableViewCell

让我们看到之前做的TableView Delegate 内的 cellForRowAt():

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        // 告知TableView要使用哪个Cell
        guard let cell = tableView.dequeueReusableCell(withIdentifier: AddAlarmContentTableViewCell.identifier, for: indexPath)
                as? AddAlarmContentTableViewCell else { return UITableViewCell() }

        // 设定Cell的TitleLabel内容
        cell.titleLabel.text = addAlarmTitles[indexPath.row]
        return cell
    }

由於现在要使用两个Cell，因此必须要在 cellForRowAt() 动点手脚
( 这边使用Switch Case )

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        switch indexPath.row {
        
        // 当TableView显示到第四栏时，显示刚刚新增的AddAlarmButtonTableViewCell
        case 3:
            
            // 告知TableView要使用哪个Cell
            guard let cell = tableView.dequeueReusableCell(withIdentifier: AddAlarmButtonTableViewCell.identifier, for: indexPath) as? AddAlarmButtonTableViewCell else { return UITableViewCell() }
            
            // 设定Cell的TitleLabel内容
            cell.titleLabel.text = addAlarmTitles[indexPath.row]
            return cell
            
        // 其他的栏位，显示之前新增的AddAlarmContentTableViewCell
        default:
            
            // 告知TableView要使用哪个Cell
            guard let cell = tableView.dequeueReusableCell(withIdentifier: AddAlarmContentTableViewCell.identifier, for: indexPath)
                    as? AddAlarmContentTableViewCell else { return UITableViewCell() }

            // 设定Cell的TitleLabel内容
            cell.titleLabel.text = addAlarmTitles[indexPath.row]
            
            // 设定Cell的contentLabel内容
            cell.contentLabel.text = addAlarmDetails[indexPath.row]
            return cell
        }

由於我们是第四个栏位才需要让Accessory显示开关按钮，因此使用Switch Case判断，
当跑到第四个栏位时，就显示刚刚新增的addAlarmButtonTableViewCell。

现在执行看看吧！

爆掉啦！让我们仔细看一下这个Error的诉求
这个Error是在诉说：刚刚新增的「addAlarmButtonTableViewCell」必须要被这个TableView给注册过，
不然会不认得他，那麽马上来注册吧！

let addAlarmTableView: UITableView  = {
        let tableView = UITableView()
        // 注册 addAlarmContentTableViewCell
        tableView.register(AddAlarmContentTableViewCell.self,
                           forCellReuseIdentifier: AddAlarmContentTableViewCell.identifier)
        
        // 注册 addAlarmButtonTableViewCell
        tableView.register(AddAlarmButtonTableViewCell.self,
                           forCellReuseIdentifier: AddAlarmButtonTableViewCell.identifier)
        
        tableView.bounces = false
        return tableView
    }()

接着再在执行看看