在全宽 UIView 内将 UILabel 和 UIImageView 水平对齐

Posted 2023-03-15

【中文标题】在全宽 UIView 内将 UILabel 和 UIImageView 水平对齐

【英文标题】：Horizontally align UILabel and UIImageView together inside of a full width UIView

【发布时间】：2015-05-08 18:44:45

【问题描述】：

我的布局中有一个UIView，它固定在我的VC 两侧。在其中我有一个图标UIImageView 和旁边的UILabel。无论标签内的文本有多长，我都希望这两个都在 UIView 内居中对齐。 （类似于在 CSS 中使用 text-align:center; 来对齐图像和文本中心）。

|          UIView         |
|                         |
|                         |
|                         |
|     |image| |label|     |
|                         |
|                         |
|                         |
|                         |

有时标签可能很长，但我仍然需要它们居中：

|          UIView         |
|                         |
|                         |
|                         |
|  |img| |label is long|  |
|                         |
|                         |
|                         |
|                         |

我知道如何使用Autolayout，但这个让我很困惑，因为我无法创建一个“持有人”UIView 并将其居中。我需要一些帮助来确定要在 IB 中添加的约束。

想法？

【问题讨论】：

您的问题不清楚。您是在寻找设置布局的代码还是在 IB 中设置约束时遇到问题？

@rmaddy - 抱歉，请帮助解决 IB 中的限制问题。

【参考方案1】：

基于@Mahmoud Adam 的回答，我们可以完全在情节提要中做到这一点。

水平和垂直对齐UIView 相对于其父视图。 为UIImage 和UILabel 添加约束，以便将它们固定到UIView 的边缘。

UIView 将随着 UIImage 和 UILabel 在其中的增长而增长。

【参考方案2】：

在主视图中创建一个新的UIView 并将UUImageView 和UILabel 放入其中，该视图应具有以下约束

使用界面生成器

在主视图内水平对齐 在主视图内垂直对齐（现在与 imageView 相同）

在视图控制器中使用代码

width = image.width + label.width + imageView & label 之间的水平间距 高度 = 最大值 (image.height, label.height)

【讨论】：

第三步，你的意思是为持有者UIView设置约束宽度吗？

是的，UIView 将同时保存图像和标签

您也可以在带有约束的情节提要中完全做到这一点。使用步骤 1 和 2。而不是 3 和 4，将约束添加到 UIImage 和 UILabel 以引用它们现在嵌入的 UIView。如果 UIImage 和 UILabel 被固定到边缘UIView，然后UIView 将随着它内部的视图增长。

@keithbhunter - 行得通！您可以将其发布为答案吗？

【参考方案3】：

我猜这很简单......使用故事板......

如果您还没有找到解决方案...请查看此图片并关注...

这里...绿色背景是图片中的UIView

我选择 update constraints 以查看来自 resolve autolayout views 的视图