iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
自我挑戰組

30天Swift純Code之旅 - 鬧鐘篇系列 第 25

Swift純Code之旅 Day25. 「各個TableViewHeader下的Cell顯示(2)」

前言

我們已經將第一個Section下的Cell設置完畢了,接下來馬上來實作第二個Section的Cell,
可以看到有兩個Label,一個UISwitch(之前有介紹過的)
讓我們的門面更好看吧!
https://ithelp.ithome.com.tw/upload/images/20211005/20108999n897zkhBM2.png

實作

  1. 一樣新增一個TableViewCell,並命名為「AlarmOtherTableViewCell」,並新增以下Code
  • 顯示時間的Label
let alarmTimeLabel: UILabel = {
        let label = UILabel()
        // Label字體大小
        label.font = UIFont.systemFont(ofSize: 50)
        // 先暫時給個假定時間
        label.text = "05:50"
        // Label文字顏色
        label.textColor = .lightGray
        return label
    }()
  • 顯示鬧鐘註解的Label
let alarmNoteLabel: UILabel = {
        let label = UILabel()
        label.text = "吃香蕉"
        label.textColor = .lightGray
        return label
    }()
  • 將accrssory設定為開關按鈕
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        self.backgroundColor = .clear
        // 設定accessoryView 為 UISwitch
        self.accessoryView = UISwitch(frame: .zero)
        setViews()
        setLayouts()
    }

接著設定Layou和將元件加入Cell,整體的Code看起來會像以下

class AlarmOtherTableViewCell: UITableViewCell {

    static let identifier = "alarmOtherTableViewCell"
    
    // MARK: - IBOutLets
    let alarmTimeLabel: UILabel = {
        let label = UILabel()
        // Label字體大小
        label.font = UIFont.systemFont(ofSize: 50)
        // 先暫時給個假定時間
        label.text = "05:50"
        // Label文字顏色
        label.textColor = .lightGray
        return label
    }()
    
    let alarmNoteLabel: UILabel = {
        let label = UILabel()
        label.text = "吃香蕉"
        label.textColor = .lightGray
        return label
    }()
    
    // MARK: - Init
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        self.backgroundColor = .clear
        // 設定accessoryView 為 UISwitch
        self.accessoryView = UISwitch(frame: .zero)
        setViews()
        setLayouts()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    // MARK: - setViews
    func setViews() {
        self.addSubview(alarmTimeLabel)
        self.addSubview(alarmNoteLabel)
    }
    
    // MARK: - setLayouts
    func setLayouts() {
        alarmTimeLabel.snp.makeConstraints { make in
            make.top.equalTo(self)
        }
        
        alarmNoteLabel.snp.makeConstraints { make in
            make.top.equalTo(alarmTimeLabel.snp.bottom)
            make.bottom.equalTo(self).offset(-10)
        }
    }
}

Cell做好之後,接著就是去要用這個Cell的TableView去註冊他,因此回到「AlarmViewController」內
找到「alarmTableView」,加入Code去註冊他

let alarmTableView: UITableView = {
        
        let tableView = UITableView()
        
        // 註冊 WakeUpTableViewCell
        tableView.register(WakeUpTableViewCell.self, forCellReuseIdentifier: WakeUpTableViewCell.identifier)
        // 註冊 AlarmOtherTableViewCell
        tableView.register(AlarmOtherTableViewCell.self, forCellReuseIdentifier: AlarmOtherTableViewCell.identifier)
        // 將alarmTableView的背景色更改為灰色
        tableView.backgroundColor = .black
        
        return tableView
    }()

註冊完後,只要把TableView Delegate設定一下Cell應該就會出來囉!
因此找到TableView Delegate的「cellForRowAt」,並新增Code讓Cell顯示

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        switch indexPath.section {
        // 第一個Header要顯示哪個Cell
        case 0:
            // 將實作的WakeUpTableViewCell實體化,並顯示於第一個Section的畫面上
            guard let cell = tableView.dequeueReusableCell(withIdentifier: WakeUpTableViewCell.identifier, for: indexPath) as? WakeUpTableViewCell else { return UITableViewCell() }
            return cell
        case 1:
            // 將實作的AlarmOtherTableViewCell實體化,並顯示於第二個Section的畫面上
            guard let cell = tableView.dequeueReusableCell(withIdentifier: AlarmOtherTableViewCell.identifier, for: indexPath) as? AlarmOtherTableViewCell else { return UITableViewCell() }
            return cell
        default:
            // 由於 cellForRowAt 這個function一定要return 一個 TableViewCell
            // 因此其餘的Section皆回傳空的Cell
            return UITableViewCell()
        }
    }

別忘了到TableView Delegate的「numberOfRowsInSection」內,新增要回傳的Cell個數

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        switch section {
        case 0:
            // 第一個Section下顯示一個Cell即可
            return 1
        case 1:
            // 第二個Section先暫時顯示一個Cell
            return 1
        default:
            // 其餘不顯示任何Cell
            return 0
        }
    }

執行程式看看吧!
https://ithelp.ithome.com.tw/upload/images/20211005/20108999WP2DD3Dlv5.png

哇靠!太美了吧/images/emoticon/emoticon02.gif
但有沒有發現UISwitch的背景色怪怪的?好像太黑了

明天再來對UISwitch好好修改造改造/images/emoticon/emoticon41.gif


上一篇
Swift純Code之旅 Day24. 「各個TableViewHeader下的Cell顯示(1)」
下一篇
Swift純Code之旅 Day26. 「客製化Switch按鈕」
系列文
30天Swift純Code之旅 - 鬧鐘篇30

尚未有邦友留言

立即登入留言