15.3_在ViewController中将ViewModels绑定到UITableView

在ViewController中将ViewModels绑定到UITableView，是使用MVVM架构构建iOS应用的关键一步。通过这种绑定，你可以将视图（UITableView）与数据模型（ViewModels）分离，从而提高代码的可测试性和可维护性。让我们一起看看如何实现这一过程！🎉

创建UITableView实例

首先，你需要在ViewController中创建一个UITableView实例。这可以通过纯代码方式实现，确保在viewDidLoad()方法中完成。

let tableView = UITableView()
tableView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(tableView)

NSLayoutConstraint.activate([
    tableView.topAnchor.constraint(equalTo: view.topAnchor),
    tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])

这段代码创建了一个UITableView，并使用Auto Layout约束使其填充整个ViewController的视图。确保设置translatesAutoresizingMaskIntoConstraints = false，以便使用Auto Layout。

设置UITableView的Delegate和DataSource

接下来，你需要设置UITableView的delegate和dataSource。通常，ViewController本身会实现这些协议。

tableView.delegate = self
tableView.dataSource = self

确保你的ViewController遵循UITableViewDelegate和UITableViewDataSource协议。

实现UITableViewDataSource协议

UITableViewDataSource协议负责提供UITableView显示的数据。你需要实现以下方法：

• numberOfRowsInSection(section:)：返回section中的行数。
• cellForRowAt(indexPath:)：返回指定indexPath的UITableViewCell。

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return viewModels.count // viewModels 是你的 CellViewModel 数组
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "MyCell", for: indexPath) as! MyTableViewCell
    let viewModel = viewModels[indexPath.row]
    cell.configure(with: viewModel) // 使用 ViewModel 配置 Cell
    return cell
}

这里，viewModels是一个CellViewModel数组，用于配置每个UITableViewCell。MyTableViewCell是一个自定义的UITableViewCell，它有一个configure(with:)方法，用于将ViewModel的数据绑定到Cell的UI元素。

实现UITableViewDelegate协议

UITableViewDelegate协议负责处理UITableView的交互事件，例如cell的选择。

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    let viewModel = viewModels[indexPath.row]
    // 处理 cell 的点击事件，例如导航到详情页面
    print("Cell at index \(indexPath.row) selected")
}

在这个例子中，当用户点击一个cell时，我们获取对应的ViewModel，并可以执行一些操作，例如导航到详情页面。

将ViewModel绑定到UITableViewCell

在MyTableViewCell中，你需要创建一个configure(with:)方法，用于将ViewModel的数据绑定到Cell的UI元素。

class MyTableViewCell: UITableViewCell {
    let titleLabel = UILabel()
    let descriptionLabel = UILabel()

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        // 初始化 UI 元素
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func configure(with viewModel: CellViewModel) {
        titleLabel.text = viewModel.title
        descriptionLabel.text = viewModel.description
    }
}

在这个例子中，titleLabel和descriptionLabel是UITableViewCell中的UI元素，它们的数据来自CellViewModel。

注册UITableViewCell

最后，你需要在viewDidLoad()方法中注册UITableViewCell。

tableView.register(MyTableViewCell.self, forCellReuseIdentifier: "MyCell")

这告诉UITableView使用MyTableViewCell类来创建cell，并使用"MyCell"作为重用标识符。

通过以上步骤，你就可以在ViewController中将ViewModels绑定到UITableView，实现MVVM架构的数据驱动视图更新。记住，清晰的数据绑定和职责分离是构建可维护和可测试iOS应用的关键。🚀