自动布局居中视图(以编程方式)

如何以编程方式添加“自动布局”约束以将视图居中放置在剩余空间中(请参见下面的示例图片)?

在这里输入图像说明

目前,我在底部添加一个容器视图,然后将视图集中在容器视图中,但是我想知道是否有其他解决scheme而不需要使用容器视图。

你需要添加一个spacer视图来做到这一点。

我们从一些观点开始:

一些意见

我将设置粉红色视图占据根视图的前70%。 首先我把它钉在根视图的所有四个边上:

粉红色约束

然后,我将通过两种方式编辑底部约束。 首先,我确定第一项是粉红色视图,第二项我设置了0.7的乘数。 然后我更新粉红色视图的框架:

调整粉红色约束

接下来我将添加spacer视图。 我不希望间隔视图在运行时可见,所以我会隐藏它。 隐藏的视图仍然参与布局。 在设置约束条件之前,我只需将间隔器放在蓝色视图的左侧:

添加了spacer

现在我将创build约束条件,使间隔从粉色视图的底部延伸到根视图的底部。 宽度并不重要,所以我只是将它钉在超视图的左边缘并使其变薄:

间隔约束

现在我准备好设置蓝色视图。 首先我会给它一个固定的大小:

蓝色大小限制

其次,我将在根视图中水平居中:

蓝色水平的中心

第三,我会把它的垂直中心固定在垫片的垂直中心上:

蓝色的垂直中心

这就是我需要的所有限制。 我会更新所有帧来检查:

更新所有框架

我可以在助手编辑器中使用“预览”对其进行testing:

预览

请注意,间隔视图在预览中不可见,但仍然参与布局。