调整图像高度以适合屏幕(保持纵横比)，并使其余部分以编程方式水平滚动

Question

我想使图像的高度适合屏幕的高度，但要保持纵横比并使其余部分水平滚动。 您可以看到下面的代码示例。我设法使图像的高度与屏幕的高度相匹配，同时保持这样的纵横比：将视图添加到滚动视图，该视图将拉伸以填充可用宽度。

我的最后一个问题是滚动视图没有在整个水平距离上滚动。只是滚动视图用于以较小的图像尺寸滚动的距离，所以我在设置内容后也尝试重置滚动视图视图，如下所示如何自动调整 UIScrollView 的大小以适应其内容，但不幸的是它不起作用。所以我看不到图像的边缘，但是如果我将滚动视图拉到一侧并保持我的"手指"，我可以看到图像。但是一旦我释放它就会反弹回图像的中间部分。

我也看了一下：https://developer.apple.com/library/archive/technotes/tn2154/_index.html 但我找不到解决我的问题的方法。

我也已经尝试计算手动适应屏幕后图像的比率变化，而不是设置滚动视图的内容大小，但这也没有用(就像这个问题中的答案：如何在背景图像上相对于图像定位 UI 元素，这里：如何在 Swift 3 中根据 UIImage 的大小/比例调整 UIImageView 的大小？

代码如下：

import UIKit
class ViewController: UIViewController, UIScrollViewDelegate {
var scrollView: UIScrollView = {
let scrollView = UIScrollView()
scrollView.translatesAutoresizingMaskIntoConstraints = false
scrollView.backgroundColor = .red
return scrollView
}()
var contentView: UIView = {
let contentView = UIView()
contentView.translatesAutoresizingMaskIntoConstraints = false
return contentView
}()
var imageView: UIImageView = {
let imageView = UIImageView()
let image = UIImage(named: "Erlebnispark.jpg")
imageView.image = image
imageView.backgroundColor = .red
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.contentMode = .scaleAspectFill
return imageView
}()
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(scrollView)
scrollView.addSubview(contentView)
contentView.addSubview(imageView)
scrollView.delegate = self
setupLayout()
}
func setupLayout() {
[
scrollView.topAnchor.constraint(equalTo: self.view.topAnchor),
scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
scrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
scrollView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
//contentView.widthAnchor.constraint(equalTo: scrollView.contentLayoutGuide.widthAnchor),
contentView.heightAnchor.constraint(equalTo: scrollView.frameLayoutGuide.heightAnchor),
// contentView.widthAnchor.constraint(equalTo: scrollView.contentLayoutGuide.widthAnchor),
imageView.topAnchor.constraint(equalTo: contentView.topAnchor),
imageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
imageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
imageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
// imageView.heightAnchor.constraint(equalTo: contentView.heightAnchor),
].forEach {$0.isActive = true}
}
}

也许有人可以帮助我。

Answer 1

只是几个变化...

var imageView: UIImageView = {
let imageView = UIImageView()
let image = UIImage(named: "Erlebnispark.jpg")
imageView.image = image
imageView.backgroundColor = .red
imageView.translatesAutoresizingMaskIntoConstraints = false
// use scaleToFill
//imageView.contentMode = .scaleAspectFill
imageView.contentMode = .scaleToFill
return imageView
}()

setupLayout()的第一行：

func setupLayout() {
// add this line
guard let img = imageView.image else { return }

约束数组中的最后一行：

// add this line
imageView.widthAnchor.constraint(equalTo: imageView.heightAnchor, multiplier: img.size.width / img.size.height),
].forEach {$0.isActive = true}

您完成的约束现在告诉图像视图的宽度是它自己的高度，乘数为img.size.width / img.size.height

其他一切都很好。