6.3_自定义UITableViewCell

为什么需要自定义UITableViewCell？

在iOS开发中，UITableView是显示列表数据的核心组件。默认的UITableViewCell样式虽然能满足基本需求，但往往无法满足复杂的用户界面设计。自定义UITableViewCell让你能够完全掌控单元格的布局和内容，实现独特且富有吸引力的界面。 🚀

想象一下，你正在构建一个社交应用，每个帖子都需要显示用户的头像、昵称、发布时间、帖子内容和点赞按钮。默认的单元格显然无法承载如此丰富的信息，这时自定义就显得尤为重要了！

创建自定义UITableViewCell类

要自定义UITableViewCell，首先你需要创建一个继承自UITableViewCell的Swift类。

swift

import UIKit

class CustomFeedCell: UITableViewCell {

    // 定义你需要的UI组件
    let userAvatarImageView = UIImageView()
    let userNameLabel = UILabel()
    let postContentLabel = UILabel()
    let likeButton = UIButton()

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupUI()
    }

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

    private func setupUI() {
        // 配置和添加子视图
        contentView.addSubview(userAvatarImageView)
        contentView.addSubview(userNameLabel)
        contentView.addSubview(postContentLabel)
        contentView.addSubview(likeButton)

        // 设置约束 (这里使用简单的示例，实际开发中会使用Auto Layout)
        userAvatarImageView.translatesAutoresizingMaskIntoConstraints = false
        userNameLabel.translatesAutoresizingMaskIntoConstraints = false
        postContentLabel.translatesAutoresizingMaskIntoConstraints = false
        likeButton.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            userAvatarImageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            userAvatarImageView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10),
            userAvatarImageView.widthAnchor.constraint(equalToConstant: 40),
            userAvatarImageView.heightAnchor.constraint(equalToConstant: 40),

            userNameLabel.leadingAnchor.constraint(equalTo: userAvatarImageView.trailingAnchor, constant: 8),
            userNameLabel.centerYAnchor.constraint(equalTo: userAvatarImageView.centerYAnchor),

            postContentLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            postContentLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            postContentLabel.topAnchor.constraint(equalTo: userAvatarImageView.bottomAnchor, constant: 10),

            likeButton.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            likeButton.topAnchor.constraint(equalTo: postContentLabel.bottomAnchor, constant: 10),
            likeButton.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -10)
        ])

        // 进一步配置UI元素样式
        userAvatarImageView.layer.cornerRadius = 20
        userAvatarImageView.clipsToBounds = true
        userNameLabel.font = UIFont.boldSystemFont(ofSize: 16)
        postContentLabel.numberOfLines = 0 // 允许内容多行显示
        likeButton.setTitle("点赞", for: .normal)
        likeButton.setTitleColor(.systemBlue, for: .normal)
    }

    func configure(with userAvatar: UIImage, userName: String, postContent: String) {
        userAvatarImageView.image = userAvatar
        userNameLabel.text = userName
        postContentLabel.text = postContent
    }
}

在UITableView中注册和使用自定义Cell

创建好自定义UITableViewCell后，你需要在UITableView中注册它，这样UITableView才能知道如何创建和复用你的自定义单元格。

注册Cell: 在你的UITableViewController或包含UITableView的UIViewController中，通常在viewDidLoad方法里注册你的自定义Cell。
swift
```
tableView.register(CustomFeedCell.self, forCellReuseIdentifier: "CustomFeedCell")
```
1
这里，"CustomFeedCell"是你的复用标识符，它必须与你在cellForRowAt方法中使用的标识符一致。

在cellForRowAt中使用: 在UITableViewDataSource的tableView(_:cellForRowAt:)方法中，你可以通过复用标识符获取并配置你的自定义Cell。

swift

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    guard let cell = tableView.dequeueReusableCell(withIdentifier: "CustomFeedCell", for: indexPath) as? CustomFeedCell else {
        fatalError("无法复用CustomFeedCell")
    }

    // 假设你有一个数据模型数组
    let dataItem = yourDataSource[indexPath.row]
    cell.configure(with: dataItem.avatarImage, userName: dataItem.userName, postContent: dataItem.content)
    return cell
}

通过dequeueReusableCell(withIdentifier:for:)方法，UITableView会智能地复用已经滚出屏幕的单元格，极大地优化了性能。 🚀

优化自定义Cell的性能

自定义UITableViewCell时，性能优化是关键。

Cell复用: 这是UITableView的核心机制。确保你正确使用了dequeueReusableCell(withIdentifier:for:)方法。
懒加载: 对于一些不总是可见的UI元素，可以考虑懒加载，只在需要时才创建它们。
异步加载图片: 如果你的Cell包含图片，尤其是从网络加载的图片，务必使用异步加载，避免阻塞主线程。例如，使用URLSession或第三方库如Kingfisher。
缓存计算好的高度: 如果你的Cell高度是动态的，并且计算复杂，可以缓存计算好的高度，避免重复计算。这可以通过实现tableView(_:heightForRowAt:)方法并返回缓存的高度来实现。 📈

总结与最佳实践

自定义UITableViewCell是iOS开发中一项非常实用的技能，它能让你构建出美观且功能丰富的列表界面。

清晰的职责: 让你的自定义Cell只负责显示数据，数据的处理和业务逻辑应该放在控制器中。
可配置性: 提供一个configure(with:)方法，让外部可以方便地传入数据来更新Cell的显示。
Auto Layout: 强烈推荐使用Auto Layout来布局你的Cell内容，它能确保你的界面在不同设备和屏幕尺寸上都能正确显示。
可读性: 保持代码整洁，为你的UI组件和方法命名清晰。

通过这些实践，你将能够创建出高性能、易于维护的自定义UITableViewCell！ 💪

6.3_自定义UITableViewCell ​

为什么需要自定义UITableViewCell？ ​

创建自定义UITableViewCell类 ​

在UITableView中注册和使用自定义Cell ​

优化自定义Cell的性能 ​