EXTable 1.2.4

EXTable 1.2.4

×

由 Austin-Michael Komatz 维护。

EXTable 1.2.4

  • 由
  • Austin-Michael Komatz

EXTable

用法

显示数据

创建扩展表格视图控制器第一步是继承。所有用于显示和编辑部分和行的功能都构建在了 EXTableViewController 中。因此，简单地创建一个新的 EXTableViewController 子类。

class ViewController: EXTableViewController {}

第二步是创建所需的表格视图单元格。创建一个新的表格视图单元格，从 ConfigurableTableViewCell 继承。实现所需的协议。

class IntTableViewCell: ConfigurableTableViewCell {
    // 1
    class var reuseIdentifier: String { return "IntTableViewCell" }
    class var bundle: Bundle { return Bundle(for: IntTableViewCell.self) }
    class var nib: UINib { return UINib(nibName: "IntTableViewCell", bundle: bundle) }
    
    // 2
    func configure(for value: Int) {
        textLabel?.text = "Value"
        detailTextLabel?.text = String(value)
    }
}
  1. 这允许单元格轻松地入队。确保重用标识符与 Storyboard 匹配。
  2. 此方法将带有一个值来配置单元格。所有配置都应在此处完成。

接下来，必须创建行。这将代表表格视图中的特定行。

struct IntRow: Row {
    // 1
    typealias DataType = Int
    typealias CellType = IntTableViewCell

    // 2
    var data: Int

    // 3
    init(data: Int) {
        self.data = data
    }
}
  1. 类型别名是协议的相关类型，它们将数据类型映射到单元格类型。现在，每次使用该行时，IntTableViewCell 都将自动使用 data 变量进行配置。请注意，DataType 必须与 CellType.DataType 相同。
  2. 这是行中实际存储的数据。例如，这可能包括客户数据、字符串、名称等。这将在单元格中显示。
  3. 此初始化器几乎总是相同的：只需设置存储属性 data

最后的步骤只是简单地用数据填充表格视图，这非常简单。在ViewController类中，只需重写generateSections方法。在方法体内，生成表格视图的章节和行。

override func generateSections() -> [Section] {
    // 1
    var sections: [Section] = []

    // 2
    var section1 = Section()
    section1.headerTitle = "Section 1"
    // 3
    section1.appendRow(IntRow(data: 1))
    section1.appendRow(StringRow(data: "Awesome"))
    section1.appendRow(IntRow(data: 22))
    // 4
    sections.append(section1)

    var section2 = Section()
    section2.headerTitle = "Section 2"
    section2.appendRow(IntRow(data: 13))
    // 5
    section2.appendRow(StringRow(data: "So cool"))
    section2.appendRow(StringRow(data: "Heck yeah"))
    sections.append(section2)

    return sections
}
  1. 这是将要返回的章节数组。所有生成的内容都应该添加到这个数组中。
  2. 这就是如何创建一个新的章节。之后，您可以添加行，更改标题等。
  3. 只需初始化新的行（IntRow(data: 1)）并将它们追加到章节中。就这么简单。
  4. 确保将章节追加到章节数组中
  5. 注意您能够追加任何类型的行。在这里，我添加了另一种类型的行，StringRow，没有额外的开销。

现在运行项目，您就拥有了一个完全功能的扩展表格视图控制器。太棒了！

响应用户交互

响应用户交互的传统方法仍然有效。然而，它已被优化以支持声明式交互。例如，您无需使用 tableView(_:didSelectRowAt:)，而是可以通过使用 someRow.onDidSelect = ... 直接告诉行在触摸时执行什么操作。但是，这仅适用于符合 EXTableViewController 中响应者协议的行。这是由于 ExtendedTableViewController 在每个可观察事件期间都会检查响应者。

UITableViewDelegate 方法 响应者等效
tableView(_:willDisplay:forRowAt:) WillDisplayResponder.onWillDisplay
tableView(_:willSelectRowAt:) WillSelectResponder.onWillSelect
tableView(_:didSelectRowAt:) DidSelectResponder.onDidSelect
tableView(_:willDeselectRowAt:) WillDeselectResponder.onWillDeselect
tableView(_:didDeselectRowAt:) DidDeselectResponder.onDidDeselect

您可以选择符合 FullResponder 以使用所有方法。

struct IntRow: Row, DidSelectResponder {
    ...
    var onDidSelect: ((IndexPath) -> ())?
}
let row = IntRow(data: 500)
row.onDidSelect = { _ in
    print("Just tapped 500!")
}

额外单元格配置

有时，在单元格的初始配置完成后，可能需要对单元格进行额外定制。这可以通过符合 ConfigurableRow 而不是 Row 来实现。

struct IntRow: ConfigurableRow {
    ...
    var configuration: ((IntTableViewCell) -> ())?
}

现在，在配置期间，单元格将自动传递到 configuration 中。通过在生成章节时设置 configuration，可以对单元格进行定制。

override func generateSections() -> [Section] {
    ...
    
    let row = IntRow(data: 13)
    row.configuration = { cell in
        cell.textLabel?.textColor = .red
    }
    ...
}

虽然这项功能可用，但建议仅在确实需要时才这样做。应将数据显示处理在表格视图单元格中。

头部和底部视图

在EXTableViewController中显示头部和底部视图也非常简单，有几种方法可以实现。以下列表按优先级排列选项

  1. Section.headerView或Section.footerView - 作为头部/底部显示的单个视图。
  2. Section.reusableHeaderViewClass或Section.reusableFooterViewClass - 可重用的头部/底部视图类。
  3. EXTableViewController.defaultHeaderViewClass或EXTableViewController.defaultFooterViewClass - 如果该部分未提供，则在表格视图中使用的默认头部/底部。