UITableViewCell 动态行高 + 自定义 UIView + 自动布局

Question

我正在尝试获取一个包含多个 UIImageViews 的自定义照片容器以适合我的 tableview 单元格。视图包含可变数量的图像 (1 ~ 9)，它的高度会相应地变化从 1x 到 3x imageHeight。

我使用 AutoLayout 来定义顶部/底部/前导/尾随边距，其中包含 tableview 和自定义 UIView，并启用自调整单元格，我已设置

tableView.estimatedRowHeight = X
tableView.rowHeight = UITableViewAutomaticDimension

我用

初始化这些单元格

tableView.register(nib: forCellReuseIdentifier:)

在tableView(_ tableView: cellForRowAt:) 方法中，我设置单元格：

let cell = tableView.dequeueReusableCell(
    withIdentifier: "test9cell", 
               for: indexPath) as! SocialFeedTableViewCell
cell.photoContainer.setup(with: urls)
cell.photoContainer.loadImages()
return cell 

setup() 用 URL 钩住容器中的每个 imageView

func setup(with urls: [URL]) {
    self.imageUrls = urls
    for i in 0 ..< urls.count {
        let imageView = UIImageView(frame: CGRect.zero)
        self.addSubview(imageView)
        self.imageViews.append(imageView)
    }
    self.setNeedsLayout()
}

func loadImages() {
    self.imageViews.forEach { imageView in
        imageView.frame = // Calculate position for each subview
        imageView.sd_setImage(...) // Load web image asynchronously
    }
}

为视图定义intrinsicContentSize：

override var intrinsicContentSize {
    let frameWidth = self.frame.size.width
    var frameHeight: CGFloat
    switch self.imageUrls.count { // range from 1...9
    case 1...3:
        frameHeight = frameWidth / 3
    case 4...6:
        frameHeight = frameWidth / 3 * 2
    default:
        frameHeight = frameWidth
    return CGSize(frameWidth, frameHeight)
}

override func layoutSubviews() {
    super.layoutSubviews()
    self.imageViews.forEach { imageView in
        imageView.frame = // Calculate position for each subview
    }
}

这里的问题是：在我设置了初始的intrinsicContentSize 之后，容器的框架大小在layoutSubviews() 中发生了变化。虽然到那时我可以正确定位 imageView 子视图，但单元格高度不会再改变了。

希望我不会让这个问题变得更加混乱。有人可以指出在修改其 UIView 子视图的内容后如何调整单元格高度？谢谢！

Answer 1

这里有几件事会导致您在动态大小的单元格方面出现一些问题。

1. 您正在向单元格添加多个项目，但没有在图像视图上定义任何自动布局约束，因此它不知道如何正确放置/堆叠项目。
2. 从上面的代码中，您正在添加带有 CGRectZero 框架的 UIImageView，如果没有自动布局规则，当您添加图像时，它们将保持为零或尝试调整内容大小，但它们不会调整单元格高度。
3. 如果您从网络加载图像，则可能会在 tableviewcell 完成初始渲染后添加/渲染它们。因此，您可能需要缓存加载的图像并重新加载单元格，以便它们可以在正确的时间加载。

现在最后一点要复杂得多。

动态 UITableViewCell 会根据其中内容的自动布局规则计算它们的高度。从内容到 UITableViewCell 的 contentView 属性（到所有边缘），您必须有足够的约束，为单元格提供足够的信息来放置每个项目，计算其整体高度和宽度，因此它能够计算新高度。

仅使用一张图片对于动态大小的单元格来说还算不错。但是在单元格最初呈现后动态放置多个项目而没有任何规则将不起作用。

您需要决定这些图像在单元格中的布局方式。一旦你有了这个，你可以在添加图像视图时查看添加所需的约束。就个人而言，我只会在收到每张图像后添加图像视图。

以前，当我这样做时，我已经缓存了接收到的图像并重新加载单元格，以便图像可以在渲染时放置在单元格中，允许表格视图单元格根据图像尺寸计算其高度和约束。

您可能还需要考虑使用集合视图或将图像合并为单个图像并在您的单元格中使用它。如果您对图像具有这种访问权限，则可以在运行时或服务器端在设备上执行此操作。