18.1 实现新闻列表视图（UITableView）

构建新闻列表界面 📱

创建新闻列表视图是任何新闻应用的核心。你将使用 UITableView 来高效地展示大量新闻条目。UITableView 是 UIKit 中一个极其强大的组件，专为滚动显示数据而设计。它通过单元格重用机制，确保了流畅的滚动体验，即使面对成千上万条数据也能表现出色。

初始化 UITableView

首先，你需要实例化一个 UITableView 并将其添加到你的视图控制器中。通常，这会在 viewDidLoad 方法中完成。你可以选择使用 .``plain 或 .``grouped 样式。对于新闻列表，. plain 样式通常是最佳选择，因为它提供了简洁的单列布局。

let tableView = UITableView(frame: .zero, style: .plain)
view.addSubview(tableView)
// 设置约束
tableView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
    tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    tableView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
])

实现 UITableViewDataSource 协议

UITableView 需要一个数据源来知道如何显示数据。你将通过遵循 UITableViewDataSource 协议来实现这一点。这个协议有两个核心方法是你必须实现的：

• tableView(_:numberOfRowsInSection:): 告诉表格视图每个分区有多少行。
• tableView(_:cellForRowAt:): 返回指定索引路径的单元格。

extension NewsListViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return newsArticles.count // 假设 newsArticles 是你的新闻数据数组
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "NewsCell", for: indexPath)
        let article = newsArticles[indexPath.row]
        cell.textLabel?.text = article.title
        cell.detailTextLabel?.text = article.description
        return cell
    }
}

注册自定义 UITableViewCell

为了展示更丰富的新闻内容，你通常会创建自定义的 UITableViewCell。在你的视图控制器中，你需要注册这个自定义单元格。注册后，UITableView 就能在需要时重用这些单元格，从而优化性能。

• 创建自定义单元格: 设计一个继承自 UITableViewCell 的类，并在其中添加你需要的 UI 元素，例如图片视图、标题标签和摘要标签。
• 注册单元格: 在 viewDidLoad 中，使用 tableView.register(MyCustomCell.self, forCellReuseIdentifier: "MyCustomCell") 来注册你的自定义单元格。

class NewsCell: UITableViewCell {
    // ... 自定义 UI 元素和布局
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        // 添加并布局你的子视图
    }
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}
// 在 viewDidLoad 中
tableView.register(NewsCell.self, forCellReuseIdentifier: "NewsCell")

处理用户交互：UITableViewDelegate 协议

为了响应用户点击新闻条目，你需要实现 UITableViewDelegate 协议。最常用的方法是 tableView(_:didSelectRowAt:)。在这个方法中，你可以获取被点击的新闻数据，并导航到新闻详情页。

extension NewsListViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true) // 取消选中状态
        let selectedArticle = newsArticles[indexPath.row]
        // 导航到详情页，例如：
        // let detailVC = NewsDetailViewController(article: selectedArticle)
        // navigationController?.pushViewController(detailVC, animated: true)
        print("你点击了新闻：\(selectedArticle.title ?? "未知标题")") 🚀
    }
}

通过这些步骤，你将成功地构建一个功能完善的新闻列表视图。记住，UITableView 的强大之处在于其可重用性和灵活性，让你能够轻松地管理和展示大量数据。