如何在 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
- 是否每个子视图都有固定所有边的约束?
- contentView 从上到下是否有限制?
- 您是否正在设置 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
我想在 tableView 中使用不同大小的单元格,但是在构建和 运行 应用程序之后,我看到所有单元格都具有相同的大小,并且较大的单元格被裁剪并且其内容变得不完整。我在属性检查器中设置尺寸。
https://www.raywenderlich.com/129059/self-sizing-table-view-cells
- 是否每个子视图都有固定所有边的约束?
- contentView 从上到下是否有限制?
- 您是否正在设置 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