ios将3个视图放置在另一个具有自动布局的视图中

Posted 2023-03-13

【中文标题】ios将3个视图放置在另一个具有自动布局的视图中

【英文标题】：ios placing 3 views inside another view with auto layout

【发布时间】：2017-01-13 17:58:41

【问题描述】：

我简单解释一下情况：里面有一个 ViewController VC 和一个 View V ，布局约束如下：

到 VC 的水平（左右）间距为 0 到 VC 的垂直（仅底部）间距为 0 纵横比 75:23

像这样：

 ____
|    |
|    |      
|____|           
|____| <- V

我想在 V 中放置 3 个视图，所以假设我们将 V 分成 4 部分：

 ___________ 
|  |  |  |  |
|  |  |  |  |
|__|__|__|__|

I wanna place my new 3 Views V1, V2 and V3 like this:

 ___________ 
|  |  |  |  |
| [1][2][3] |
|__|__|__|__|

that is, all centered vertically on V middle and the View Vi on (i/4) of V width.

如何在情节提要中执行此操作（无需代码）？

【问题讨论】：

我在下面添加了一个答案，其中的示例描述了我认为您所要求的内容。

【参考方案1】：

Connor 的回答肯定会奏效，您可以做的另一件事是使用 NSLayoutConstraint 乘数。步骤如下：

1) 创建三个不同的UIViews，它们的宽度都相同。对于这个例子，我使用了UIImageViews，但这与此目的无关。

2) 将每一个设置为具有相同的垂直约束（即距离底部 50pts，或将每一个设置为“在容器中垂直居中”

3) 要将它们均匀地分布在水平面上，您可以将它们分别设置为“在容器中水平居中”。

4) 一旦每个视图在容器中水平居中，更改它们的乘数以确定视图在 x 轴上的中心点与父视图在 x 轴上的中心点的距离。如果您希望三个视图均匀分布，我会将乘数分别设置为 (0.5, 1.0, 1.5)。

这是一个显示三个视图的图像，宽度和高度均为 50：

编辑 - 进一步解释：

这里发生的情况是，您将子视图在 x 轴上的中心设置为与父视图 x 轴的中心对齐，但是当您设置乘数时，您是在告诉它被设置为其中的一部分距离。当它设置为 1.0 时，您说您希望子视图的 centerX 为父视图宽度的 0.5。当您将乘数设置为 0.5 时，您实际上是在说您希望子视图的 centerX 为父视图宽度的 1/2 的 0.5（1/2 * 1/2 = 1/4），所以您是将子视图的 centerX 设置为父视图宽度的 1/4。与 1.5 相同 - 然后您说您希望子视图的中心是父视图宽度的 1/2 的 3/2 (3/2 * 1/2 = 3/4)，因此子视图的 centerX 将是父视图宽度的 3/4。

【讨论】：

我在stackview上遇到了一些问题，我不想用代码来处理这个问题，所以你的解决方案更好......我发现它有点难以理解（因为每一步都给了我奇怪的结果) 但我做到了:)

@Daniel - 太棒了！很高兴能提供帮助，我很高兴您能够排除故障以到达您需要的位置！

【参考方案2】：

这是UIStackView 的绝佳案例。将容器视图 (V) 配置为：

let myContainer = UIStackView()
myContainer.axis = .horizontal
myContainer.alignment = .center
myContainer.distribution = .equalCentering

axis 告诉它水平堆叠子视图。 alignment 给出了非轴的对齐方式；也就是说，它垂直居中每个子视图。并且equalCentering 分布会告诉堆栈视图每个子视图的中心之间的空间应该相等。

然后您需要做的就是配置每个子视图的大小（即，为width 添加一个编程约束，除以容器宽度），并为每个子视图配置addArrangedSubview。