如何在运行时更改标签约束? [英] How to change label constraints during runtime?

问题描述

我有一个表格视图和其中的一个单元格.该单元格包含三个标签:标题标签和一个下方的两个标签.有时，如果它们不包含数据，我需要隐藏下面的这两个标签，并将标题标签"的顶部空间到容器"更改为中心 Y 到容器".当两个标签包含数据时，当然会恢复约束.这是一个简单的演示项目的截图，只是为了展示这个想法:

I have a table view and a cell inside it. The cell contains three labels: header label and two labels below one to each other. Sometimes, I need to hide those two labels below if they do not contain data and change "Top space to container" of "Header label" to "Center Y to container". And of course revert the constraints back when two labels contain data. Here's a screenshot of simple demo project just for showing the idea:

更新 Max MacLeod 的回答指出了正确的方向.诀窍是在隐藏第一个和第二个标签时将标题标签向下推.所以我们需要为第一个和第二个标签设置容器视图的底部空间，而不是为标题标签创建容器视图的顶部空间.隐藏/取消隐藏应该通过具有高度出口(第一个和第二个标签的高度约束)并将它们的常量值设置为零(并在取消隐藏时设置回值)来完成.我还将源代码示例上传到Github.

UPDATE Max MacLeod answer pointed to right direction. The trick is to push header label down when first and second labels are hidden. So we need to set bottom space to container view for first and second labels instead of creating top space to container view for header label. And hiding/unhiding should be done by having height outlets (height constraints for first and second label) and setting their constant values to zero (and setting back value when unhiding). I also uploaded the source code example to Github.

推荐答案

选择标题标签，以及下方标签之一，并添加一个新的垂直空间约束来反映它们之间的间隙.接下来，删除标题标签顶部空间到容器约束.也许你已经有了这个(从屏幕抓取中看不太清楚).如果你这样做了，那很好.

Select the header label, and one of the lower labels, and add a new vertical space constraint reflecting the gap between them. Next, remove the header label Top space to container constraint. Maybe you already have this (can't quite see from the screen grab). If you do, that's good.

现在，为每个较低的标签创建两个高度约束.IBOutlet 给你的班级.

Now, create two height constraints for each lower label. IBOutlet those to your class.

然后，通过将每个高度约束的 constant 设置为 0.f，在需要时隐藏这两个较低的标签.

Then, hide those two lower labels whenever you need to by setting each height constraint's constant to 0.f.

这将使它们不可见并降低上方的标题标签，使其现在在容器中垂直居中 Y.

That will render them invisible and lower the header label above so that it is now vertically centered Y in the container.

将再次执行这些步骤(评论太长了！).顺序对 IB 很重要，因为首先您必须添加一个新约束，然后才能删除旧约束.暂时你会有一个多余的约束.这是因为 IB 不允许歧义.因此，首先添加新的垂直空间约束.这将定义上标签的 Y 位置.然后，从上部标签中删除多余的垂直空间到容器约束.现在该标签将使用相对于较低标签的垂直空间进行 Y 定位.接下来，为每个较低的标签添加高度约束，并使用 IBOutlet 链接到类.另一件事，实际上您需要将较低的标签约束到具有底部空间约束的容器.当它们的高度减小到零时，它们会消失，并且上面的标签会向下移动以占据 Y 中心位置.

Will go through the steps once more (was too long for a comment!). Sequence matters with IB as first you must add a new constraint before you can delete the old one. Temporarily you will have one superfluous constraint. It's because IB won't allow ambiguity. So, first add the new vertical space constraint. That will define the Y position of the upper label. Then, remove the superfluous vertical space to container constraint from the upper label. Now that label will be Y positioned using the vertical space relative to the lower labels. Next, add the height constraints for each lower label and link to the class with an IBOutlet. One other thing, actually you will need the lower labels to be constrained to the container with a bottom space constraint. When their height is reduced to zero, they will disappear, and the upper label will move lower to assume the Y center position.

要恢复，只需将 constant 设置回原始值.

To revert, just set the constant back to the original value.

这是一种比添加/删除约束更好的方法，这是一种重量级操作.请注意，您可能希望将两个较低的标签添加到容器"视图中，以便它们可以显示/隐藏为一个.此外，它会整理代码，因为您确实希望垂直空间位于上标签和两个下标签之间，而不仅仅是一个.

This is a much better approach than adding/removing constraints, which is a heavyweight operation. Note that you may wish to add the two lower labels to a "container" view, so that they can be shown/hidden as one. Also, it would tidy the code as you really want the vertical space to be between your upper label, and both lower labels rather than just one.

另请参阅我的回答 带有隐藏 UIViews 的自动布局?

这篇关于如何在运行时更改标签约束?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！