自动布局的新功能，视图未按 IB 中的配置显示

Question

几天来我一直为此发疯，我已经尝试了到目前为止我所知道的关于自动布局的一切，但无法克服这个问题。我有一堆按钮和一个标签。标签位于顶部，下方有 5 个按钮。每个 View 都是一个矩形，距离父视图两端的宽度为 8 磅。标签的高度为 134 点，其下方的每个按钮都略小（尽管屏幕截图显示每个按钮的高度为 83，因为我正在测试某些东西并忘记更改它（如果需要，我可以重新 post 图像高度递减）），最底部的按钮高度为 65 点。就这些。看起来像一个简单，直接的设计吧？好吧，在过去 2 周研究了自动布局的基础知识并发现 'Ray Wenderlich' 教程很有帮助之后，我已经尽我所能来正确模拟它，但它就是不行！我为每个视图设置了约束，尾随、前导、底部、顶部、高度、宽度，一切都尽可能正确，但这是发生了什么：

4s上：顶部标签变成细线

在 6 plus 上：标签比应有的大得多

因为我是新会员，所以我可以post 限制图片的数量和数量。

界面生成器：

iPhone 4s:

Answer 1

尝试将所有具有固定高度的标签与另一个垂直堆栈视图放在垂直堆栈视图中，并将所有按钮放在内部垂直堆栈视图中并设置 Distribution: Fill Equally 以及您选择的间距.这将在所有手机上显示最准确的信息。确保设置了外部堆栈视图的约束。无需为内部堆栈设置任何约束，一切都会到位。

Answer 2

设置按钮底部约束低优先级喜欢

Answer 3

在你的问题中，你确切地谈到了每个按钮应该有多少个点，但你没有描述当设备不够高时你希望它如何表现（例如在iPhone 4 秒）。

底线，除了标准 leading/trailing/top/bottom 约束外，我可能建议您考虑定义各种 labels/buttons 相对于彼此的高度。例如，考虑以下约束：

NSLayoutConstraint.activateConstraints([
    // leading constraints

    pinkLabel.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 8),
    button1.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 8),
    button2.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 8),
    button3.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 8),
    button4.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 8),

    // trailing constraints

    view.trailingAnchor.constraintEqualToAnchor(pinkLabel.trailingAnchor, constant: 8),
    view.trailingAnchor.constraintEqualToAnchor(button1.trailingAnchor, constant: 8),
    view.trailingAnchor.constraintEqualToAnchor(button2.trailingAnchor, constant: 8),
    view.trailingAnchor.constraintEqualToAnchor(button3.trailingAnchor, constant: 8),
    view.trailingAnchor.constraintEqualToAnchor(button4.trailingAnchor, constant: 8),

    // vertical spacing constraints

    pinkLabel.topAnchor.constraintEqualToAnchor(view.topAnchor, constant: 20),
    button1.topAnchor.constraintEqualToAnchor(pinkLabel.bottomAnchor, constant: 8),
    button2.topAnchor.constraintEqualToAnchor(button1.bottomAnchor, constant: 8),
    button3.topAnchor.constraintEqualToAnchor(button2.bottomAnchor, constant: 8),
    button4.topAnchor.constraintEqualToAnchor(button3.bottomAnchor, constant: 8),
    view.bottomAnchor.constraintEqualToAnchor(button4.bottomAnchor, constant: 83),

    // now set relative height

    pinkLabel.heightAnchor.constraintEqualToAnchor(button1.heightAnchor, multiplier: 1.5),
    button2.heightAnchor.constraintEqualToAnchor(button1.heightAnchor),
    button3.heightAnchor.constraintEqualToAnchor(button1.heightAnchor),
    button4.heightAnchor.constraintEqualToAnchor(button1.heightAnchor)
])

（顺便说一句，我以编程方式展示这些，因为这是明确阐明所有约束的最简单方法，但您也可以在 IB 中设置它们或在 Objective-C 中实现。无论如何实现它你想要，但这些是示例约束。）

这将导致在三个不同的设备上：

显然，您可以将这些约束更改为您想要的任何内容，但这说明了一种方法。最重要的是，只需添加标准 leading/trailing/top/bottom 约束，然后定义各种 labels/buttons 相对于彼此的高度。

在你的问题中，你向我们展示了你做了什么不希望它在较小的屏幕上看起来像，但从未明确说明它应该[=28] =] 看起来像。如果您阐明了您希望它如何显示在不同尺寸的屏幕上，那么我们可能会提供进一步的帮助。

自动布局的新功能，视图未按 IB 中的配置显示

New to auto layout, views not displaying as configured in IB

ios

ios-autolayout