【问题标题】:UILabel inside nested UIStackViews inside UITableViewCell sometimes truncatingUITableViewCell 内的嵌套 UIStackViews 中的 UILabel 有时会截断
【发布时间】:2017-12-08 08:09:45
【问题描述】:

我的一个表格设置中有一个表格视图单元格,包含以下视图层次结构

外部水平堆栈视图固定在单元格的内容视图的尾随、前导、底部和顶部边缘。

右侧标签固定在其父 stackViewHackView 的尾随、前导、底部和顶部边缘

在我的控制器代码中,我将单元格设置为动态高度以适应单元格的内容,因此它们可以根据内容大小进行增长或缩小

tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 30.0 

关于自动布局设置。 (BOLD 中的相关优先级)

  • 外部水平堆栈视图
    • 内容拥抱优先级 == 250
    • 内容抗压缩优先级 == 750
    • 内部垂直堆栈视图
      • 内容拥抱优先级 == 750
      • 内容抗压缩优先级 == 750
      • 左标签 1
        • 内容拥抱优先级 == 750
        • 内容抗压缩优先级 == 750
      • 左标签 2
        • 内容拥抱优先级 == 750
        • 内容抗压缩优先级 == 750
      • 视图(只是将两个左侧标签填充到堆栈视图的顶部)
        • 内容拥抱优先级 == 250
        • 内容抗压缩优先级 == h:750; v:250
    • stackViewHackView(使多行标签在堆栈视图和单元格内正常增长的技巧)
      • 内容拥抱优先级 == 250
      • 内容抗压缩优先级 == h:250; v:750
        • 降低水平阻力以允许此视图压缩以适应左侧堆栈视图
    • 右标签
      • 内容拥抱优先级 == 250
      • 内容抗压缩优先级 == h:250; v:750
        • 降低水平阻力以允许此视图压缩以适应左侧堆栈视图

我用下面的代码在一个简单的测试应用程序中用测试数据填充这个单元格

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
{
  let cell = tableView.dequeueReusableCell(withIdentifier: "testCell", for: indexPath) as! TestTableViewCell


  // Configure the cell...

  if indexPath.section == 0
  {
    cell.leftLabel1?.text = "Label1 aabbccdd"
    cell.leftLabel2?.text = "Label2 aabbccdd"
    cell.rightLabel?.text = "Cell \(indexPath.row) with a 'really really' long string that needs displaying clearly and causing the table cell to resize to fit the content. We're looking for about 3 or 4 lines of text to be displayed"
  }
  else if indexPath.section == 1
  {
    cell.leftLabel1?.text = "Label1 aabbccdd"
    cell.leftLabel2?.text = "Label2 aabbccdd"
    cell.rightLabel?.text = "Cell \(indexPath.row) with a 'really really really' long string that needs displaying clearly and causing the table cell to resize to fit the content. We're looking for about 3 or 4 lines of text to be displayed"
  }
  else
  {
    cell.leftLabel1?.text = "Label1 aabbccdd"
    cell.leftLabel2?.text = "Label2 aabbccdd"
    cell.rightLabel?.text = "Cell \(indexPath.row) with a 'really really really really really really really really' long string that needs displaying clearly and causing the table cell to resize to fit the content. We're looking for about 3 or 4 lines of text to be displayed"
  }

  return cell
}

这会在 iPhone 7 目标上的模拟器中进行以下渲染

中间的 tableview 单元格是我一直想要得到的那种输出。我不希望左侧标签被截断,它们的内容总是足够小以适合右侧。然而,鉴于右侧的某些内容,较长的 Label 2 有时会被截断,如您在顶部和底部行中看到的那样。

我已经设置了内容压缩阻力,使得左侧的所有元素都具有高压缩阻力,而右侧的元素设置为较低的阻力,以便它们应该压缩为左侧元素腾出空间。

任何想法为什么会发生这种情况,或者我可以如何阻止它发生以便我的标签始终正确显示?

干杯!

【问题讨论】:

  • 标签 1 和 2 会多行吗?或者总是单行,你永远不希望它们被截断?
  • 感谢您的回复。是的,这是完全正确的。我几乎在这篇文章的标题中添加了一行,但我认为它已经足够令人费解了。左边的标签都是一行,内容很短。正确的标签是多行的,并且单元格将增长以适应所有内容。任何地方都不应该有任何截断。但是你可以看到左边的截断真的让我很困扰。如果有人感兴趣,可以提出一个测试项目。虽然我正在使用的这个项目与其他测试有点混乱。
  • 你已经习惯使用堆栈视图了吗?我相信我有一个适合你的解决方案,但它不使用它们......
  • 我更喜欢使用堆栈视图,因为它们似乎非常适合这种情况。但在这一点上,我会考虑任何解决方法。特别是如果我们认为堆栈视图是问题的一部分?我认为这也与标签有关。
  • 这可能只是“在我看来如何”,但是......我见过很多人使用包装在堆栈视图中的堆栈视图包装在堆栈视图中,而带有约束的简单视图可以做到工作。看看我在这个项目中是如何做到的:github.com/DonMag/CellTest2 ... 这真的很简单,你可以看看标签,看看我在改变优先级方面做了多少事情。我使用了您的示例字符串,并添加了更多案例来测试变体。

标签: ios uitableview autolayout uilabel uistackview


【解决方案1】:

(根据 OP 作为答案添加)

这可能只是“在我看来如何”,但是...我见过很多人使用包装在堆栈视图中的堆栈视图,而带有约束的简单视图可以完成这项工作。

看看我在这个项目中是如何做到的:github.com/DonMag/CellTest2

这真的很简单,你可以看看标签,看看我在改变优先级方面需要做的事情有多么少。我使用了您的示例字符串,并添加了更多案例来测试变体。

【讨论】:

  • 谢谢。看起来堆栈视图应该是简化自动布局设置的好东西,甚至支持一些改进的功能,例如在堆栈视图中隐藏视图并使其正确适应。可悲的是,至少目前看来仍然存在一些错误。按照您的示例,我设法解决了有问题的观点。只是再次陷入相似但略有不同的观点。您的自动布局解决方法仍然回答了所描述的问题!干杯!
  • 你想使用 UIStackViews - 否则,支持可访问性和动态字体将是一场噩梦。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-06-04
  • 1970-01-01
  • 2012-08-16
  • 1970-01-01
  • 1970-01-01
  • 2016-01-09
  • 1970-01-01
相关资源
最近更新 更多