【问题标题】:Dynamic height UITableViewCell动态高度 UITableViewCell
【发布时间】:2016-07-27 08:41:28
【问题描述】:

我的单元格包含标题、日期和一些主题标签。

这是故事板的屏幕截图:

Custom cell in storyboard

我在 ViewDidLoad 中设置了以下内容:

tableView.rowHeight = UITableViewAutomaticDimension

但没有给出 tableView 的任何估计高度,我将解释原因。

这是我的自定义单元:

@IBOutlet weak var title: UILabel!
@IBOutlet weak var date: UILabel!
@IBOutlet weak var hashtagsView: UIView!

var item: Item? {
    didSet {
        configureCell()
    }
}

func configureCell() {
    if item = item {
        title.text = item!.title
        date.text = item!.date

//      The part where I calculate the sizes of hashtags to fit them in hashtagsView

        let totalWidth = CGRectGetWidth(hashtagsView.frame)
        print("TotalWidth: \(totalWidth)")
        .
        .
        .
        .
        print("Content: \(self.contentView.frame)")
        print("HashtagsView: \(self.hashtagsView.frame)")
    }
}


结果如下:

with tableView.estimatedHeight = 150

TotalWidth: 240.0
Content: (0.0, 0.0, 240.0, 119.666666666667)
HashtagsView: (0.0, 0.0, 240.0, 128.0)


没有估计身高
TotalWidth: 240.0
Content: (0.0, 0.0, 414.0, 43.6666666666667)
HashtagsView: (0.0, 0.0, 240.0, 128.0)


回顾

当有一个估计高度时,单元格的 contentView 不会打印正确的宽度,但会很好地显示单元格的内容,就像没有任何问题一样(除了 hashtagsView)。

当没有估计高度时,单元格的 contentView 确实会打印正确的宽度,这让我可以计算主题标签帧,但单元格以默认的 44 高度显示。


详细信息

由于我不知道有多少主题标签,我正在尝试使用空白 UIView 以编程方式添加 UIButton。为了计算主题标签按钮的目的,我需要单元格的 contentView 或 hashtagsView 的“宽度”,但是当我设置 tableView.estimatedHeight 时,单元格的宽度将是一些任意数字(例如 6s Plus Simulator 中的 240) .即使我没有自动布局问题,我也无法获得 hashtagsView 的宽度。

当我不给 tableView.estimatedHeight 一个估计值时,我得到以下信息:

Custom cells without estimatedHeight


已更新 - @EarlGray 在 cmets 中询问的更新

主题标签实际上是 UIButtons,我将它们动态添加到 hashtagsView。我需要拉伸 hashtagsView 的高度,使其适合多于一行的 hashtags。

我想我要么需要继承 UIView 并覆盖 layoutSubviews() 以实现适合垂直布局,要么以编程方式为每个子视图 (UIButtons) 添加约束。

按照@VinodVishwanath 所说的,设置estimatedRowHeight 并结合明确的高度和垂直空间限制给了我这个:

这无法让我获得 hashtagsView 的宽度。在计算 UIBUttons 的帧期间,我需要 cell.contentView 的宽度,但不知何故,设置estimatedRowHeight 为我提供了 cell.contentView.frame 的以下坐标

 Content: (0.0, 0.0, 240.0, 119.666666666667)

这是不正确的,因为它必须给出 414,这就是为什么我的主题标签从屏幕的一半开始。

注释掉 tableView.estimatedRowHeight 给我正确的坐标:

Content: (0.0, 0.0, 414.0, 43.6666666666667)

但是像这样把我的 tableView 弄乱了:


更新 #2 - 这是我对 cell.contentView 的限制

ContentView's constraints


更新 #3 - 我的 configureCell 方法上的断点

HashtagsView's superview returns nil!!

我不明白,我的 UIView IBOutlet 已连接,我仔细检查了。

所有 contentView.subviews 的帧都不正确。无超级视图的 hashtagsView 也是如此。

