如何使用自动布局实现这种布局？

Question

我正在尝试创建附加布局，我添加了一个超级视图和四个子视图，每个视图都与其中一侧对齐，以实现中间的 + 号。我添加的约束是：每个子视图的纵横比和领先的尾随边距，同时也为左下视图添加了宽度约束。但显然这在较小的屏幕上不起作用并且一切都变得混乱，不确定我应该添加什么确切的约束以便我在可变屏幕尺寸上获得所需的结果。

Answer 1

您应该为视图使用比例高度和宽度，例如：

对于左上视图，将左上视图的顶部与父视图的顶部对齐，对于前导也同样如此。现在使宽度与超级视图宽度的一半减去两个视图之间的间隔的一半成正比。

简而言之：Top left view's leading = superview's leading

        Top left view's top = superview's top
        Top left view's width = superview's width/2 - separation/2
        Top left view's height = superview's height/2 - separation/2

对其余的视图同样执行此操作，您会很高兴，并且您的视图在每个设备上都很好

Answer 2

创建具有所需纵横比的父视图。
添加四个子视图，并使它们的宽度和高度都相等。
像 "top, left" "top, right" "bottom, left" “"bottom, right"”
根据父视图的宽度给出一个子视图，如果你想要水平填充 10 像素，那么给出 320:155
和一个视图的高度根据其宽度。

找到为此制作的示例代码。 https://github.com/iTamilan/AutoLayoutPlus

如何使用自动布局实现这种布局？

How to achieve this layout with auto layout ?

xcode

ios

ios-autolayout