让UITableViewCell中的图片高度自动适应：一劳永逸

IOS

2023-12-11 08:44:27

在 iOS 中的 UITableViewCell 中巧妙实现图片高度自适应

背景介绍

在 iOS 开发中，UITableViewCell 中的图片高度自适应是一个常见问题。如果不妥善处理，可能会导致单元格高度不一致，影响用户体验。本文将深入探讨一种简单有效的解决方案，帮助您轻松解决这一难题。

问题根源

UITableViewCell 中的图片高度自适应问题源于系统在布局单元格时无法得知图片尺寸。这使得单元格高度无法准确确定，导致视觉效果不佳。

解决思路

为了解决这个问题，我们需要动态计算图片高度并根据其调整单元格高度。这涉及以下几个步骤：

加载图片： 使用 SDWebImage 等库从网络加载图片。
获取图片大小： 在图片加载完成后，使用 image.size 属性获取其尺寸。
计算单元格高度： 基于图片高度，添加内边距和必要的空间，计算出单元格高度。
更新单元格高度： 使用 UITableView 的 heightForRowAt 方法更新单元格高度。

代码示例

以下代码示例展示了如何在 UITableViewCell 中实现图片高度自适应：

class MyTableViewCell: UITableViewCell {

    let imageView = UIImageView()

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

        setupViews()
    }

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

    private func setupViews() {
        imageView.contentMode = .scaleAspectFit

        contentView.addSubview(imageView)

        imageView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            imageView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8),
            imageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8),
            imageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -8),
            imageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8)
        ])
    }

    func configure(with imageUrl: URL) {
        imageView.sd_setImage(with: imageUrl) { [weak self] image, _, _, _ in
            guard let self = self, let image = image else { return }

            let newHeight = self.contentView.frame.width * image.size.height / image.size.width

            self.contentView.frame.size.height = newHeight + 16 // Add some extra space for padding
            self.tableView?.beginUpdates()
            self.tableView?.endUpdates()
        }
    }
}