TableView

2025年3月17日 | 阅读 8 分钟

TableView 可以定义为使用单列中的行来排列数据的视图。它几乎用于每个 iOS 应用程序，例如，联系人、Facebook、Instagram 等。tableview 是 UITableView 类的实例，它继承了 UIScrollView 类。我们将在本教程的后续章节中讨论 UIScrollView。

在 iOS 应用程序中，每当我们需要显示包含垂直滚动内容的单列时，我们都使用 tableview。tableview 可以显示多个记录（分为行），如果需要，可以垂直滚动。 tableview 的每一行都呈现数据源的每个记录。例如，在联系人应用程序中，我们在 tableview 的单独行中显示每个联系人姓名，并且单击该行即可获得与联系人相关的详细信息。

下图显示了如何在设置应用程序中使用 tableview 显示数据。

下图显示了如何在联系人应用程序中使用 tableview。

我们可以在 tableview 中创建部分以对相关行进行分组，或者我们可以在没有部分的情况下在多行中显示长列表的记录。

在 iOS 应用程序中，tableview 与导航控制器结合使用，以按层次结构组织数据。在这里，我们可以使用导航控制器在不同的层次结构级别之间导航。

tableview 的外观由 UITableView 类管理，该类继承了 UIScrollView。在 tableview 中，行由 UITableViewCell 类的对象模拟，该对象可用于显示实际内容。我们可以自定义 tableview 单元格以在 iOS 应用程序中显示任何内容。

将 UITableView 添加到界面

要将 tableview 添加到情节提要，请在对象库中搜索 Tableview，然后将结果拖到情节提要。

要使用 tableview，我们需要设置其委托和数据源属性。 tableview 是一个数据驱动的对象，即，它从数据源对象获取要显示的数据。在实际应用程序中，数据源对象包含由来自数据库服务器的 API 调用返回的数据。

可以使用以下代码行在 ViewController 的 viewDidLoad 方法中设置 tableview 的委托和数据源属性。

tableView.delegate = self
tableView.datasource = self

TableView 委托方法

定义 tableview 委托方法是为了向 tableview 添加以下功能。

我们可以为 tableview 中的部分创建自定义的标题和页脚。
我们可以为行、标题和页脚指定自定义高度。
为行、标题和页脚提供高度估计。
我们可以定义可以处理行选择的方法。

序号	方法	描述
1	func tableView(UITableView, willDisplay: UITableViewCell, forRowAt: IndexPath)	当 tableview 即将绘制特定行的单元格时，它会通知此委托。
3	func tableView(UITableView, willSelectRowAt: IndexPath) -> IndexPath?	当即将选择指定的行时，tableview 会通知此委托方法。
4	func tableView(UITableView, didSelectRowAt: IndexPath)	当选择 tableview 的指定行时，会通知此委托。
5	func tableView(UITableView, willDeselectRowAt: IndexPath) -> IndexPath?	当即将取消选择特定单元格时，会通知此委托。
6	func tableView(UITableView, didDeselectRowAt: IndexPath)	当取消选择特定行时，会通知此委托。
7	func tableView(UITableView, viewForHeaderInSection: Int) -> UIView?	此委托方法返回一个 UIView，它表示 tableview 的标题。
8	func tableView(UITableView, viewForFooterInSection: Int) -> UIView?	此委托方法返回 uiview，它表示 tableview 的页脚。
9	func tableView(UITableView, willDisplayHeaderView: UIView, forSection: Int)	当 tableview 即将显示特定部分的标题视图时，会通知此委托方法。
10	func tableView(UITableView, willDisplayFooterView: UIView, forSection: Int)	当 tableview 即将显示特定部分的页脚视图时，会通知此委托方法。
11	func tableView(UITableView, heightForRowAt: IndexPath) -> CGFloat	此委托方法返回行的高度。
12	func tableView(UITableView, heightForHeaderInSection: Int) -> CGFloat	此委托方法返回 tableview 中节的标题的高度。
13	func tableView(UITableView, heightForFooterInSection: Int) -> CGFloat	此委托方法返回 tableview 中特定节的页脚的高度。
14	func tableView(UITableView, estimatedHeightForRowAt: IndexPath) -> CGFloat	它要求委托估算特定位置的行的高度。
15	func tableView(UITableView, estimatedHeightForHeaderInSection: Int) -> CGFloat	它要求委托估算特定位置的标题的高度。
16	func tableView(UITableView, estimatedHeightForFooterInSection: Int) -> CGFloat	它要求委托估算特定部分的页脚的高度。

TableView 数据源方法

为了维护 tableview 要显示的数据，我们需要维护一个实现 UITableViewDataSource 协议的 DataSource 对象。数据源对象管理 tableview 数据。数据源对象执行以下主要任务。

它报告要在 tableview 中显示的行数和部分数。
它为 tableview 中的每一行分配可重用的单元格。
它为 tableview 部分中的标题和页脚提供标题。

为了执行上述任务，UITableviewDataSource 协议中定义了一些函数。下表包含协议中定义的重要方法。

