如何约束视图中的元素？

Posted 2023-03-15

【中文标题】如何约束视图中的元素？

【英文标题】：How to constraint elements in view?

【发布时间】：2019-04-15 13:29:45

【问题描述】：

重要提示：这不是一个主视图，而是我在主视图上添加的一个视图，它有它的大小。

我正在尝试限制this view 以使其在每个ios 设备上都可以调整大小。我希望它看起来与您看到的完全一样。 我在网上遵循了多个指南，但即使我完全按照我所看到的去做，它似乎对我不起作用。 这是我尝试过的： 我设置了取消按钮的宽度，然后将其限制在视图（尾随、底部、前导）并垂直放置在容器中。我对它上面的那个做了同样的事情，但是底部的约束被附加到了按钮上。

关于带有很多方形按钮的视图我： 将视图约束到其下方的按钮（底部），设置其宽度，将其垂直放置在容器中，顶部空间为安全区域（我的视图上方有一个导航栏）以及尾随和前导空间以查看。

关于我视图中的按钮，我为它们中的每一个设置了相同的宽度和高度，然后我将它们全部限制在顶部前导尾随和底部（它们之间或它们的视图之间都有 7 的空间）。

这些都不起作用，因为蓝天视图要么变得越来越宽，要么超出屏幕，要么一切都变得很奇怪......我该怎么办？

【问题讨论】：

您到底想要什么？您是否在 SUBVIEW 中添加了多个按钮？

看我的图片，我想像你看到的那样约束按钮，这样当你运行应用程序时它看起来就像图片一样

那么，对于带有按钮的视图，您设置了前导、尾随和宽度？您不应添加此宽度约束。

不，我设置了按钮的宽度，在视图中我只是设置了高度

好的。仍然很难准确地表示你做了什么。所以来帮助你。也许您可以添加一个包含您设置的所有约束的图表。并且还可以考虑使用 UIStackView。

【参考方案1】：

我认为这个问题有点难以回答。但我会尽力而为:D 所以，我要做的第一件事就是把粉色方块放在 stackView 中，让自动布局帮助我们一点。然后我会限制 blueSkyView.top .leading 和 .trailing。将 stackView .top, .leading, .trailing, .bottom 约束到 blueSkyView 后，使蓝天视图可以放大以适应内部的堆栈。 然后将按钮约束到底部，就像你做的那样。考虑使用大于从蓝天到随机颜色按钮的一些约束，例如，保证它们永远不会重叠。

【讨论】：

如何使用自动布局调整正方形？我已经多次尝试将它们放在堆栈视图中，但它们变成了一条长线

我将所有行放在不同的堆栈视图中，然后将所有内容放在另一个堆栈视图中好吗？

在每个方块中，您将纵横比设置为 1:1。在 stackView 中，您可以在分布中设置相等的间距，并将间距设置为您需要的数字，例如 5 或 10。

【参考方案2】：

如果您想在使用不同设备时使该视图长时间保持正方形，则需要为视图提供高度约束以及前导和尾随。 然后为高度约束做一个出口。在 viewDidAppear 方法中，您应该编写以下代码：

heightConstraint.constant = myView.frame.size.width