iOS通过storyboard创建UITableViewController

412 阅读3分钟

1.在Main.storyboard中添加UITableViewController

iShot_2023-08-16_15.43.39.png

iShot_2023-08-16_15.44.00.png

UITableViewControllerUIViewController的子类,它的根视图是UITableView,UITableViewCell 代表每一行,内部有一个UIView(ContentView)控件,作为其他元素的父控件。

iShot_2023-08-16_16.02.07.png

2.新建UITableViewController class

新建新建CocoaTouchClass文件并选择UITableViewController类型。

iShot_2023-08-16_16.04.36.png

iShot_2023-08-16_16.04.51.png

注意Targets是否勾选,如果没有勾选要选上。

iShot_2023-08-16_16.05.39.png

新建完之后在Main.storyboard中关联,同样的要确保Inherit Module From Target勾选上。

iShot_2023-08-16_16.14.07.png

3.UITableviewController

新建的类是继承于UITableViewController,而UITableViewController继承于UIViewController,又遵循两个协议UITableViewDelegateUITableViewDataSource

iShot_2023-08-16_16.23.51.png iShot_2023-08-16_16.36.39.png

Table view data source中主要有这3个函数进行数据配置。

numberOfSections(in tableView: UITableView) -> Int
返回table view中的section总数通常我们将其设置为1如果要具有多个section,请将此值设置为大于1的数字

tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
返回指定Section中的总行数

tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
返回指定行的Cell,配置显示的内容

UITableViewDelegate中比较主要的事件函数:

tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)
点击每一行内容触发的方法

tableView(_ tableView: UITableView, moveRowAt fromIndexPath: IndexPath, to: IndexPath)
对每一行进行排序的时候触发的方法

storyboard里面已经关联了这两个协议:

iShot_2023-08-17_13.54.04.png

tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell函数中:

dequeueReusableCell 返回指定重用标识符的可重用表视图单元格对象,并将其添加到表中
identifier 标识要重用的单元格对象的字符串该参数不能为空
indexPath 指定单元格位置的索引路径始终指定数据源对象提供给您的索引路径此方法使用索引路径根据单元格在表视图中的位置执行其他配置

identifierMain.storyboard中设置,选中TabViewCell,然后在Identifier中输入ID:

iShot_2023-08-17_14.18.48.png

iShot_2023-08-17_14.21.57.png

最后在tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell函数中输入前面填写的ID:

iShot_2023-08-17_14.22.24.png

默认情况下Cell包含text,secondaryTextimage,通过defaultContentConfiguration() 函数,检索单元格样式的默认列表内容配置,最后赋值给cell.contentConfiguration:

iShot_2023-08-17_14.40.46.png

iShot_2023-08-17_14.41.06.png

Main.storyboard中也有些Cell的预设Style:

iShot_2023-08-17_14.51.28.png

如果需要自定义的话,需要在Main.storyboard把控件添加到ContentView中:

iShot_2023-08-17_15.12.47.png

4.UITableViewCell

控件创建完后,要新建UITableViewCell文件:

iShot_2023-08-17_15.56.34.png

然后在Main.storyboard绑定class:

iShot_2023-08-17_16.00.19.png

接下来在Main.storyboard拖动控件到Class中:

iShot_2023-08-17_16.04.13.png

iShot_2023-08-17_16.05.03.png

iShot_2023-08-17_16.06.21.png

iShot_2023-08-17_16.06.48.png

如果需要重新修改控件名称或者删除,需要在Main.storyboard取消关联:

iShot_2023-08-17_16.23.31.png

默认情况下let cell = tableView.dequeueReusableCell(withIdentifier: "TestCellID", for: indexPath) 中的cell的类型是 UITableViewCell,需要转换成前面新建的TableViewCell:

iShot_2023-08-17_16.13.42.png

iShot_2023-08-17_16.15.27.png

然后就可以使用里面的控件然后赋值了:

iShot_2023-08-17_16.26.28.png

如果想Cell的高度随着内容动态变更需要设置UITableViewRowHeight属性为Automatic,然后要设置ContentView中内容的上下约束。

5.动态显示数据

先创建一个数据结构体:

iShot_2023-08-17_16.42.42.png

然后再建个数据数组: iShot_2023-08-17_16.43.03.png

最后再获取数据:

iShot_2023-08-17_16.43.21.png

iShot_2023-08-17_16.46.15.png

最后显示样子:

iShot_2023-08-17_16.54.06.png

6.增删数据

如果想要新增一条数据先要在测试的数据数组添加,然后tableView.insertRows函数添加数据:

iShot_2023-08-17_17.02.39.png

iShot_2023-08-17_17.12.56.png

如果想要左滑删除,要用tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) 函数,判断editingStyle == .delete,然后对数据进行删除,还有调用tableView.deleteRows(at: [indexPath], with: .fade) 函数或者调用tableView.reloadData() 函数刷新数据:

iShot_2023-08-17_17.17.34.png

iShot_2023-08-17_17.18.18.png

7.控件点击事件

想要获取Cell里面控件的点击事件,要使用addTarget函数将将目标对象和操作方法与控件关联,先在Cell添加@IBOutlet weak var btn: UIButton!,然后tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell中添加cell.btn.addTarget函数,其中有三个参数:

target: 目标对象,即调用其操作方法的对象如果你指定nil, UIKit在responder chain中搜索一个响应指定动作消息的对象,并将消息传递给那个对象

action:标识要调用的操作方法的选择器您可以指定一个选择器,其签名与清单1中的任何签名匹配该参数不能为空

controlEvents:指定调用操作方法的特定于控件的事件的位掩码总是指定至少一个常量有关可能的常量列表,请参见UIControl.Event

iShot_2023-08-17_17.37.24.png

iShot_2023-08-17_17.37.29.png

iShot_2023-08-17_17.37.10.png

文章结束。