这些 Uiimage View 如何使用 Xcode 自动布局?

How to use Xcode auto layout with these Uiimage View?

我正在尝试使用自动布局,使这些 UiImages 视图如下图所示,但在其中一个设备屏幕 3.5"、4"、4.7"

中,它总是一团糟

所以我必须做些什么才能让它变成这样?

我认为你缺少一些约束,你可以一步一步来。 让我们为图像视图编号以便于参考

imgv1 imgv2 imgv3

imgv4 imgv5 imgv6

imgv7 imgv8 imgv9

imgv10 imgv11 imgv12

将 imgv1、2、3 拖放到情节提要中,并将它们彼此相邻放置。 cmd+右键单击三个图像视图并设置约束(它应该是最近的邻居不要忘记取消选中 "from margin" 的复选框)。根据题中的图约束应该是

top - 40, left - 20, right - 20。我假设所有的imageview都是等高和等宽的,在这种情况下select三个imageview和select等宽和等高约束。不要更新框架。它会显示错误,别担心,我们会解决它。

现在是第 2、3、4 行。

将图像视图拖放到情节提要中,然后根据需要放置它们。

imgv4,5,6 imgv7,8,9 imgv10,11,12

然后 select 所有这些 imageview(4-12) 并向其添加约束。约束应该是

上 - 20,左 - 20,右 - 20

并且由于所有图像视图的高度和宽度都相等,select 所有图像视图即 imgv(4-12) 和 imgv(1,2,3) 并添加约束等高和宽度。

还缺少一件事,那就是我们必须将底部约束添加到最后一行,即 (imgv10,11,12) select 这三个图像视图并添加底部约束(记住所有约束来自最近的邻居)。

然后最后更新控制器中的帧。它应该看起来像问题中的图像。

如果你想要每个图像的宽度和高度相等,那么你可以添加如下图所示的约束,如果你想使用整个屏幕 space(即图像的高度和宽度将不同) 然后 select 所有四个引脚和 select 等宽和等高复选框(保留纵横比复选框取消 selected)