如何为 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
毕竟,我认为这对你有用。
您可以使用下图中的约束。它适用于所有屏幕尺寸和任何行高。
编辑:如果您不喜欢,请发表评论,以便我改进我的问题
我正在尝试在我的 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
毕竟,我认为这对你有用。
您可以使用下图中的约束。它适用于所有屏幕尺寸和任何行高。