序号	方法	描述
1	func tableView(UITableView, numberOfRowsInSection: Int) -> Int	此方法返回要在 tableview 的节中显示的行数。
2	func numberOfSections(in: UITableView) -> Int	此方法返回要在 tableview 中显示的部分数。
3	func tableView(UITableView, cellForRowAt: IndexPath) -> UITableViewCell	此方法返回 UITableViewCell 的对象，该对象显示 tableview 中特定行的实际内容。此方法在 tableview 中插入特定行的单元格。
4	func tableView(UITableView, titleForHeaderInSection: Int) -> String?	此方法返回一个字符串，表示 tableview 的节中标题的标题。
5	func tableView(UITableView, titleForFooterInSection: Int) -> String?	此方法返回一个字符串，表示 tableview 的节中页脚的标题。
7	func tableView(UITableView, canEditRowAt: IndexPath) -> Bool	它要求 DataSource 验证特定行是否可编辑。
8	func tableView(UITableView, canMoveRowAt: IndexPath) -> Bool	它要求 DataSource 验证特定行是否可以移动到 tableview 中的另一个位置。
9	func tableView(UITableView, moveRowAt: IndexPath, to: IndexPath)	此方法将特定行移动到 tableview 中的其他位置。
10	func sectionIndexTitles(for: UITableView) -> [String]?	它返回包含 tableview 中各节标题的字符串数组。

如果 ViewController 实现了 UITableViewDatasource 协议，则需要定义两种方法，这在以下代码中提到。

extension ViewController : UITableViewDataSource{
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataSourceArr.count
        
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = "cell text"
               
        return cell
    }
    
}

示例 1

在此示例中，我们将创建一个简单的 tableview，其中显示 2019 年排名前 10 的编程语言的列表。在本示例中，我们将使用 UITableView 来创建界面生成器，并使用委托和数据源方法来设置 tableview 中的数据。

界面生成器

在此示例中，我们将通过将 tableview 添加到界面生成器来创建以下视图控制器。我们还将使用标签对象来显示 tableview 的标题。我们将向此 tableview 添加一个原型单元格，并为此 ViewController 分配 ViewController.swift 类。

ViewController.swift

在 ViewController.swift 中，我们将创建添加到情节提要的 tableview 的连接出口。我们还将定义委托和数据源方法来显示 tableview 数据。

import UIKit
class ViewController: UIViewController {


    @IBOutlet weak var tableView: UITableView!
    var dataSourceArr = Array<String>()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        tableView.delegate = self
        tableView.dataSource = self
        dataSourceArr = ["Python","JavaScript","Java","Swift","GoLang","C#","C++","Scala"]
        
        
    }


}


extension ViewController : UITableViewDelegate{
    
}


extension ViewController : UITableViewDataSource{
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataSourceArr.count
        
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = dataSourceArr[indexPath.row]
        cell.textLabel?.textAlignment = .center
        return cell
    }
}

输出

示例：处理 tableview 中的多个部分

在此示例中，我们将在 tableview 中创建多个部分，并且我们将根据特定部分定义可变数量的行和行内容。

界面生成器

要为此示例创建界面生成器，我们需要添加一个 tableview 并为 tableview 添加一个原型单元格。带有原型单元格的界面生成器如下图所示。

ViewController.swift

import UIKit


class ViewController: UIViewController {


    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        tableView.delegate = self
        tableView.dataSource = self
    }
    
}


extension ViewController: UITableViewDataSource{
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return 3
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if section == 0{
            return 2
        }
        else if section == 1{
            return 3
        }
        else if section == 2{
            return 4
        }
        return 0
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        if(indexPath.section == 0){
            cell.textLabel?.text = "Row in section 1"
        }
        else if(indexPath.section == 1){
            cell.textLabel?.text = "Row in section 2"
        }
        else if(indexPath.section == 2){
            cell.textLabel?.text = "Row in section 3"
        }
        return cell
    }
}


extension ViewController : UITableViewDelegate{
    
    func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return "Section " + (section+1).description
    }
    
}

示例 2：自定义 Table View 单元格

在此示例中，我们将通过将 tableview 单元格分配给一个类并在该类中创建单元格对象的出口来自定义 tableview 单元格。在大多数 iOS 应用程序中，都需要自定义 tableview 类，因为我们不能总是仅通过设置单元格的标签文本来满足我们的要求。

此示例模拟了 ECommerce 应用程序中显示的产品列表视图。

界面生成器

要为此示例创建界面生成器，我们需要将 tableview 添加到视图控制器，并将原型单元格添加到其中。在内容视图原型单元格中，我们将添加一个 uiview，向其中添加 UIImageView 和 UILabel 对象。下图显示了该示例中的情节提要。

MyTableViewCell.swift

MyTableViewCell 继承了 UITableViewCell 类，该类已分配给 tableview 的原型单元格。在此类中，我们可以实例化图像视图和标签对象。

import UIKit

class MyTableViewCell: UITableViewCell {

    @IBOutlet weak var titleImg: UIImageView!
    
    @IBOutlet weak var titleLbl: 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
    }

}

ViewController.swift

import UIKit

class ViewController: UIViewController {
    
    var imgArr = ["Product1","Product2","Product3","Product4","Product5","Product6","Product7","Product8"]
    var lblTextArr = ["Powerbanks","Storage Devices","LED Bulbs","Laptop Bags","Keyboards","Routers","Shoes"]
    
    @IBOutlet weak var tableView: UITableView!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        tableView.delegate = self
        tableView.dataSource = self
    }
    
}




extension ViewController : UITableViewDataSource{
    
    public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return imgArr.count - 1
    }
    
    public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! MyTableViewCell
        cell.titleImg?.image = UIImage(named: imgArr[indexPath.row])
        cell.titleLbl.text = lblTextArr[indexPath.row]
        return cell
    }
}


extension UIViewController : UITableViewDelegate{
    
    public func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 150
    }
    
}