表格视图控制器

17 Mar 2025 | 5 分钟阅读

在本教程的前几部分中，我们讨论了表格视图，它用于在 iOS 应用程序中以表格形式显示垂直可滚动列表。

我们还创建了应用程序，在其中我们向 UIViewController 类添加了表格视图，并使用了自定义原型单元格。但是，到目前为止，在本教程中，我们还没有使用表格视图控制器来管理表格视图。

在本教程的这一部分中，我们将使用表格视图控制器来处理表格视图。我们还将使用原型单元格和静态单元格创建示例项目。

表格视图控制器可以定义为专门用于管理表格视图的视图控制器。表格视图控制器负责维护表格及其数据和事件。为此，它使用其表格视图属性的委托和数据源。表格视图控制器是继承 UIViewController 的 UITableViewController 类的实例。

当我们需要仅使用我们的视图控制器显示表格视图并且没有其他内容时，我们继承 UITableViewController 类，因为我们只能在界面构建器中将表格视图添加到表格视图控制器。表格视图控制器会自动提供 tableView 属性，并且它已经采用了协议 UITableViewDelegate 和 UITableViewDataSource。

除了表格视图之外，UITableViewController 还提供以下好处。

它加载在故事板或 nib 文件中归档的表格视图。表格视图控制器提供 tableView 属性来访问故事板中的表格视图。
它默认符合 UITableViewDelegate 和 UITableViewDatasource 协议。子类会覆盖委托和数据源方法以提供表格视图实现。
它会在 viewWillAppear(: ) 方法中首次出现时自动重新加载其表格视图的数据。每次显示表格视图时，它都会清除选择。
当用户点击导航栏中的编辑 | 完成按钮时，它会自动切换表格的编辑模式。
当屏幕上的键盘出现或消失时，它会自动调整表格视图的大小。

将表格视图控制器添加到界面

要将表格视图控制器添加到界面构建器，请考虑以下说明。

在 XCode 中创建一个新项目。我们将在此新创建的 XCode 项目中获得以下一组文件。

在上图中，我们获得了 XCode 生成的项目文件，用于运行一个视图的 iOS 应用程序。它还生成一个 ViewController.swift 文件，该文件分配给故事板中的单个视图控制器。删除此文件并创建一个新的 UITableViewController 子类，如下图所示。

在 Main.storyboard 文件中，删除 ViewController，在对象库中搜索 TableViewController，然后将结果拖到界面中。

它将在故事板中添加表格视图控制器。

如果运行上述项目，它将给出以下输出，即空表格视图。

表格视图控制器的组件

下图显示了表格视图控制器中的各种可见组件。

TableView：UITableViewController 包含一个内置的表格视图。故事板中的表格视图可以通过使用 TableViewController 子类中的 tableView 属性来访问。表格视图是 UITableView 类的实例。
TableViewCell：表格视图单元格显示表格视图控制器的实际内容。 TableViewCell 是 UITableViewCell 类的实例。单元格包含一个类型为 UIView 的内容视图。我们可以将自定义子视图添加到表格视图单元格中的内容视图。但是，TableViewController 中可以显示两种类型的单元格：即，用于显示静态数据的静态单元格和用于自定义单元格中显示的数据原型的原型单元格。
NavigationController：导航控制器是控制故事板中 ViewControllers 之间关系的控制器。所有嵌入在 NavigationController 中的 ViewControllers 都包含导航栏，我们可以在其中放置标题和栏按钮项。导航栏是 UINavigationBar 类的实例。我们可以相应地显示或隐藏表格视图控制器的导航栏。

示例 1：创建简单的表格视图控制器

在此示例中，我们将创建一个简单的表格视图控制器，在其中我们将以表格形式显示数据网格。

项目结构

自定义表格视图控制器子类继承 UITableViewController 类，并符合 UITableViewDelegate 和 UITableViewDataSource 协议，这使得自定义子类覆盖 UITableViewDelegate 和 UITableViewDataSource 协议的所有方法。包含 TableViewController 的项目的结构如下图所示。

界面生成器

在 Main.storyboard 中，删除现有的 UIViewController，搜索 UITableViewController，然后将结果拖到故事板中。这将创建一个带有原型单元格的表格视图控制器，如下图所示。

由于表格视图控制器包含一个原型单元格，我们需要使用内容视图开发此原型单元格。在此示例中，我们正在开发一个具有标题、副标题和详细信息的原型单元格。为此，我们将将 UILabel 拖到 TableViewCell，如下图所示。

在这里，我们还需要一个 UITableViewCell 子类来包含这些 UILabels 的 outlet 连接。

MyTableViewCell.swift

import UIKit

class MyTableViewCell: UITableViewCell {
    @IBOutlet weak var titleLbl: UILabel!
    @IBOutlet weak var subTitleLbl: UILabel!
    @IBOutlet weak var detailLbl: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }


    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)


        // Configure the view for the selected state
    }


}

MyTableViewController.swift

import UIKit


class MyTableViewController: UITableViewController {


    var titleArr = Array<String>()
    var subTitleArr = Array<String>()
    var detailArr = Array<String>()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        subTitleArr = ["Goa","Himachal Pradesh","Uttarakhand","Andman and Nicobar", "Mumbai"]
        titleArr = ["Punjim","Shimla","Dehradun","PortBlair","maharashtra"]
        detailArr = ["7 m", "2276 m", "447 m","16 m","14 m"]
        
    }


    // MARK: - Table view data source


    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }


    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return titleArr.count
    }


    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! MyTableViewCell


        cell.titleLbl.text = titleArr[indexPath.row]
        cell.subTitleLbl.text = subTitleArr[indexPath.row]
        cell.detailLbl.text = detailArr[indexPath.row]


        return cell
    }
    
    override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 130
    }
}

输出