Swift纯Code之旅 Day23. 「切割TableView(2) - 客制化TableViewHeader」

前言

昨天我们已经使用TableView的「titleForHeaderInSection()」将TableViewHeader做出来了，
但是可以发现TableViewHeader不论是底色或是字的颜色都不是我们要的，
因此今天就要来客制化一个View，并使用在TableViewHeader上面。

实作

首先先客制化一个View，这个View拥有几个特徵：

黑色的背景色
白色字体
拥有一个Label (用来显示文字)

那就马上来实作View吧！

建立一个View，并命名为：「AlarmHeaderView」，内容为以下：

可以发现我们在实作Label时，并没有给他文字内容，因为两个TableViewHeader要显示的文字内容不同
因此等等在实作TableViewHeader时，再给他文字内容即可。

class AlarmHeaderView: UIView {
    // MARK: - Properties
    // MARK: - IBOutLets
    
    // 建立一个Label，用来显示文字
    let headerViewLabel: UILabel = {
        let label = UILabel()
        // 该Label的字体颜色为白色
        label.textColor = .white
        label.font = UIFont.boldSystemFont(ofSize: 20)
        return label
    }()
    
    // MARK: - Init
    override init(frame: CGRect) {
        super.init(frame: frame)
        // 该View的背景色为黑色
        self.backgroundColor = .black
        setViews()
        setLayouts()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    // MARK: - Function
    // MARK: - setViews
    func setViews() {
        self.addSubview(headerViewLabel)
    }
    // MARK: - setLayouts
    func setLayouts() {
        headerViewLabel.snp.makeConstraints { make in
            make.top.bottom.equalTo(self)
            make.leading.equalTo(self).offset(10)
        }
    }
}

2.回到「AlarmViewController」，并在TableView中的「viewForHeaderInSection()」加入以下Code

於此时将「AlarmHeaderView」内的 Label 加上文字。

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        switch section {
        case 0:
            // 建立一个View，这个View为我们建立的「AlarmHeaderView」
            let view: AlarmHeaderView = {
                let view = AlarmHeaderView()
                
                // 将该HeaderView的内容文字更改为：「睡眠｜起床闹钟」
                view.headerViewLabel.text = "睡眠｜起床闹钟"
                
                // 回传该View，作为第一个Setcion的HeaderView
                return view
            }()
            return view
        case 1:
            // 建立一个View，这个View为我们建立的「AlarmHeaderView」
            let view: AlarmHeaderView = {
                let view = AlarmHeaderView()
                
                // 将该HeaderView的内容文字更改为：「其他」
                view.headerViewLabel.text = "其他"
                
                // 回传该View，作为第一个Setcion的HeaderView
                return view
            }()
            return view
        default:
            break
        }
        return UIView()
    }

上述程序码的功用是：将我们创建的「AlarmHeaderView」当作是TableView的HeaderView，
因此现在画面应该会像下面这样

如果不太能理解的话，可以稍微去动动「AlarmHeaderView」的属性，例如背景色将它更改为蓝色

override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = .systemBlue
        setViews()
        setLayouts()
    }

再执行看看，就可以发现TableView的HeaderView的背景色也变成蓝色了