如何使用动态值

Question

我水平连续3个项目（值是示例而不是实际值）：

<----100p----> LABEL <-3p-> IMAGE <-3p-> LABEL <----100p---->

我需要两个100p约束始终彼此相等，但该值可以小于或等于100p。标签和图像之间的3p约束必须始终为3p。例如，在较小的设备上，两个100p约束可能会降低到50p，以保持整个结构在较小的屏幕上居中，同时保持标签和图像的大小以及3p约束。

如何根据这些要求设计约束？我一直遇到一个问题，即三个元素在不同的设备上居中，因为我不能从视图到标签获得两个相等但缩放的约束。

变得简单：我需要两个标签始终在视图中等距（值无关紧要），同时还要保持3p约束和标签的尺寸/比例。图片。

编辑：

如果我尝试为标签保持相等的宽度，那么在较小的屏幕上，标签文字不适合其宽度

Answer 1

1. 将标签和图像放在水平堆栈视图中。

   • 您可以通过按住键盘上的Command并单击每个视图，从当前状态执行此操作。一旦突出显示，请通过顶部菜单Editor > Embed In > Stack View。
2. 添加约束以使堆栈视图在其超级视图中居中（主视图？）。
3. 将堆叠视图Distribution设置为Fill，将Spacing设置为3（用于3p间距）。
4. 在两个标签之间设置相等的宽度约束，使它们始终保持相同的宽度。
5. 在每个标签上转到Size Inspector并将Horizontal Compression Resistance Priority设置为1000（必填），这样他们就不会被压缩而不显示所有文字。如果图像被挤压，您可能需要为图像执行此操作。或者，您可以在图像上设置最小宽度约束或固定宽度约束（请参阅下一步）。

6. 决定如何处理图像宽度。

   • 选项1：在任何标签或图片上设置无固定宽度限制，并将图片Horizontal Content Hugging Priority设置为高于或低于标签的Horizontal Content Hugging Priority，以确定是否图像将拉伸以填充堆栈视图，或者标签将拉伸以填充堆栈视图。
   • 选项2：在图像或标签上设置一个带约束的固定，以保持它们所需的宽度，并使另一个视图（没有固定宽度约束）拉伸以填充。

7. 在堆栈视图及其超级视图（主视图或安全区域，您需要的任何一个）之间添加相等的宽度约束，并设置约束的Priority（在{{1中找到）选择约束）到750（小于1000）和Size Inspector到-200。

   • -200的常量告诉它你希望堆栈视图的宽度比主视图的宽度小200（每边100个就像你想要的那样）。
   • 小于Constant的优先级意味着如果有必要，可以中断此约束以满足您定义的其他更高优先级要求。如果需要，可以在较小的屏幕上将每侧的100个间距缩小到较低的值。

我提出了一个新的故事板，并用各种尺寸的屏幕自己测试，它对我有用。有几个变量我不确定你想要如何处理标签宽度和图像宽度，但我无法对帖子发表评论。