如何使用自动布局使其超级视图调整方形视图的大小

Question

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

• 将前导，尾随，顶部和底部边缘设置为0
• 将乘数设置为下边缘为2：1

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

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

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

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

这是我的设置：

• 启用自动布局和大小类
• 我为故事板使用推断大小
• 对于宽度和高度，自适应布局设置为“任意”
• 我试图为4s，5,6和6+模拟器运行它。

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

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

编辑：

设置> = 10约束后：

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

Answer 1

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

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

• 低优先级=10

• >=10所需的优先级。

把它们放在一起，你有：

• 宽高比1：1

• Superview中心X / Y.

• 领先/尾随/上/下至Superview = 10（优先级为750）

• 前导/尾随/上/下至超级视图> = 10（优先级为1000）

UIImageView还需要考虑以下几点：

• UIImageView将根据其显示的图像具有内在内容大小，因此您需要确保其内容拥抱优先级低于您用于=10约束的750优先级。

• UIImageView.contentMode确定底层图像相对于UIImageView大小的大小。 默认情况下，它设置为UIViewContentModeScaleToFill 。

Answer 2

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

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

Answer 3

我成功使用了这个配置。

1. 我做的是首先为中心X添加约束。（忽略中心Y，即使它在我的屏幕截图中。由于步骤2，它将会中断）

2. 然后我添加了一个顶部和底部约束

3. 最后我添加了宽高比约束

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

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
    }
}