ios - 新的 iOS 11 ScrollView contentLayoutGuide 不工作

Question

我正在尝试制作一个类似于照片应用程序的照片查看器，用户可以在其中放大和缩小特定图像。

图像的初始大小适合屏幕，但在缩放时可以扩展以覆盖整个屏幕。

我在一个 collectionView 单元格中发生了这种情况，该单元格的大小与屏幕相同，并且启用了分页。在该单元格中是一个 scrollView，其 Storyboard约束设置为其 super View 的顶部/底部/前导/尾随。其余的发生在下面的代码中，这是自定义单元格。

根据 iOS 11 中引入的 scrollView 的新行为，contentView(在我的例子中是 imageView)应该使用以下方法在 scrollView 中居中:

imageView.centerXAnchor.constraint(equalTo: scrollView.contentLayoutGuide.centerXAnchor).isActive = true
imageView.centerYAnchor.constraint(equalTo: scrollView.contentLayoutGuide.centerYAnchor).isActive = true

但是我没有在任何地方看到它的解释，将这两行添加到我的代码中绝对没有任何作用。

scrollView里面的imageView继续定位在左上角。

希望有人知道如何做到这一点并且可以提供帮助。

import UIKit

class ImageCollectionViewCell: UICollectionViewCell, UIScrollViewDelegate {

    @IBOutlet weak var scrollView: UIScrollView! {
        didSet {
            scrollView.delegate = self
            scrollView.minimumZoomScale = 0.2
            scrollView.maximumZoomScale = 2.0
            scrollView.contentSize = imageView.frame.size
            scrollView.addSubview(imageView)

            imageView.translatesAutoresizingMaskIntoConstraints = false

            imageView.widthAnchor.constraint(equalToConstant: 350).isActive = true
            imageView.heightAnchor.constraint(equalToConstant: 350).isActive = true

            imageView.centerXAnchor.constraint(equalTo: scrollView.contentLayoutGuide.centerXAnchor).isActive = true
            imageView.centerYAnchor.constraint(equalTo: scrollView.contentLayoutGuide.centerYAnchor).isActive = true
        }
    }

    var imageView = UIImageView()

    var image: UIImage? {
        get {
            return imageView.image
        }
        set {
            imageView.image = newValue
            scrollView?.contentSize = imageView.frame.size
        }
    }

    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return self.imageView
    }

}

Answer 1

同样的问题困扰了我一天左右，终于搞​​定了。仅向图像添加宽度和高度约束是不够的。要使用 contentLayoutGuide 进行此操作， ImageView 实际上必须与 ScrollView 大小相同。因此，您必须执行以下任一操作:

选项 1

将 ImageView 的宽度和高度约束更改为与 ScrollView 的大小相同。

imageView.widthAnchor.constraint(equalToConstant: scrollView.bounds.width).isActive = true
imageView.heightAnchor.constraint(equalToConstant: scrollView.bounds.height).isActive = true

选项 2 - 首选

移除 ImageView 的宽度和高度限制。相反，添加将 ImageView 的顶部、底部、前导和尾随 anchor 固定到 ScrollView 的约束。我两种都试过了，这个方法似乎效果最好。

imageView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
imageView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
imageView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
imageView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true

根据您使用它的方式/位置，您可能需要使用 scrollView.layoutMarginGuide 作为 anchor 。

我还建议将这段代码从 didSet 移动到一个名为 setup() 的私有(private)方法，或者类似的东西。然后，从 viewWillAppear 调用 setup()。这是一种更一致的方法。希望这对您有所帮助!