ios - UIScrollView 中的 UIImageView 无法正确缩放

Question

我想允许用户侧平移图像。图像应该缩放到设备的高度，用户应该只能左右滚动。用户不应该能够缩放。 我有一个 UIViewController，我向其添加了一个自定义子类 ImageScrollView。 这应该以全高显示图像，但图像基本上是未缩放显示的。即使 zoomScale 计算正确，但没有效果。

我做错了什么？

谢谢

override func viewDidLoad() {
        super.viewDidLoad()

        let i = UIImage(named: "test.jpg")

        let iSV = ImageScrollView(image: i)
        self.view.addSubview(iSV)
        iSV.fillSuperview()
}

class ImageScrollView: UIScrollView {

    let image: UIImage
    let imageView = UIImageView()

    init(image img: UIImage) {    
        image = img
        imageView.image = image

        super.init(frame: .zero)

        self.addSubview(imageView)
        imageView.fillSuperview()

        self.contentSize = image.size

        self.showsHorizontalScrollIndicator = false
        self.showsVerticalScrollIndicator = false
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        self.zoomScale = getZoomScale()    
    }

    func getZoomScale() -> CGFloat{
        let boundSize = self.frame.size
        let yScale = boundSize.height / image.size.height
        return yScale   
    }    
}

只是为了与自动布局有关的情况，我包含了 fillSuperview 扩展。

extension UIView {    
    public func fillSuperview() {
        translatesAutoresizingMaskIntoConstraints = false
        if let superview = superview {
            topAnchor.constraint(equalTo: superview.topAnchor, constant: 0).isActive = true
            leftAnchor.constraint(equalTo: superview.leftAnchor, constant: 0).isActive = true
            bottomAnchor.constraint(equalTo: superview.bottomAnchor, constant: 0).isActive = true
            rightAnchor.constraint(equalTo: superview.rightAnchor, constant: 0).isActive = true
        }
    }
}

Answer 1

由于您不希望图像缩放，我建议您甚至不要理会缩放控件。 UIImageView 知道如何缩放其内容。

我建议你这样做:

1. 添加一个约束，将 imageView 的高度设置为等于 scrollView 的高度。这将防止垂直滚动。
2. 添加一个约束条件，将 imageView 宽度设置为等于 imageView 高度的乘数 image.size.width/image.size.height。
3. 将 imageView 内容模式设置为 .scaleToFill。

---

要允许您更改图像，请保留 aspectRatio 属性，该属性保留在步骤 2 中设置的纵横比约束。设置 aspectRatio.isActive = false，然后创建并为新图像激活新约束。

此外，如果您的图像宽度不足以在缩放以适合垂直方向时水平填充 scrollView，请考虑以下更改:

1. 用乘数 max(image.size.width/image.size.height, scrollView.bounds.width/scrollView.bounds) 替换设置 imageView 宽度的约束.height).
2. 将 imageView 内容模式设置为 .scaleAspectFit。

然后，当您有一个窄图像时，imageView 将填充 scrollView，但是 .scaleAspectFit 将在 scrollView 居中显示整个图像。这对于宽图像仍然可以正常工作，因为倍增器将匹配图像纵横比并且 .scaleAspectFit 将填充整个 imageView。