我希望两个按钮具有相同的宽度并使用自动布局从屏幕顶部按比例在所有屏幕尺寸中定位自己？

Posted 2023-03-15

【中文标题】我希望两个按钮具有相同的宽度并使用自动布局从屏幕顶部按比例在所有屏幕尺寸中定位自己？

【英文标题】：I want two buttons to have equal width and position themselves proportionally in all screens sizes from the top of the scree using autolayout?

【发布时间】：2016-09-08 07:06:50

【问题描述】：

附上我计划设计的视图。我想相对于 Superview 定位按钮，它们的宽度和高度必须与屏幕尺寸成比例增加，而不是保持固定。

附加屏幕预览：

【问题讨论】：

Need assistance setting two buttons of equal width, side by side Autolayout的可能重复

只需要更改上面链接中的一个约束，即高度更改以使主视图具有相同的高度

@EICaptainv2.0 我可以将按钮宽度指定为超级视图宽度的 50%，而不是使用相等的宽度？如果按钮的宽度不同，我该如何处理相同的场景？

【参考方案1】：

这只是一行按钮的示例，因此它们可以重复用于其他 UI 元素。

将这些约束放在您的按钮上：

左键：

左前导约束 顶部前导约束 高度限制

右键

右尾随约束 顶部前导约束 高度限制

以及与两个按钮相关的约束： （您需要同时选择两个按钮才能应用关系约束）

按钮之间的间距限制 这些按钮的宽度相等

在 Interface Builder 中看起来像这样：

而且这些布局是通用，所以我选择了一些设备尺寸来展示：

iPhone 5

iPhone 6

iPhone 6 Plus

...等等

【讨论】：

@subin272 在生成此答案时，我没有在您的问题中看到图像。如果您想完全按照图像中提供的方式建立场景，请使用我的指南，只需在情节提要中选择适当的前导和尾随约束并将值设置为 0。Xcode 可以很好地处理这个问题。它们是两个按钮之间的间距约束，左键的前导左约束和右键的尾随右约束。

【参考方案2】：

对于左键：

视图顶部的顶部约束 视图左边缘的左约束 高度限制 对右键的右约束 -> 那将是 0

对于右按钮：

视图顶部的顶部约束 视图右边缘的右约束 高度限制 右侧按钮的左侧约束 -> 将是 0

【参考方案3】：

您可以尝试使用 Xcode7 支持的 StackView 功能，看看这个教程。 StackView Sample

【讨论】：

比 Xcode 版本更重要的是 UIStackView 在 ios 9 中可用。

【参考方案4】：

我的回答有点不同。除非特别需要，否则我不喜欢使用尺寸等级。现在根据您的要求，我将禁用尺寸类，并添加如下约束。

我将在那些名为 SpacerView 的按钮上方的超级视图中添加一个清晰的颜色 alpha 0 UIView

SpacerView -

1) 通向superView - 0 - 用于SpacerView的对齐

2) 拖到 superView - 0 - 用于 SpacerView 的对齐

3) Top to superView - 0 - 用于 SpacerView 的对齐

4) SuperView 的比例高度 - 用于 SpacerView 的动态调整高度

按钮 1 -

1) 通向超级视图 - 0 - 用于对齐按钮 1

2) 拖到按钮 2 - 0 - 用于对齐按钮 1 和按钮 2

3) 与超级视图成比例的高度 - 40:568 - 用于按钮 1 的动态调整高度

4) 与按钮 2 的宽度相等 - 0 - 按钮 2 的宽度大小与按钮 1 相等

5) 与按钮 2 等高 - 0 - 按钮 2 的高度大小与按钮 1 相等

6) 顶部到 SpacerView - 0 - 用于对齐按钮 1

7) 将 Y 居中到按钮 2 - 0 - 按钮 2 的对齐方式与按钮 1 相同

按钮 2 -

1) 拖到 superView - 用于对齐按钮 2

根据您的要求，这里甚至没有一个约束是额外的。如果您仍有问题，我可以向您发送一个测试库，我会为您提供理解。

【参考方案5】：

步骤 1.并排取两个按钮。 2.给左键前导约束，顶部到superview。 3. 选择左键的高度。 3.按控制从左键拖动光标到右键并选择水平间距（选择两个按钮之间的空间） 4. 限制右侧按钮顶部，拖到超级视图。 5. 右键选择高度。 6.现在按下命令，选择两个按钮并查看右侧下方的引脚选项，选择相等的宽度。 7.如果某些警告显示意味着，没问题只需点击删除该警告。

【参考方案6】：

我找到了解决方案。以下是我提供的约束

左键：

1.left 前导约束 2. 前导约束

右键

1.right 尾随约束 2.top领先约束

两者通用

1.等高约束 2.等宽约束

为了根据超级视图按比例增加高度，我将两个按钮的纵横比约束添加到超级视图的按钮高度为超级视图高度的 0.6。