【问题标题】:Horizontally align UILabel and UIImageView together inside of a full width UIView在全宽 UIView 内将 UILabel 和 UIImageView 水平对齐
【发布时间】: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 中的限制问题。

标签: ios uiview autolayout interface-builder


【解决方案1】:

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

  1. 水平和垂直对齐UIView 相对于其父视图。
  2. UIImageUILabel 添加约束,以便将它们固定到UIView 的边缘。

UIView 将随着 UIImageUILabel 在其中的增长而增长。

【讨论】:

    【解决方案2】:

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

    使用界面生成器

    1. 在主视图内水平对齐
    2. 在主视图内垂直对齐(现在与 imageView 相同)

    在视图控制器中使用代码

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

    【讨论】:

    • 第三步,你的意思是为持有者UIView设置约束宽度吗?
    • 是的,UIView 将同时保存图像和标签
    • 您也可以在带有约束的情节提要中完全做到这一点。使用步骤 1 和 2。而不是 3 和 4,将约束添加到 UIImageUILabel 以引用它们现在嵌入的 UIView。如果 UIImageUILabel 被固定到边缘UIView,然后UIView 将随着它内部的视图增长。
    • @keithbhunter - 行得通!您可以将其发布为答案吗?
    【解决方案3】:

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

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

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

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

    【讨论】:

      猜你喜欢
      • 2015-12-28
      • 1970-01-01
      • 2020-10-07
      • 2015-05-07
      • 1970-01-01
      • 1970-01-01
      • 2016-10-19
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多