具有自动布局配置的UITableCell多行UILabel被截断 [英] UITableCell with auto layout configured multiline UILabel being truncated

问题描述

我正在努力尝试让一些多行标签在tableview单元格内表现.我已经摆脱了这个问题中所述根本无法可靠工作的堆栈

I'm wrestling trying to get some multiline labels behaving inside tableview cells. I've already moved away from stacks that didn't work reliably at all as described in this question

UITableViewCell内的嵌套UIStackViews内的UILabel有时会被截断

我借助关于该问题的评论修复了我的一种观点，但即使移至自动布局的非堆栈视图设置之后，另一种观点也对我不起作用.然后，我最终将无法工作的单元格移动到使用相似布局的视图中，并在同一视图中到了两个单元格，一个工作了而另一个不工作的地步.我已将此导出到新的测试应用程序中，并在此处

I fixed one of my views with the help of the comments on that question but another view just wouldn't work for me, even after moving to an autolayout non-stackview setup. I then ended up moving the cell that i couldn't get to work into the view which was working with similar layout and got to a point where i have two cells in the same view, one that worked and one that didn't. I've exported this into a new test app which I've uploaded here

在此应用中，有一个简单的表格视图，其中包含2个单元格.一个单元格会正确显示大的多行文本，并根据需要展开该单元格.另一个单元格停下来并截断多行标签，如您在此处看到的

In this app there is a simple tableview with 2 cells within it. One cell displays the large multiline text properly and expands the cell as required. The other cell stops short and truncates the multiline label as you can see here

在我看来，这两个单元格的约束条件几乎相同，因此我很困惑为什么一个起作用而另一个却不起作用.这是他们约束的概述

The two cells to me seem pretty much identical in their constraints so I'm very confused why one works and the other doesn't. Here's an overview of their constraints

由于我一直在尝试找出导致单元格不工作的原因，因此未安装一些约束条件.

There are a few constraints not installed as i've been experimenting trying to figure out what's causing one of the cells to not work.

如果有人可以向我解释是什么原因导致这两个单元格的行为不同，或更重要的是，为什么其中一个标签没有填满它的表格单元格，我已经花了很多时间寻找和理解它，所以我们将不胜感激.只是似乎无法弄清楚.

If anyone could explain to me what is causing these two cells to not behave the same, or more importantly why one of the labels doesn't fill its table cell that'd be really appreciated as I've spent hours looking and just can't seem to figure it out.

干杯！

推荐答案

首先要解释出什么问题了...

To explain what went wrong in the first place...

Cell2中右侧的标签标签"具有显式的Preferred Width = 300.我不知道内部结构，因此无法确切说出正在发生的事情，但是我得到的印象是，自动版式在计算文本边界框高度时会考虑该Preferred Width值，然后 继续说明约束，内容，内在大小等.

The Right-side "Tags Label" in Cell2 has an Explicit Preferred Width = 300. I don't know the internals, so can't say exactly what's happening, but I get the impression Auto-Layout will take that Preferred Width value into consideration when calculating the text bounding-box height, and then continue on with constraints, content, intrinsic size, etc.

只需取消选中该显式选项即可解决此问题.

Simply un-checking that explicit option will fix the issue.

原始答案:

我发现从头开始创建一个新的Cell较容易，而不是尝试修改您设置的约束，因此...希望可重复.

I found it easier to start a new Cell from scratch, rather than try to modify the constraints you had set up, so... This will hopefully be reproducible.

Prep:添加新的"Cell3"类；对代码进行基本编辑以适应Cell3.如果为标签值设置一些变量并设置元素的背景颜色以便于直观检查和测试，我也会发现事情变得更容易.

Prep: Add new "Cell3" class; make basic edits to code to accommodate Cell3. I also find things easier if I make some variables for label values and set background colors of elements for easy visual inspection and testing.

第1步:添加新的原型；紫色背景； TableViewCell3类和"Cell3"重用ID；垂直拉伸它以使其足够高(不会影响运行时高度).

