Question

在我的特定情况下，我在视图控制器中查看了我添加了以下约束：

将前缘，后缘，上下边缘设为0
将乘数设置为下边缘为2：1

现在视图位于视图控制器的上半部分。

在此我添加了一个方形图像视图，为此我添加了以下约束：

Ctrl从图像视图拖动到superview，并添加相等的高度和宽度。
更改宽度和高度的乘数，直到我有一个完美的正方形。
添加约束为垂直和水平居中

我的约束似乎很完美，但在模拟器中运行时，我不会得到一个完美的方块。除此之外，在不同的模拟器屏幕上运行时，图像视图不会调整大小。

这是我的设置：

启用自动布局和尺寸类
我使用故事板的推断大小
自适应布局设置为任意宽度和高度
我正在尝试为4s，5,6和6+模拟器运行它。

我查看了其他stackoverflow帖子，但似乎没有任何效果。

是否有一些基本步骤可以做到这一点？

编辑：

设置＆gt; = 10个约束后：

编辑3：我添加了顶部，底部，前导，尾随约束2次，1次低于或等于（优先级1000），另一次大于或等于（优先级800），常数值为90.我不知道为什么底部试图从主视图拉伸到90磅，而不是容器视图（绿色）。

Answer 1

您有一个视图需要扩展以填充其容器，同时保持其宽高比。这是自动布局的常见模式。

诀窍是对前导/尾随/顶部/底部使用两个约束：

=10优先次序
>=10所需优先级。

总而言之，你有：

宽高比1：1
Superview中心X / Y
领先/尾随/上/下到Superview = 10（优先级为750）
领先/尾随/上/下至超级视图＆gt; = 10（优先级为1000）

UIImageView还需要考虑几件事：

UIImageView将根据其显示的图像具有内在内容大小，因此您需要确保其内容拥抱优先级低于您用于=10约束的750优先级
UIImageView.contentMode确定底层图像相对于UIImageView大小的大小。默认情况下，它设置为UIViewContentModeScaleToFill。

Answer 2

container view
----------------------------------------------
|                     |                      |
|                    >=10                    |
|        imageView    |                      |
|        ----------------------------        |
|        |            |             |        |      
|        |            |             |        |
|        |            |             |        |
|        |            |             |        |
|        |            |             |        |
|- >=10 -|---------- 1:1 -----------|- >=10 -|
|        |            |             |        |
|        |            |             |        |
|        |            |             |        |
|        |            |             |        |
|        ----------------------------        |
|                     |                      |
|                    >=10                    |
|                     |                      |
----------------------------------------------

**如果您需要，您可以指定imageView的高度或宽度以及较低的优先级约束。

Answer 3

我成功使用此配置。

我所做的是首先为中心X添加约束。（即使它位于我的屏幕截图中，也忽略中心Y.无论是否因为步骤2，它都会中断。）
然后我添加了一个顶部和底部约束
最后我添加了宽高比约束

当我为此动画时，该框正确缩放为正方形。如果你愿意，我可以上传测试项目。

Answer 4

在代码中，用于realz。注意：奇怪的CGFloat.greatestFiniteMagnitude是必要的（或者更大的数字）是要使其他约束生效的。享受。

extension UIView {
    func constrainAsSquare(container: UIView, multiplier: CGFloat) {
        translatesAutoresizingMaskIntoConstraints = false

        centerXAnchor.constraint(equalTo: container.centerXAnchor).isActive = true
        centerYAnchor.constraint(equalTo: container.centerYAnchor).isActive = true

        widthAnchor.constraint(equalToConstant: .greatestFiniteMagnitude).activate(with: .defaultLow)

        heightAnchor.constraint(lessThanOrEqualTo: container.heightAnchor, multiplier: multiplier).activate(with: .defaultHigh)
        widthAnchor.constraint(lessThanOrEqualTo: container.widthAnchor, multiplier: multiplier).activate(with: .defaultHigh)

        widthAnchor.constraint(equalTo: heightAnchor).activate(with: .required)
    }
}

extension NSLayoutConstraint {
    @discardableResult
    func activate(with priority: UILayoutPriority) -> NSLayoutConstraint {
        self.priority = priority
        isActive = true
        return self
    }
}

如何使用自动布局

4 个答案: