Swift纯Code之旅 Day17. 「复习 - 新增页面、TableView、TableViewCell」

前言

目前标签页面的画面及功能已经完成，接下来继续新增「重复」页面，算是再熟悉一下TableView的使用。

实作

一样新增一个ViewController，并命名为「RepeatAlarmViewController」。
之後我们看一下IPhone内建闹钟的「重复」页面长什麽样子。

有七个外观长的一模一样的长方体，当遇到很多长一样的长方体时，就可以使用TableView来实作它。

RepeatAlarmTableViewCell

建立TableViewCell，并命名为「RepeatAlarmTableViewCell」，
可以看到每个Cell只有最左边的一行字而已，因此只需要一个UILabel即可完成。

class RepeatAlarmTableViewCell: UITableViewCell {

    // 设定 RepeatAlarmTableViewCell的识别码
    static let identifier = "repeatAlarmTableViewcCell"
    
    // MARK: - IBOutLets
    let titleLabel: UILabel = {
        let label = UILabel()
        label.textColor = .white
        return label
    }()
    
    // MARK: - Init
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        self.backgroundColor = #colorLiteral(red: 0.1333159506, green: 0.1333458424, blue: 0.1419014633, alpha: 1)
        setViews()
        setLayouts()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    // MARK: - setViews
    func setViews() {
        // 将titleLabel加进这个TableViewCell内
        self.addSubview(titleLabel)
    }
    
    // MARK: - setLayouts
    func setLayouts() {
        titleLabel.snp.makeConstraints { make in
            // titleLabel的顶部，底部，左边都贴齐TableViewCell
            make.top.bottom.equalTo(self)
            // titleLabel的左边贴齐TableViewCell的左边间隔10
            make.leading.equalTo(self).offset(10)
        }
    }
}

RepeatAlarmViewController

先在刚刚新增的「RepeatAlarmViewController」内，建立一个TableView
并注册刚刚建立的「RepeatAlarmTableViewCell」
建立左边文字的阵列
实作TableView Delegate & DataSource
设定TableView的Layout

那整个「RepeatAlarmViewController」会像以下：

class RepeatAlarmViewController: UIViewController {

    // MARK: - Properties
    let titleDatas: [String] = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六",]
    
    // MARK: - IBLayOuts
    let repeatTableView: UITableView = {
        let tableView = UITableView()
        // 注册Cell
        tableView.register(RepeatAlarmTableViewCell.self, forCellReuseIdentifier: RepeatAlarmTableViewCell.identifier)
        tableView.bounces = false
        return tableView
    }()
    
    // MARK: - Life Cycle
    override func viewDidLoad() {
        super.viewDidLoad()
        initView()
        setViews()
        setLayouts()
    }
    
    // MARK: - Function
    func initView() {
        
        // 设定navigationBar上面的文字
        self.title = "重复"
        
        // 设定navigation BackButton Color
        self.navigationController?.navigationBar.tintColor = .orange
        
        // 设定该ViewController的背景色
        self.view.backgroundColor = #colorLiteral(red: 0.1097886786, green: 0.1098149046, blue: 0.1183715835, alpha: 1)
        
        self.repeatTableView.delegate = self
        self.repeatTableView.dataSource = self
    }
    
    func setViews() {
        self.view.addSubview(repeatTableView)
    }
    
    func setLayouts() {
        repeatTableView.snp.makeConstraints { make in
            make.top.equalTo(self.view.safeAreaLayoutGuide).offset(50)
            make.centerX.equalTo(self.view)
            make.width.equalTo(self.view)
            make.height.equalTo(350)
        }
    }
}

extension RepeatAlarmViewController: UITableViewDelegate, UITableViewDataSource {
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return titleDatas.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: RepeatAlarmTableViewCell.identifier, for: indexPath) as? RepeatAlarmTableViewCell else {  return UITableViewCell() }
        
        cell.titleLabel.text = titleDatas[indexPath.row]
        
        return cell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 50
    }
}

最後呢，到「AddAlarmViewController」内，变更一下TableView - didSelectRowAt()

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        
        switch indexPath.row {
        // 点击第一栏时，要做什麽
        case 0:
            let vc = RepeatAlarmViewController()
            self.navigationController?.pushViewController(vc, animated: true)
        // 点击第二栏时，要做什麽
        case 1:
            let vc = AlarmLabelViewController()
            
            // 让AddAlarmViewController成为
            // AlarmLabelViewController的updateAlarmLabelDelegate的执行者
            vc.updateAlarmLabelDelegate = self
            
            // 使用navigationController的pushViewController()，达到画面由右至左的效果。
            self.navigationController?.pushViewController(vc, animated: true)
        // 点击第三栏时，要做什麽
        case 2:
            break
        // 点击第四栏时，要做什麽
        case 3:
            break
        default:
            break
        }
    }

那现在程序应该会长这样子