您如何应用自动布局约束来将标签与背景图像元素对齐？

Posted 2023-03-12

【中文标题】您如何应用自动布局约束来将标签与背景图像元素对齐？

【英文标题】：What do you apply auto layout constraints to line up labels with background image elements?

【发布时间】：2016-02-26 01:49:03

【问题描述】：

有关示例，请参见下面的屏幕截图，但这是问题所在。我有 3 个文本标签，我正在尝试将这些标签与作为图像视图一部分的 3 个圆圈对齐。当图像设置为 Aspect Fit 并与各种 iPhone 尺寸一起缩放时，似乎会出现问题。我可以水平对齐文本标签，但我无法弄清楚如何将垂直约束设置为正确“缩放”。任何建议或方向都会很棒，谢谢！

【问题讨论】：

分割背景图像并将圆圈作为单独的 UIImageViews 可能会简单得多。

嗯，我肯定喜欢这个建议。我很好奇是否有使用约束的答案，但我可能只是将图像切片。感谢您的帮助！

【参考方案1】：

您是否为垂直约束设置常量？尝试针对视图的高度设置垂直约束。实现此目的的一种方法是设置 Center horizontally 约束并将乘数更改为 1.8 或适合的值。

【讨论】：

不确定“根据视图高度设置垂直约束”是什么意思。你是说文字标签的高度吗？图像视图的高度？我知道如何设置乘数，只是不确定您建议我设置它的确切位置。我试过在几个地方使用乘数，但它似乎总是真的把事情搞砸了，但我很可能只是在错误的地方应用它。感谢您的帮助！

只需 ctrl 将标签拖到图像视图并选择 Center Horizontally 然后选择标签并在右侧单击 Aligh Center Y to 约束上的 Edit 按钮并设置在你的情况下乘以 1.8~2.0。

做到了。我不得不使用 1.68 作为乘数，但这正是解决方案。谢谢@j-wang！

【参考方案2】：

控制从标签拖动到图像，你会得到一个约束选项列表。选择“垂直居中”和“水平居中”选项。然后标签将被限制在您想要的图像中心。有用。见附图；我在 iPhone 6s 和 iPad Pro 上做过，只是为了表明它可以随任何尺寸缩放。

【讨论】：

如果我将这些圆圈变成 3 个单独的图像，这将起作用，这很可能是我会做的。现在它们都是由蓝色和白色圆圈组成的 1 个“背景”图像的一部分。感谢您的帮助！

是的，这可能是最好的。如果您设置为不将它们分开，您可以将标签设置为具有居中文本，然后给它们所有相等的宽度并将它们限制在它们的两侧（即“|-0-（label1）-0-（lable2）-0- (label3)-0-|") 然后像上面提到的那样将它们垂直居中。这有点危险，因为它假设图像居中并且正好是 superView 的 1/3 宽度；但如果是这样的话，那么它会起作用:)

实际上，您提到您已经弄清楚了水平居中，所以请忽略我在上述评论中的建议。您仍然希望像上面提到的那样将每个标签垂直居中于 imageView。它们都将垂直居中于同一个图像，而不是像我那样使用三个单独的图像。

是的，效果很好。我仍然认为将来像第一个建议那样分割 UI 会更容易，所以我必须记住这一点。感谢您的帮助！