iOS开发：如何动态调整TableView Cell高度？

2024-07-29 16:31:49

如何解决iOS开发中TableView Cell高度动态调整问题？

在iOS开发中，TableView是展示列表数据的利器。我们经常需要根据内容的变化，例如图片加载、文本长度变化等，动态调整Cell的高度，以呈现最佳的视觉效果。然而，看似简单的需求背后却隐藏着许多陷阱，处理不当就会导致UI错乱、性能低下等问题。本文将深入浅出地剖析这些问题，并提供一套经过实践检验的解决方案，助你轻松应对动态Cell高度的挑战。

问题根源解析

TableViewCell高度的动态调整之所以容易出错，是因为它涉及到UIKit渲染机制、异步操作、约束布局等多方面因素。

异步操作 : 网络图片的加载是异步进行的，这意味着图片下载完成的时间点是不确定的。而TableView的布局和渲染却是在主线程同步进行的，两者时间线上的错位就可能导致Cell高度计算错误。
约束冲突 : 如果Cell内部的子视图使用了Auto Layout约束，而我们在图片加载完成后直接修改了ImageView的高度约束，就可能引发约束冲突，导致UI显示异常。
频繁刷新 : 如果我们为每个Cell都调用 tableView.reloadRows(at:with:) 方法来刷新高度，就会造成不必要的性能浪费，尤其是在数据量较大时，这种影响更为明显。

最佳实践方案

为了解决上述问题，我们需要采取一系列措施，确保Cell高度能够动态调整，同时保证UI的流畅性和代码的简洁性。

1. 使用Auto Layout进行布局

Auto Layout是苹果官方推荐的布局方式，它能够根据我们设置的约束条件自动计算视图的大小和位置，非常适合处理动态内容的布局。在使用Auto Layout时，我们需要为Cell内部的子视图设置合理的约束，确保图片加载完成后，ImageView的高度变化能够自动传递给Cell，从而触发Cell高度的重新计算。

// 在Cell的contentView中添加ImageView和Label，并设置约束
let postImage = UIImageView()
postImage.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(postImage)

let postLabel = UILabel()
postLabel.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(postLabel)

NSLayoutConstraint.activate([
    // ...其他约束
    postImage.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8),
    postImage.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8),
    postImage.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -8),
    postLabel.topAnchor.constraint(equalTo: postImage.bottomAnchor, constant: 8),
    postLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8),
    postLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -8),
    postLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8),
])

2. 利用`estimatedRowHeight`属性预估高度

在 viewDidLoad() 方法中设置TableView的 estimatedRowHeight 属性，可以为每个Cell提供一个预估的高度。这样，TableView在加载时就能预先计算出大概的ContentSize，避免了因为Cell高度未知而导致的跳动和闪烁。

override func viewDidLoad() {
    super.viewDidLoad()
    tableView.estimatedRowHeight = 150 // 设置一个合理的预估高度
}

3. 图片加载完成后更新约束

在图片加载完成的回调函数中，根据图片的实际尺寸更新ImageView的高度约束，并调用 layoutIfNeeded() 方法强制Cell立即更新布局。

// 使用Kingfisher加载图片
if let imgLink = post.imageLink, let url = URL(string: imgLink) {
    cell.postImage.kf.setImage(with: url) { [weak self] image, _, _, _ in
        guard let self = self, let image = image else { return }
        // 根据图片比例计算新的高度约束
        let aspectRatio = image.size.width / image.size.height
        let newHeight = cell.postImage.frame.width / aspectRatio
        // 更新约束
        cell.imageHeightConstraint.constant = newHeight
        // 强制Cell立即更新布局
        cell.layoutIfNeeded()
    }
}

4. 缓存计算结果

为了避免重复计算Cell高度，我们可以将计算结果缓存起来，例如使用字典存储图片高度，下次加载相同图片时直接从缓存中读取，可以有效提高性能。

// 在ViewController中定义一个字典，用于缓存图片高度
var imageHeightsCache: [String: CGFloat] = [:]

// ...

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    // 获取对应Cell的数据模型
    let post = posts[indexPath.row]
    // 如果已经缓存了图片高度，则直接返回
    if let cachedHeight = imageHeightsCache[post.imageLink] {
        return cachedHeight
    } else {
        // 否则，根据图片比例计算高度
        // ... 计算高度逻辑 ...
        // 缓存图片高度
        imageHeightsCache[post.imageLink] = newHeight
        return newHeight
    }
}

5. 使用`UITableView.automaticDimension`

如果所有Cell的高度都是动态计算的，我们可以将 rowHeight 属性设置为 UITableView.automaticDimension，并将 estimatedRowHeight 属性设置为一个合理的值，这样就不需要实现 heightForRowAtIndexPath 代理方法了。

override func viewDidLoad() {
    super.viewDidLoad()
    tableView.rowHeight = UITableView.automaticDimension
    tableView.estimatedRowHeight = 150
}