但是当我删除estimatedRowHeight 时,它突然将hashtagsView 视为单元格contentView 的子视图。除了 contentView,它的子视图框架仍然返回错误和负值。

【问题讨论】:

  • 此链接可以帮助您计算单元格的高度:stackoverflow.com/a/36095091/3918500
  • 您能否更新您的帖子以明确确认或否认您是否要支持具有多行支持的实时编辑?我的意思是如果我设置了足够多的主题标签,它们会溢出到下一行?
  • @EarlGrey 是的,我确实想支持这一点。但我不认为这是现场编辑,或者我不太了解你。因为我不想让用户编辑任何东西。我只希望主题标签流到下一行,而不会破坏自调整大小的自定义 uitableviewcells
  • 我对遥远的假设未来不感兴趣..您现在是否打算支持在您键入时调整单元格的大小?这不是问题的一部分吗?如果单元格已经有一定高度,hastags 在哪里(哪一行)溢出?如果我有 10 个需要 3 行的标签怎么办?因为您的单元格屏幕截图在单元格内显示了一个可编辑的文本控件。
  • @EarlGrey 不,我的单元格不可编辑。每个单元格中必须动态设置许多主题标签,从而使单元格的高度灵活。是的,现在我想在他们自己的 hashtagsView 中支持主题标签(UIButtons)的垂直布局。我已经更新了我的帖子,请查看。

标签: ios swift uitableview


【解决方案1】:

如果您不提供估计的行高,则单元格高度默认为 44,这就是您获得 43.667 的内容高度的原因。

您需要提供估计的行高,即在提供的字段中没有标签时的高度。然后,动态设置正确高度所需的只是正确的自动布局约束集,以提供contentView 的固有大小。

当您在 contentView 的所有子视图(包括 topSpaceToSuperviewbottomSpaceToSuperview 以启用 AutoLayout 引擎计算内在内容大小)之间设置垂直空间约束时,会发生这种情况。

编辑

我已经从屏幕截图中分析了您的约束,以下是您为计算单元格高度添加的相关约束:

  • Title.top = topMargin + 8
  • bottomMargin = 分享按钮.bottom
  • Link.centerY = 分享按钮.centerY
  • 标签 View.top = Title.bottom
  • Date.top = Hashtags View.bottom + 15

下面是这些约束的可视化表示:

上边距

|

标题

|

标签视图

|

日期

!!! 链接失效 !!!

链接——分享按钮

|

底边距

断开的链接阻止布局引擎计算单元格高度。您需要修复垂直布局中的断开链接,例如,通过设置Date.centerY = shareButton.centerY,或通过设置Date.top = HashtagsView.bottom

【讨论】:

  • 我想我已经尝试过明确地给每个子视图明确的高度。当我醒来并确认时,我会再试一次。
  • 除了每个子视图都有明确的高度外,子视图之间必须有一个垂直空间约束和一个顶部空间和一个底部空间约束到超级视图(从最顶部的子视图和最底部的子视图) ,分别)。
  • 我尝试在 hashtagsView 上给出垂直空间限制和显式高度,并设置了估计行高度,但设置估计行高度无法让我获得 cell.contentView 的正确宽度!我不知道为什么estimatedRowHeight 会改变contentView 的宽度!它给了我这个: 内容:(0.0, 0.0, 240.0, 119.666666666667) 看看我上面更新的帖子
  • 我没有使用 .xib 文件。我将上传我的约束的屏幕截图。检查我的帖子上的更新#2。
  • 缺少约束,导致 AutoLayout 引擎无法成功计算内容高度。我已经编辑了我的答案以详细说明。
猜你喜欢
  • 1970-01-01
  • 2019-10-12
  • 2011-06-20
  • 1970-01-01
  • 1970-01-01
  • 2014-12-15
  • 2015-12-09
  • 2011-06-04
相关资源
最近更新 更多