Swift纯Code之旅 Day24. 「各个TableViewHeader下的Cell显示(1)」

前言

我们已经将TableView的Header给设置完毕了，那可以看到IPhone内建的画面：
两个Header底下的Cell样式不同，马上来看看该如何做出这种效果吧

实作

1.先建立第一个Header的Cell，可以看到这个画面上有一个Label与一个Button。
因此建立Cell并命名为「WakeUpTableViewCell」，并实作出元件、识别码(identifier)与执行Layout

建立完後别忘记在要用这个Cell的TableView中注册哦！

class WakeUpTableViewCell: UITableViewCell {

    static let identifier = "wakeUpTableViewCell"
    
    // MARK: - IBOutLets
    let wakeUpLabel: UILabel = {
        let label = UILabel()
        // label的文字
        label.text = "没有闹钟"
        // label的文字颜色
        label.textColor = .gray
        return label
    }()
    
    let settingButton: UIButton = {
        let button = UIButton()
        // button的文字
        button.setTitle("设定", for: .normal)
        // button的文字颜色
        button.setTitleColor(.orange, for: .normal)
        return button
    }()
    
    // MARK: - Init
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        // 该cell的背景色为透明
        self.backgroundColor = .clear
        setViews()
        setLayouts()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    // MARK: - setViews
    func setViews() {
        self.addSubview(wakeUpLabel)
        self.addSubview(settingButton)
    }
    
    // MARK: - setLayouts
    func setLayouts() {
        wakeUpLabel.snp.makeConstraints { make in
            
            // top 跟 bottom 离cell的top 与 bottom 20个单位的原因是，
            // 要让这个Cell看起来上跟下有空间
            make.top.equalTo(self).offset(20)
            make.bottom.equalTo(self).offset(-20)
            make.leading.equalTo(self).offset(10)
        }
        
        settingButton.snp.makeConstraints { make in
            
            // button 的顶部与底部设置等同於 wakeUpLabel
            make.top.bottom.equalTo(self)
            make.trailing.equalTo(self).offset(-10)
        }
    }
}

2. 到「AlarmViewController」内的TableView 「cellForRowAt」，新增以下Code

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        switch indexPath.row {
        // 第一个Header要显示哪个Cell
        case 0:
            // 将刚刚实作的Cell实体化，并显示於画面上
            guard let cell = tableView.dequeueReusableCell(withIdentifier: WakeUpTableViewCell.identifier, for: indexPath) as? WakeUpTableViewCell else { return UITableViewCell() }
            return cell
        default:
            // 其余的Header都显示预设Cell
            return UITableViewCell()
        }
        
    }

此时执行看看吧！

疑？还是没有呀！
原来是忘记在TableView 「numberOfRowsInSection」中告知TableView每个Header下各要显示几个Cell了

因此再新增以下Code

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        switch section {
        case 0:
            // 第一个Header下显示一个Cell即可
            return 1
        default:
            // 其余不显示任何Cell
            return 0
        }
    }

就成功罗！