在超级视图的中心保持两个可变宽度视图靠近在一起的约束

Posted 2023-02-23

【中文标题】在超级视图的中心保持两个可变宽度视图靠近在一起的约束

【英文标题】：Constraints to keep two variable-width views close together at the center of the superview

【发布时间】：2014-12-24 23:53:01

【问题描述】：

我在容器视图中水平并排有两个视图。它们相距 8 点，但宽度可变。我想保持两个视图的中心等于容器视图的中心，这样无论容器的大小，两个视图一起位于屏幕的中心。

我的想法是创建两个水平约束，一个从容器的左边缘到第一个对象的左边缘，一个从第二个对象的右边缘到容器的右边缘。然后，我将使这两个约束彼此相等，但随着容器的大小而变化。不幸的是，我找不到这样做的方法。我只能弄清楚如何使约束等于或大于/小于特定值。有没有办法做到这一点？

【问题讨论】：

他们是什么样的观点？标签？包含其他视图的复杂视图？

它们是基本的 UIViews。

【参考方案1】：

您应该能够在 IB 中做到这一点。

创建一个宽度为 1 的空视图并设置一个水平约束以将其定位在容器的中心。这是一个占位符。

在你的两个视图上设置相对于这个中心占位符视图的约束：

左视图应该对占位符前沿有尾随约束。

右视图应该对占位符后沿有前导约束。

调整这两个约束的常量，以达到您想要的左右视图之间的间距。

【参考方案2】：

临时思考，你有没有尝试给左视图一个前导约束，给它的上级，给右视图一个尾随约束，然后给这两者一个水平间距约束和一个等宽约束？

【参考方案3】：

如果你想要这样的东西：

[   <-  equal  -> <-  equal  ->   ]
[         [view1] [biggerview2]   ]-- resizable superview, fixed-width views

视图之间有 8px，然后：

view1.trailing = superview.centerX - 4
biggerview2.leading = superview.centerX + 4

以及其他明显的限制，例如：

view1.leading >= default
view1.width > 0

superview.trailing >= biggerview2.trailing + default
biggerview2.width > 0

...

【讨论】：

这可能是个愚蠢的问题，但在 Interface Builder 中有没有办法做到这一点？

【参考方案4】：

只需将您的两个视图嵌入到容器视图中即可。设置约束，使容器紧密地拥抱两个视图。然后，将容器视图置于其父视图的中心。

【参考方案5】：

是的，有一种方法： 您有超级视图，其中有 2 个子视图（您希望将 50:50 设置为超级视图宽度）： 您需要将宽度约束（等宽）从子视图连接到父视图，并将此约束的乘数从 1 更改为 0.5（您也可以使用语法 1:2（或 1:3 用于 3 个子视图））。 您也可以在那里设置常量值来设置填充：

示例如下：

子视图的宽度与父视图的比例为 2:1，并且 32 是固定的填充（每边 16 个）

所以它计算为（对于 iPhone 4S 屏幕）（320 宽度 - 32 常数）/2 = 子视图宽度

您也可以对 3、4、5 个子视图执行相同操作，以制作更复杂的视图。 这是我的另一个示例的链接：https://dl.dropboxusercontent.com/u/48223929/AutolayoutExampleView.xib