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

Posted 2023-02-27

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

【英文标题】：How to implement constraints for 2 labels between 2 images for xib file

【发布时间】：2017-01-09 05:05:19

【问题描述】：

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

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

我尝试为每个元素（图像、2 个 UI 标签和按钮）的顶部、底部、左侧和右侧创建 4 个约束。我还为图像和按钮添加了 1:1 纵横比约束，以确保图像是方形的。然后我对齐了 2 个 UI 标签的左边缘。我将图像和按钮垂直居中。但是，它没有星号按钮，并且位置和标题切换了。如何使用约束创建此设计？

【问题讨论】：

您是否为左侧UIImageView 创建了底部约束？

【参考方案1】：

他们对此没有任何困难。 先说说你左边的UIImageView，设置如下约束，

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

在左边的UIImageView之后，设置以下约束，

superview 的尾随空格 固定高度 固定宽度 垂直居中

现在对于两个标签，将它们放入 UIView 并在约束条件下给出 UIView，

左图像视图的前导空间。 右侧图像视图的尾随空间。 superview 的顶部空间 superview 的底部空间

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

领先空间 尾随空格 顶部空间

现在对于较低的UILabel，设置以下约束，

领先空间 尾随空格 UILabel 上方的顶部空间 底部空间

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

【讨论】：

好的，我要试试！我想知道如果我设置一个固定的宽度和高度，如果用户使用更大的手机，图像看起来会不会很小？

您现在使用的屏幕类型，图像大小不会随着设备的变化而变化太大。所以你可以使用这个解决方案。我在许多应用程序中都这样做过，从未遇到任何问题。对我来说很好。如果它对您有用，请不要忘记投票。

根据要求，对UIImageView top.superview = 8px 而不是vertically center 进行约束。

【参考方案2】：

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