自动布局在 x 轴上居中 uilabel 适合内容，uiimage 跟随在左侧

Posted 2023-03-15

【中文标题】自动布局在 x 轴上居中 uilabel 适合内容，uiimage 跟随在左侧

【英文标题】：autolayout centering uilabel on x-axis fit to content with uiimage follow on the left side

【发布时间】：2014-07-31 14:05:58

【问题描述】：

我有一个UILabel，它应该水平居中，宽度应该根据它的内容长度来设置。在UILabel 的左侧，应放置一个UIImage，它应与UILabel 对齐。如果UILabel 需要更多空间，则应将UIImage 推向左侧，如果UILabel 需要更少空间，则应将UIImage 拉向x 中心。

我在没有布局的情况下可以正常工作，但必须使用自动布局。我正在尝试，但我无法弄清楚。

[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-padding-[img(16)][lblUserName]-padding-|" options:0 metrics:@@"padding":[NSNumber numberWithFloat:Padding] views:displayViewDic];

自动布局可以吗？所以有时它会像 1 号一样，而其他时候就像 2 号一样。

【问题讨论】：

使用故事板或代码？

【参考方案1】：

@"H:|-padding-[img(16)][lblUserName]-padding-|"

在这里，您是说图像必须与超级视图的前沿保持固定距离。这与您的描述不符。

您可能只需要将其更改为

@"H:|-(>=padding)-[img(16)][lblUserName]-(>=padding)-|"

允许边距有一定的灵活性。

要使视图水平居中，您必须手动创建约束：

[view addConstraint:[NSLayoutConstraint constraintWithItem:lblUserName
     attribute:NSLayoutAttributeCenterX 
     relatedBy:NSLayoutRelationEqual 
     toItem:view 
     attribute:NSLayoutAttributeCenterX 
     multiplier:1.0 
     constant:0]];

您不需要使用 sizeToFit 或任何其他类似的方法 - 图像视图和标签将具有基于图像或文本的固有内容大小。

因为你有一个不等式，你可能需要强制标签尽可能窄以防止拉伸：

[lblUserName setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];

【讨论】：

感谢您的回答。如何将 lblUserName 与 VFL 居中？还是应该创建另一个以 uilabel 为中心的约束？

是否仍应将 sizetoFit 与此约束设置一起使用？

【参考方案2】：

为标签添加水平中心约束。就是这样，一个合适的 y 位置约束将使标签保持在中心。它会在两个方向上均等地扩展以容纳内容。

现在，为图像视图的尾随空间和标签的 x 位置前导空间添加一个水平间距约束，为 y 位置添加一个合适的约束（也许将垂直中心与标签对齐？）和合适的约束/图像/尺寸的内在尺寸。

代码：

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[img(width)]-padding-[lblUserName]" options:0 metrics:@@"width": 50, @"padding": 20 views:displayViewDic]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:lblUserName attribute:NSLayoutAttributeCenterX relatedBy:0 toItem:superview attribute:NSLayoutAttributeCenterX multiplier:0.0 constant:0.0]];

【讨论】：

感谢您的帮助！现在可以了！我部分使用了你的答案来居中:)

@HashmatKhalil 你不需要使用不等式。这两行代码就是你所需要的。不要添加额外的约束。