如何使用大小类和自动布局在 Xib 中水平对齐两个 UI 按钮

Posted 2023-03-15

【中文标题】如何使用大小类和自动布局在 Xib 中水平对齐两个 UI 按钮

【英文标题】：How to Align Two UI Button Horizontally Aligned in A Xib Using Size Class and Auto Layout

【发布时间】：2015-09-15 06:50:17

【问题描述】：

如何使用 Size Class 和 Auto Layout 在 Xib 中水平对齐两个 UI 按钮。两个Button应该保持原来的高度和宽度

我想在没有代码的情况下实现这一目标

提前致谢

【问题讨论】：

您必须将它们的 centerY 约束设为 0 ，为 Gallery 按钮提供一个高度和一个宽度约束，并具有相等的宽度和高度约束。

@SabricanOzan 如果你不介意你能解释一下吗？

@SARATH 刚刚在下面发布了一个答案尝试一下，如果有问题给我反馈:)

谢谢@SabricanOzan。我会检查并告诉你:)

【参考方案1】：

首先添加图库按钮：

高度限制 宽度限制 以superview引领空间 带有超级视图的顶部空间

然后添加相机按钮：

带画廊按钮的水平空间 与图库按钮等宽 与图库按钮等高 CenterY 与图库按钮

而且应该这样做。

【讨论】：

您是否以编程方式添加相机按钮？如果是这种情况，您应该检查 translatesAutoresizingMaskIntoConstraints 属性

当您设置约束时，Interface Builedr 中是否有任何约束警告，或者当您在应用程序中打开该屏幕时是否有任何约束中断？

完全没有。我在视图中使用 UIScrollView。有警告

让我们continue this discussion in chat。

您不能使用此解决方案，但您可以稍作改动。您应该删除画廊按钮的宽度限制，并在超级视图中添加一个尾随空格到相机按钮。我没试过，但应该是这样的:)

【参考方案2】：

查看此视频，设置约束

您可以在预览中查看，

【参考方案3】：

选择两个按钮。

添加以下约束显示在图片中

这将根据文本字体添加默认高度。

因此，如果您想增加高度，请选择任意一个按钮并添加额外的高度约束。更新框架。

【参考方案4】：

只需简单地选择两个按钮并给予水平和垂直间距约束，并为按钮提供等宽和等高。

【参考方案5】：

将Gallery 按钮连接到主视图的角落并使用 接下来，将Camera 按钮连接到Gallery 按钮并设置Horizontal Spacing。 在 Storyboard 的Leading Alignment Contstraint 中，将Gallery.Trailing 设置为First Item，并将Camera.Leading 设置为Second Item。将Relation 设置为Equal。