Step 1: Add a new prototype; purple background; TableViewCell3 class and "Cell3" reuse ID; stretch it vertically to make it tall enough to work with (it won't affect run-time height).

步骤2:为左侧标签添加UIView. Leading = 8进行超级观看. Width = 200; Height = 100;垂直居中.高度和宽度值将在以后更改.

Step 2: Add a UIView for the Left Side labels. Leading = 8 to Superview. Width = 200; Height = 100; Center Vertically. The Height and Width values will be changed later.

第3步:将两个左侧标签-1和2(正文字体)添加到UIView.约束1 Left = 0; Top = 0.约束2 Left = 0; Bottom = 0.

Step 3: Add the two Left Side labels - 1 and 2 (Body font) - to the UIView. Constrain 1 Left = 0; Top = 0. Constrain 2 Left = 0; Bottom = 0.

第4步:将7.5的2到1的垂直间距约束和 change 的UIView的Height约束添加到>= 20(运行时可能总是 超过20).

Step 4: Add a vertical spacing constraint from 2 to 1 of 7.5 and change the Height constraint of the UIView to >= 20 (runtime will likely always exceed 20).

第5步:更改 UIView的宽度约束为>= 40(运行时间可能总是超过40)；为两个左侧标签添加Trailing Space to Container约束，并将它们设置为>= 0.

Step 5: Change the Width constraint of the UIView to >= 40 (runtime will likely always exceed 40); Add Trailing Space to Container constraints for both Left Side labels, and set them to >= 0.

第6步:在>= 0的UIView中添加顶部和底部到Superview"约束.

Step 6: Add Top and Bottom "to Superview" constraints to the UIView of >= 0.

步骤7:添加右侧标签(标题1字体，行数0).将Top >= 0，Right = 0，Bottom >= 0都约束为Superview；也可以垂直居中.

Step 7: Add the Right Side label (Caption 1 font, number of lines 0). Constrain Top >= 0, Right = 0, Bottom >= 0, all to Superview; also Center Vertically.

第8步:从右侧标签向 UIView添加一个水平间距约束，设置为20.给右侧标签设置宽度约束= 40(运行时总是可能会超过40)，然后将 Priority 设置为250.这样，包含左侧标签的UIView就可以控制宽度.

Step 8: Add a Horizontal spacing constraint from Right Side label to UIView, set to 20. Give Right Side label a Width constraint = 40 (runtime will likely always exceed 40), and set the Priority to 250. This allows the UIView containing the Left Side labels to be in control of the widths.

第9步:分配IBOutlets并运行该应用程序.尝试更改文本.使左侧标签变短或变长...尝试将右侧标签设置为仅一行足够的文本...等等.

Step 9: Assign IBOutlets and run the app. Try changing up the text. Make the left side labels shorter or longer... try setting the right side label to only enough text for one line... etc.

这时，一切看起来应该不错-直到...您在一个左侧标签中放置了过多的文本，这时您将获得一个非常非常狭窄，非常非常高的右侧标签.所以...

At this point, things should look pretty good - until... you put too much text in one of the left side labels, at which point you'll have a very, very narrow, very very tall right side label. So...

第10步:在UIView中添加另一个宽度约束并将其设置为<= 200.根据您的实际内容，您可能需要对其进行修改-或将其设置为<=单元格宽度的百分比.

Step 10: Add another Width constraint to the UIView and set it to <= 200. Depending on your actual content, you may want to modify that - or perhaps set it to <= to a percent of the width of the cell.

我更新了原始的GitHub存储库，以便您可以签出.对于上面列出的每个步骤"，都应该有一个提交，这可能使后续操作更容易- https://github.com/DonMag/CellTest2

I updated my original GitHub repo so you can check it out. It should have a commit for each "step" listed above, which might make it easier to follow along - https://github.com/DonMag/CellTest2

结果:

这篇关于具有自动布局配置的UITableCell多行UILabel被截断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！