如何为 xib 文件的 2 个图像之间的 2 个标签实现约束

How to implement constraints for 2 labels between 2 images for xib file

编辑:如果您不喜欢,请发表评论,以便我改进我的问题

我正在尝试在我的 xib 文件中重新创建自定义 table 视图单元格,如下所示。公司的方形形象在左边。公司名称和公司展位(2 UI 标签)在公司图片右侧。星形按钮位于文本右侧,是一个方形图像。我估计公司的图片和收藏夹按钮应该距离顶部和边缘大约 8px。

我尝试为每个元素(图像、2 个 UI 标签和按钮)的顶部、底部、左侧和右侧创建 4 个约束。我还向图像和按钮添加了 1:1 纵横比约束,以确保图像是正方形的。然后我对齐 2 UI 标签的左边缘。我将图像和按钮垂直居中。但是,它没有星号按钮,位置和标题也发生了变化。如何使用约束创建此设计?

他们对此没有困难。 首先,如果我们谈论你的左边 UIImageView,设置以下约束,

  • 前导约束
  • 固定高度
  • 固定宽度
  • 垂直居中

在左边的UIImageView之后,设置如下约束,

  • 从 superview
  • 尾随 space
  • 固定高度
  • 固定宽度
  • 垂直居中

现在,对于两个标签,将它们放在 UIView 中并给 UIView 遵循约束条件,

  • 从左侧图像视图领先 space。
  • 从右图像视图尾随 space。
  • 来自 superview
  • 的顶部 space
  • 底部 space 来自 superview

现在对于上层 UILabel,设置以下约束,

  • 领先space
  • 尾随 space
  • 顶部space

现在较低 UILabel,设置以下约束,

  • 领先space
  • 尾随 space
  • 顶部 space 来自上部 UILabel
  • 底部space

毕竟,我认为这对你有用。

您可以使用下图中的约束。它适用于所有屏幕尺寸和任何行高。