如何在 swift 的动态 tableView 中有多个单元格大小?

How to have multiple cell sizes in a dynamic tableView in swift?

我想在 tableView 中使用不同大小的单元格,但是在构建和 运行 应用程序之后,我看到所有单元格都具有相同的大小,并且较大的单元格被裁剪并且其内容变得不完整。我在属性检查器中设置尺寸。

https://www.raywenderlich.com/129059/self-sizing-table-view-cells

  1. 是否每个子视图都有固定所有边的约束?
  2. contentView 从上到下是否有限制?
  3. 您是否正在设置 tableView.rowHeight = UITableViewAutomaticDimension

它就像实施一样简单:

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return CGFloat(#your desired size#)
}

只需在此函数中使用 switch/case 并使用 indexPath.row。您还可以使用 UITableViewAutomaticDimension 自动调整大小

编辑:

根据标题、问题描述和提供的图片,我猜测了 3 种可能的情况,并试图在上面的简短回答中涵盖所有情况。但由于 Rikh 认为情况并非如此,我将把事情弄清楚。

记住,对于动态行,您必须在自动布局中将所有视图固定在它们的位置,这意味着您必须设置从场景顶部到底部和左侧到场景的约束正确的。 可能的情况是:

情况一: 您的 table 中有 2 个不同的单元格并且您知道它们的大小(第一行是 type1,其他单元格是 type2)。

在这种情况下你只需要在我提到的函数中添加一个if子句或switch/case这样(假设第一行是88点,其余是44点):

return indexPath.section == 0 ? CGFloat(88.0) : CGFloat(44.0)

情况二: 您的第一行是固定大小,其余是动态的。

在对单元格设置正确的约束后,在 viewDidLoad 中添加 tableView.estimatedRowHeight = CGFloat(44.0),其中 estimatedRowHeight 是单元格的最小可能高度。然后你可以这样写你的代码:

return indexPath.section == 0 ? CGFloat(88.0) : UITableViewAutomaticDimension

情况三: 你的行高都是动态的,你希望它们都自己扩展。在这种情况下,您根本 不需要我提到的功能。实际上,如果您的代码中有它,则必须将其删除。 在这种情况下继续并将此代码添加到代码的 viewDidLoad 中(假设单元格的最小可能高度为 44 点):

tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = CGFloat(44.0)

再次记住,正确设置所有约束对于它的工作非常重要。举个例子:我猜 "detail" 标签会让你的行高增加,而标题是固定大小的,所以这些是你在 "detail" 标签上需要的约束:将它的高度设置为大于等于(>=) 21、将其设置为在 superview 中间垂直对齐(通过在故事板中设置 "Vertically in Container" 约束),将水平 space 设置为 "title" 标签,将尾部设置为 space 到superview,将行数设置为0使其无限扩展,最后将换行属性设置为"word wrap"。在这种情况下,你的标题必须有特定的宽度限制,否则你会得到一个错误。

P.S.: 实际上,既然我正在写这篇文章,我可以想象另一种情况,您的 "title" 标签的宽度也是动态的。这将使您的 tableView 非常难看,但如果这是您的情况,您需要在标签上设置 "content hugging" 和 "Content Compression",描述为 Here (CHCR)

为原型单元格定义自动布局约束。

指定 table 视图的 estimatedRowHeight

将 table 视图的 rowHeight 设置为 UITableViewAutomaticDimension

示例

tableView.estimatedRowHeight = 44.0
tableView.rowHeight = UITableViewAutomaticDimension

如果您使用自动布局,一切都会按预期工作。

您将在此处获得示例演示。

https://www.dropbox.com/s/ug9xu0yfcua902o/SelfSizingDemo.zip?dl=0