ios - 自动布局的新功能， View 未按 IB 中的配置显示

Question

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

在4s上:顶部的标签变成了一条细线

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

由于我是新成员(member)，所以我可以发布图片的数量和数量有限。

界面生成器:

iPhone 4s:

Answer 1

在您的问题中，您确切地谈到了每个按钮应该有多少个点，但是您没有描述当设备不够高无法表示时(例如在 iPhone 4s 上)，您希望它如何表现).

底线，除了标准的前导/尾随/顶部/底部约束之外，我可能建议您考虑定义各种标签/按钮之间的相对高度。例如，考虑以下约束:

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 中实现。您可以随意实现它，但是这些是示例约束。)

这将导致在三种不同的设备上:

显然，您可以将这些约束更改为您想要的任何内容，但这只是一种方法。最重要的是，只需添加标准的前导/尾随/顶部/底部约束，然后定义各种标签/按钮相对于彼此的高度。

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