如何在 XCODE 中将 UIView 水平分成三个大小均匀的子视图？

Posted 2023-03-11

【中文标题】如何在 XCODE 中将 UIView 水平分成三个大小均匀的子视图？

【英文标题】：How to divide UIView in to three even sized subviews horizontally in XCODE?

【发布时间】：2016-12-24 04:58:51

【问题描述】：

我必须使用Xcode 将UIView 水平划分为三个大小相等的子视图。我尝试使用约束。 我得到了以下结果。

在某些屏幕尺寸中。在小屏幕手机中，最左边和最右边的子视图大小相同。但是，中心子视图在小屏幕中非常小，在大屏幕中非常大。所以请让我知道将UIView 水平拆分为三个大小相等的子视图的正确方法。提前致谢。

注意：我使用的是Xcode 8.1

【问题讨论】：

好的，我给你发一张约束你的图片

@Jecky 好的。请提供

使用UiStackView

Xcode 版本没有轴承。但约束确实如此。这里有几个可以帮助你——但你还没有发布你是如何布置你的约束的。请做！我相信我们可以帮助你。但是，再次发布它们。

【参考方案1】：

设置约束是每个根据开发人员技能和可用性使用的技术。 你会带着自己的一天来。 这是我用来处理像你这样的情况的方式。

1)在情节提要上创建 3 个等宽的视图。（您已经完成了） 2）一起选择所有3个视图。

添加前导约束（左） 添加顶部约束。 添加高度/底部约束。（根据您的需要/要求） 添加等宽约束。

（必须）

这是一张同时显示上述步骤的图片。

现在选择最后一个视图，即。第三个视图（您必须只选择最后一个视图）

添加尾随边距约束。 （右）

你现在可以走了。

高度/底部和顶部约束，您必须根据需要添加。

就像我之前说的，随你便便。

【参考方案2】：

首先，按住“control”键并将视图拖到其容器视图中，

设置视图的宽度等于容器视图的宽度：

第二，将乘数改为0.3333（表示容器宽度的1/3）：

下一步，将第二个视图的宽度设置为等于第一个：

最后，添加第三个视图并应用与第二个相同的集合。并记住为第 2 和第 3 视图添加“Same Vertical Center to 1st View”约束和“xx Leading Space”约束。您将获得三个相同宽度的视图填充容器。

【参考方案3】：

获取所有具有相同宽度和相同高度的视图并像图像中一样给出约束

【参考方案4】：

我建议使用 UIStackView。如果您从不使用它，它就像一个容器（在您的情况下为 UIViews），您可以将其设置为使用相等的比例（分布：相等填充）。这意味着对于您拖入 stackview 的每个元素，它都会按比例设置其宽度。

如果您拖动 1 个项目，它将具有 UIStackView 宽度的 100%。

如果您拖动 2 个项目，每个项目将有 50% 的宽度。

如果拖动 3 个，每个将有 33%。以此类推。

您甚至可以使用垂直或水平堆栈视图。我觉得它非常有用。 这里有官方文档：https://developer.apple.com/reference/uikit/uistackview

【讨论】：

这是最好的答案，您应该补充一点，必须将分布设置为相等

【参考方案5】：

通过选择所有三个View来设置Equal width的约束，并提供1点水平间距的约束。它将视图分成 3 个等宽的视图。