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

Question

我将简要介绍一下情况：里面有一个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.

我如何在故事板（没有代码）中执行此操作？

Answer 1

Connor的答案肯定会有效，你可以做的另一件事是使用NSLayoutConstraint乘数。以下是步骤：

1）创建三个宽度相等的UIView个UIImageView。对于此示例，我使用了@echo off setlocal EnableDelayedExpansion for /l %%n in (0,1,999) do ( set "num=00%%n" echo !num:~-3! ) pause>nul s，但这与此目的无关。

2）将每一个设置为具有相同的垂直约束（即从底部开始50pts，或者将每个设置为＆＃34;在容器中垂直居中＆＃34;

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

4）每个视图在容器中水平居中后，更改它们的乘数以确定视图的x轴中心点距离x轴上的superview的中心点的距离。如果你想让三个视图均匀分布，我会将乘数分别设置为（0.5,1.0,1.5）。

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

编辑 - 进一步解释：

这里发生的是你在x轴上设置子视图的中心以与超视图的x轴中心对齐，但是当你设置乘数时你需要＆＃ 39;重新告诉它设置该距离的一小部分。当它设置为1.0时，您说您希望子视图的centerX为超级视图的宽度0.5。当您将乘数设置为0.5时，您基本上要求子视图的centerX为超视图宽度的1/2（1/2 * 1/2 = 1/4），因此您需要＃39;将子视图的centerX设置为超视图宽度的1/4。同样的事情1.5 - 你然后说你希望子视图的中心是superview宽度的1/2的3/2（3/2 * 1/2 = 3/4）所以子视图＆＃ 39; s centerX将是superview宽度的3/4。

Answer 2

这是UIStackView的一个很好的案例。将容器视图（V）配置为：

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

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

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