在 ViewController 中集成 TableView(iOS 12,Swift 4)

在 iOS 开发中,如果需要用到表格,Xcode 提供了一个非常方便的 TableViewController,但表格占据了全部窗口。如果还需要在屏幕上放置其他元素,比如按钮,编辑框等等(如下图所示),还是需要在通用的 ViewController 上实现。



本文即介绍如何不借助 TableViewController,而是在 ViewController 中进行表格和其他元素的布局与实现。

新建一个 ViewController

首先在 Storyboard 中新建一个 ViewController,设计 UI 布局,假设其包含了编辑框、表格、选择器、按钮等:

这里要注意,如果要使用表格,仅仅将 TableView 控件放入窗体中是不够的,还需要将 TableViewCell 控件放入 TableView 中,并设置好该 Cell 的 Identifier 方可。



接着在 Xcode 菜单中选择 File –> New –> File,接着选择 Cocoa Touch Class,新建一个 UIViewController 的派生类:

在 Storyboard 中给这个新的 ViewController 指定对应的类,则创建工作完毕。

连接 TableView 控件到代码中

这就是个常规操作了,按住 Ctrl 键,然后点击 Storyboard 中的TableView 控件,并拖动到右侧代码编辑器中对应的位置后松手,取名、确定。代码应大致如下所示:

class raiseQuestionViewController: UIViewController {
@IBOutlet weak var questionTableView: UITableView!

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

编辑代码

在对应的类中进行修改,主要修改有三处:

  1. 继承类,新增 UITableViewDelegateUITableViewDataSource
  2. viewDidLoad() 函数中新增初始化代码
  3. 新增两个针对 TableView 的初始化函数(可以根据自己的需要添加更多函数,从而完善表格功能)
class raiseQuestionViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
@IBOutlet weak var questionTableView: UITableView!

override func viewDidLoad() {
super.viewDidLoad()
questionTableView.delegate = self
questionTableView.dataSource = self
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 4
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
if (indexPath.row == 0) {
cell.textLabel?.text = "A:"
} else if (indexPath.row == 1) {
cell.textLabel?.text = "B:"
} else if (indexPath.row == 2) {
cell.textLabel?.text = "C:"
} else {
cell.textLabel?.text = "D:"
}
return cell
}
}

最后运行代码,就可以看到效果如下:



于是,我们成功地没有依靠 TableViewController 实现了表格。