Swift纯Code之旅 Day4.「画面分身术 - TableView & AutoLayout」

没错！到现在我们已经有了管理画面的TabbarController了，
今天呢，就要来将闹钟页面的画面给刻出来罗！

先来看看IOS闹钟的画面长得如何吧～

这边会发现整个画面是可以拉动的，并且每个您新增的闹钟内容的介面都是固定的，因此当符合

画面可以拉动

每个闹钟内容的介面都是一样的

以上两个条件时，就可以使用TableViewController来实现这个效果！

首先先进入AlarmViewController内，用Code新建一个TableViewController：

class AlarmViewController: UIViewController {

    let alarmTableView: UITableView = {
        let tableView = UITableView()
        return tableView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()

    }
   
}

上面Code的意思用中文翻译的话就是：
宣告一个型态为UITableView的变数：alarmTableView
这个TableView的属性设定就在 {} 内设定

举例来说：若要变更alarmTableView的背景色更改为灰色，就做以下的改动：

let alarmTableView: UITableView = {
        let tableView = UITableView()
        // 将alarmTableView的背景色更改为灰色
        tableView.backgroundColor = .lightGray
        return tableView
    }()

没有错，更改属性就是这麽的轻松。
那我们现在必须要把这个alarmTableView显示在整个萤幕上，因此这边就必须要做Layout(画面布局)了。

这里会使用套件：SnapKit进行画面的Layout，安装的方法有很多种，以下提供我常用的：

第一步

第二步(将Snapkit的网址贴上)

SnapKit网址取得：上google搜寻「Snapkit」，点进去github，复制该网站的网址即可。

第三步(一直Next即会看到安装完成画面)

安装完後首要步骤就是先import Snapkit：

import UIKit
import SnapKit

再来就是将刚刚建立的alarmTableView加进我们的画面中：

这边可以建立一个function集中管理元件(Label, button, tableView.....)

func setViews() {
        self.view.addSubview(alarmTableView)
    }

ＯＫ，alarmTableView已经被我们加入画面中了，但这时候程序会不知道这个alarmTableView要显示的位置以及大小为何，因此我们必须要为alarmTableView设Layout。

这边也可以建立一个function集中管理画面的Layout

func setLayouts() {
        alarmTableView.snp.makeConstraints { make in
            make.top.equalTo(self.view)
            make.bottom.equalTo(self.view)
            make.leading.equalTo(self.view)
            make.trailing.equalTo(self.view)
        }
    }

简单解释一下上述程序码大致的意思：alarmTableView的上方、左边、右边、底部都贴齐alarmViewController，意思就是整个画面都会是alarmTableView。

以上程序码还可以缩减为：

func setLayouts() {
        alarmTableView.snp.makeConstraints { make in
            make.top.bottom.leading.trailing.equalTo(self.view)
        }
    }

甚至是：
(更多的Snapkit的用法往後的文章应该会出现XD)

func setLayouts() {
        alarmTableView.snp.makeConstraints { make in
            make.edges.equalTo(self.view)
        }
    }

画面跟Layout设定完成後，要记得加在ViewDidLoad中哦，不然他们是不会被执行到的。

override func viewDidLoad() {
        super.viewDidLoad()
        setViews()
        setLayouts()
    }

现在你的Code应该会如下：

import UIKit
import SnapKit

class AlarmViewController: UIViewController {

    let alarmTableView: UITableView = {
        let tableView = UITableView()
        
        // 将alarmTableView的背景色更改为灰色
        tableView.backgroundColor = .lightGray
        return tableView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setViews()
        setLayouts()
    }
    
    func setViews() {
        self.view.addSubview(alarmTableView)
    }
   
    func setLayouts() {
        alarmTableView.snp.makeConstraints { make in
            make.edges.equalTo(self.view)
        }
    }
}

现在让我们执行看看程序吧！应该整个画面都会是alarmTableView哦