【问题标题】:Static Spacing on AutoLayout自动布局上的静态间距
【发布时间】:2015-10-14 02:36:35
【问题描述】:

我目前正在设置一个最终应该看起来像这样的登录屏幕:

我已经成功完成了在所有屏幕尺寸上创建所需外观所需的所有约束,但是,我似乎无法弄清楚正确对齐“没有帐户?注册”所需的约束。我设计了它,所以“没有帐户?”是一个UILabel,而“注册”是一个UIButton。我刚刚将它们并排对齐。

UILabel“没有帐户?”有以下限制:

UIButton,“注册,具有以下约束:

这些限制似乎可以在 4 英寸及以下的屏幕上完成所需的操作。但是 4.7 英寸和 5.5 英寸(不包括 iPad)在 UILabel 和 UIButton 之间有很大的间距。我已经阅读了 Ray Wenderlich 的教程自动布局,但仍然无法解决问题(我是自动布局的新手,但我知道自己在做什么。我不只是添加随机约束,希望它能正常工作)。

这是我所有目标设备上的样子:

请注意,随着屏幕尺寸的增加,标签和按钮之间的间隙也会增加。任何帮助表示赞赏。

【问题讨论】:

    标签: ios swift autolayout ios-autolayout


    【解决方案1】:

    您将标签的前导空间设置为其父视图,并将按钮的尾随空间设置为其父视图。所以很明显,如果超级视图变得更宽,它们就会变得更远。

    所以如果这不是你想要的,就不要那样做。

    您想要做的实际解决方案非常棘手。您希望这两个对象表现为一个组,并且希望该组居中。没有简单的方式来表达这一点。您将需要创建一个组。换句话说,您将需要一个容器视图,给该视图一个绝对宽度并将其居中,然后将这两个对象放入容器中。

    iOS 9 中的新功能,UIStackView 可以帮助您解决此问题。

    【讨论】:

    • 谢谢,这是有道理的。这就是我害怕的,谢谢你告诉我。我可能最终会尝试在容器视图中“分组”它们,因为我需要支持以前的版本。感谢您的回复,谢谢!
    • 不客气。问得很好的问题;好的屏幕截图。约束性问题很难问(因为它们很难描述);你做得很好。
    【解决方案2】:

    另一种可行的方法是使用几个 UIView 作为间隔。有时我更喜欢这个而不是收容,但这可能是一个品味问题。

    1. 从 UILabel 中移除前导约束。

    2. 从 UIButton 中移除尾随约束。

    3. 在 UILabel 前面添加一个背景清晰的 UIView。将此 UIView 的前导约束设置为常量 0 的容器前沿。将尾随约束设置为常量 0 的 UILabel。

    4. 同样,在 UIButton 之后添加另一个 UIView。将此 UIView 的前导约束设置为常量 0 的 UIButton。将此 UIView 的尾随约束设置为常量 0 的容器后沿。

    5. 两个 UIView 都需要 Y 位置和高度。这些有点武断,所以我会用你的 UILabel 设置 Align Center-Y 约束,并设置 5 的高度约束。

    6. 这就是神奇的地方:选择两个 UIView 并设置 Equal Widths 约束。这会强制 UIView 在两侧占据相等的空间。

    【讨论】:

    • 这是我的教授最初教我们的方法,使用间隔视图。我认为这是不好的做法(只是觉得有这么多只是填充物的观点很奇怪),但这只是我做出的一个假设。很高兴知道它不是。
    【解决方案3】:

    UIStackView 在这种情况下太过分了。只是

    1. 将标签和按钮放在一个 UIView 中。
    2. 将标签的左侧和中心 Y 约束到容器视图。
    3. 将按钮的右侧和中心 Y 约束到容器视图。
    4. 将标签的右边缘限制在按钮的左边缘。
    5. 将包含视图的水平内容拥抱优先级设置为 1000。
    6. 将包含视图的中心 X 约束到 超级视图。

    【讨论】:

    • 这就是我最终要做的(类似于 matt 将对象嵌入容器视图中的原始建议)。谢谢您的帮助! :)
    【解决方案4】:

    您只需设置少量约束即可对现有代码执行此操作。这适用于所有分辨率,即使在 iPad 上也是如此。您不需要将它们分组,我已附上图像以显示我已应用的约束。

    并为按钮设置此约束

    它将在所有设备上正确显示,请查看它在所有分辨率上的外观以及在每个分辨率的横向模式下的外观

    谢谢

    奥姆卡

    【讨论】: