奇怪的图像视图定位。错误的内容模式？

Question

我希望我的图像视图能够在主视图的底部正确显示，但显然图像倾斜到顶部。我试图使用图像视图的每个可能的内容模式，但没有一个将图像视图放在正确的位置（底部）。

即使我将布局限制设置正确，图像也会出现问题。我做错了什么？

import UIKit
import PlaygroundSupport

var mainView = UIView(frame: CGRect(x: 0, y: 0, width: 1000, height: 1000))

let groundView = UIImageView(image: UIImage(named:"GroundSkin.png"))
mainView.addSubview(groundView)
groundView.backgroundColor = .red
groundView.contentMode = .scaleAspectFit
groundView.translatesAutoresizingMaskIntoConstraints = false
groundView.leftAnchor.constraint(equalTo: mainView.leftAnchor).isActive = true
groundView.rightAnchor.constraint(equalTo: mainView.rightAnchor).isActive = true
groundView.heightAnchor.constraint(equalTo: mainView.heightAnchor, multiplier: 1).isActive = true
groundView.bottomAnchor.constraint(equalTo: mainView.bottomAnchor).isActive = true

PlaygroundPage.current.liveView = mainView
PlaygroundPage.current.needsIndefiniteExecution = true

Answer 1

此违规部分是heightAnchor的{​​{1}}约束，您设置的约束等于groundView的等效约束。这样做只会导致mainView抓住groundView的顶部和底部锚点，并以不合需要的方式垂直居中。

我有点困惑的一件事是你对红色背景的期望。如果您确实希望图片适合某个区域，那么最好约束mainView您想要的图像，然后根据您的要求设置内容模式。这样做而不是将UIImageView约束到任何内容并尝试让内容模式执行它不应该做的事情。如果这样做，红色背景应该（最佳）甚至根本不显示;它将是UIImageView的背景颜色，将显示在它下面。

如果您希望mainView图像在水平填充视图时显示在groundView的底部，则最佳方法是使用基于宽高比的mainView约束替换在它自己的大小（你注意到在编译时指定）。因此，如果您的图像尺寸为4x3，例如，此约束：

groundView.heightAnchor

会变成：

groundView.heightAnchor.constraint(equalTo: mainView.heightAnchor, multiplier: 1).isActive = true

使用此图像时，图像仍应根据设备方向和屏幕尺寸增大和缩小，但只有在宽高比与预期相符时才会增大（在此示例中为4x3）。

在我的游乐场中，我从互联网上获得了一张测试图片，并将groundView.heightAnchor.constraint(equalTo: groundView.widthAnchor, multiplier: 3.0/4.0).isActive = true 的{​​{1}} groundView属性设置为mainView以进行演示。结果是：

我的测试照片与你的比例并不完全相同，但你明白了。最终结果是图像拥抱容器的底部，调整大小以适应容器的宽度，并保持自己的宽高比。

如果您希望自己实现此功能，请注意您的宽高比可能不同，因此您必须将backgroundColor更改为其他内容，直到它看起来如您所愿。

如果这回答了你的问题，请告诉我。