带有 UIStackViews 的动态 UITableView 单元格高度

Posted 2023-02-27

【中文标题】带有 UIStackViews 的动态 UITableView 单元格高度

【英文标题】：Dynamic UITableView cell height with UIStackViews

【发布时间】：2016-05-08 13:21:34

【问题描述】：

我正在尝试使用 UIStackViews 和自动布局创建动态高度行，所以下面是我的 UITableViewCell xib。

所以你可以看到它里面有所有的stackViews。我尝试使用估计的行高和委托函数。但没有任何结果。

所以这是我的几个疑问。

1) 设计动态高度行时要牢记的要点。 2）在我目前的情况下我做错了什么。

【参考方案1】：

Ranjit，这种情况下不用UIStackView，

您无需使用UIStackView 即可轻松处理此问题。这是给你的提示。

在找到估计的行高之前，您应该应用一些自动布局技巧。

您只需为 UIImageView 添加高度和宽度约束。并为UIImageView 添加前导空格和顶部空格。

然后为单元格中的第一个标签添加尾随空格和前导空格。并将顶部与UIImageView 对齐。

为第二个标签添加顶部、前导和尾随空格。

为日历图像添加高度和宽度，并将顶部空间添加到第二个标签，然后对齐到第二个标签（右键单击并从日历图像拖动到第二个标签）。为第三个标签添加尾随空格。

在第三个标签上添加顶部空间到第二个标签或居中对齐到日历图像。将尾随空格添加到容器和底部空间。

在第 4 个标签上（UIImageView 下），您应该在日历图像中添加一个尾随空格并与日历图像居中对齐。向容器添加前导空间。

确保所有大数据持有标签的行数为“0”。

现在所有组件都对 x 和 y 值感到满意。它有助于为您的 tableview 找到估计的行高。

-(CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath

    return UITableViewAutomaticDimension;


-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

     return UITableViewAutomaticDimension;

现在您的表格视图可以自动选择高度。希望你有想法。

【讨论】：

虽然您的解决方案会产生正确的结果，但它并不能回答问题。是否需要堆栈视图无关紧要，尤其是当您认为堆栈视图只是现有 SDK 选项的顶点时。公平地说，您在堆栈视图中可以做的任何事情都可以在没有堆栈视图的情况下完成。这个问题，如何让自动尺寸与堆栈视图一起工作，仍然适用。

【参考方案2】：

在我目前的情况下我做错了什么。

我发现了两个大问题：

只有 1 个项目的堆栈视图是不合逻辑的。堆栈视图会自动在其中的 2 个或更多项之间添加约束。 您缺少用于保存所有内容的***堆栈视图。对于您的布局，您仍然需要 4 组手动添加的约束来将堆栈视图放置在它们的父视图中。

您似乎已经从 2 列设计接近了布局，所以我会这样做。

这是我的布局。

这是渲染了 3 次的单元格。

这与您想要的布局不完全匹配。但是，我想创建一个与您的布局接近但也具有尽可能多的默认属性的布局。我只改变了默认的两件事。

“共享类型”标签垂直内容拥抱优先级 = 250（来自 251）。这是解决布局歧义的小修正。 “第 1 列”堆栈视图对齐 = 前导（从填充开始）。这是正确显示第 1 列的重要更改。

如果您想微调此布局，您应该使用堆栈视图间距、分布和对齐方式。

注意：“2 Columns”堆栈视图有 4 个约束到超级视图的前导/尾随/顶部/底部 0。没有使用其他约束。