新的 iOS 11 滚动视图 contentLayoutGuide 不起作用

Question

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

图像最初的大小适合屏幕大小，但缩放后可以扩大以覆盖整个屏幕。

我在一个collectionView 单元格中发生了这种情况，该单元格是屏幕大小并启用了分页。在该单元格中是一个滚动视图，其故事板约束设置为顶部/底部/前导/尾随到它的超级视图。其余的发生在下面的代码中，即自定义单元格。

根据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 进行此操作，图像视图实际上必须与滚动视图的大小相同。因此，您必须执行以下任一操作：

选项 1

将图像视图的宽度和高度约束更改为与滚动视图相同的大小。

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

选项 2 - 首选

移除图像视图的宽度和高度限制。相反，添加约束将图像视图的顶部、底部、前导和尾随锚点固定到滚动视图。我都试过了，这个方法似乎效果最好。

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 作为锚点。

我还建议将此代码从 didSet 移动到名为 setup() 的私有方法，或类似的东西。然后，从viewWillAppear 致电setup()。这是一种更一致的方式。希望这会有所帮助！