UITableViewCell中UIImageView根据网络图片比例动态调整高度问题

问题根源 #

1. 异步加载时机错误：Kingfisher是异步加载图片，你在cellForRowAt中直接读取cell.ivPost.image时，图片还未下载完成，导致比例配置逻辑未执行，cell保持默认高度。
2. 行高未实时更新：图片加载完成后，没有通知UITableView重新计算当前行高度，导致cell高度不会自动调整。
3. 布局依赖不可靠：原代码用viewPost.bounds.width计算高度，当cell刚被复用还未完成布局时，该宽度值可能不准确，导致高度计算错误。

解决步骤 #

1. 开启TableView自动行高

在ViewController的viewDidLoad中添加：

tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 400 // 根据你的内容调整预估高度

2. 修改UITableViewCell，改用宽高比约束

在Xib/Storyboard中给ivPost添加宽高比约束，并关联到cell的IBOutlet，替换原有的固定高度约束：

class PostsTableViewCell: UITableViewCell {
    @IBOutlet weak var ivProfilePic: UIImageView!
    @IBOutlet weak var ivPost: UIImageView!
    
    @IBOutlet weak var lblName: UILabel!
    @IBOutlet weak var lblPostContent: UILabel!
    
    @IBOutlet weak var viewPost: UIView!
    
    @IBOutlet weak var imageAspectRatioConstraint: NSLayoutConstraint!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        viewPost.isHidden = true
        // 设置默认宽高比（对应原默认高度162）
        let defaultRatio = UIScreen.main.bounds.width / 162
        imageAspectRatioConstraint = ivPost.widthAnchor.constraint(equalTo: ivPost.heightAnchor, multiplier: defaultRatio)
        imageAspectRatioConstraint.isActive = true
    }

    override func prepareForReuse() {
        super.prepareForReuse()
        viewPost.isHidden = true
        ivPost.image = nil
        // 重置宽高比为默认值
        imageAspectRatioConstraint.isActive = false
        let defaultRatio = UIScreen.main.bounds.width / 162
        imageAspectRatioConstraint = ivPost.widthAnchor.constraint(equalTo: ivPost.heightAnchor, multiplier: defaultRatio)
        imageAspectRatioConstraint.isActive = true
    }
    
    func configureCellWhenPostImageIsAvailable(image: UIImage) {
        let aspectRatio = image.size.width / image.size.height
        // 更新宽高比约束
        imageAspectRatioConstraint.isActive = false
        imageAspectRatioConstraint = ivPost.widthAnchor.constraint(equalTo: ivPost.heightAnchor, multiplier: aspectRatio)
        imageAspectRatioConstraint.isActive = true
        ivPost.image = image
        layoutIfNeeded()
    }
}

3. 修改ViewController的cellForRowAt逻辑，利用Kingfisher回调更新行高

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "PostsTableViewCell", for: indexPath) as! PostsTableViewCell
    
    let data = posts[indexPath.row]
    
    // 处理用户头像
    if let userImage = data.memberProfilePic {
        cell.ivProfilePic.kf.setImage(with: userImage)
    } else {
        cell.ivProfilePic.image = nil
    }
    
    // 处理用户名
    cell.lblName.text = data.memberName ?? ""
    
    // 处理帖子内容
    if let postText = data.postContent, !postText.isEmpty {
        cell.lblPostContent.isHidden = false
        cell.lblPostContent.text = postText
    } else {
        cell.lblPostContent.isHidden = true
        cell.lblPostContent.text = nil
    }
    
    // 处理帖子图片
    if let postImage = data.postImage {
        cell.viewPost.isHidden = false
        cell.ivPost.kf.setImage(with: postImage) { [weak self, weak cell] result in
            guard let self = self, let cell = cell else { return }
            switch result {
            case .success(let value):
                cell.configureCellWhenPostImageIsAvailable(image: value.image)
                // 触发TableView更新当前行高度
                tableView.beginUpdates()
                tableView.endUpdates()
            case .failure:
                cell.viewPost.isHidden = true
            }
        }
    } else {
        cell.viewPost.isHidden = true
        cell.ivPost.image = nil
    }
    
    return cell
}

额外优化建议 #

• 如果API返回图片宽高信息，可以在PostEntity中添加对应字段，无需等待图片下载即可设置比例约束，提升加载体验。
• 给ivPost设置占位图，优化加载过程中的视觉体验。
• 统一处理所有UI元素的重置逻辑，避免复用导致的内容残留。

内容的提问来源于stack exchange，提问作者Mel