使用自动布局时如何使 UIScrollView 仅向一个方向缩放

Question

我正在尝试使 UIScrollView 只允许在水平方向上缩放。滚动视图是使用纯自动布局方法设置的。通常的方法是在许多堆栈溢出答案（例如this one）和other 资源中所建议的。在自动布局存在之前，我已经在应用程序中成功使用了它。做法如下：在滚动视图的内容视图中，我覆盖setTransform()，并将传入的transform修改为只在x方向缩放：

override var transform: CGAffineTransform {
    get { return super.transform }
    set {
        var t = newValue
        t.d = 1.0
        super.transform = t
    }
}

我还重置了滚动视图的内容偏移量，使其在缩放期间不会垂直滚动：

func scrollViewDidZoom(scrollView: UIScrollView) {
    scrollView.contentSize = CGSize(width: scrollView.contentSize.width, height: scrollView.frame.height)
    scrollView.contentOffset = CGPoint(x: scrollView.contentOffset.x, y: 0.0)
}

这在不使用自动布局时效果很好：

但是，当使用自动布局时，内容偏移在缩放过程中最终会出错。虽然内容视图仅在水平方向缩放，但它会垂直移动：

我放了一个示例项目on GitHub（用于制作此问题中的视频）。它包含两个故事板，Main.storyboard 和 NoAutolayout.storyboard，除了 Main.storyboard 启用了自动布局而 NoAutolayout 没有之外，它们是相同的。通过更改主界面项目设置在它们之间切换，您可以看到两种情况下的行为。

我真的不想关闭自动布局，因为它以比手动布局所需的更好的方式解决了许多实现 UI 的问题。有没有办法在使用自动布局进行缩放时保持垂直内容偏移正确（即零）？

编辑：我在示例项目中添加了第三个故事板 AutolayoutVariableColumns.storyboard。这会添加一个文本字段来更改 GridView 中的列数，从而更改其固有内容大小。这更接近地显示了我在提示此问题的真实应用中需要的行为。

Answer 1

我不确定这是否满足您对 100% 自动布局的要求，但这是一种解决方案，其中 UIScrollView 设置为自动布局，gridView 添加为子视图。

您的ViewController.swift 应如下所示：

// Add an outlet for the scrollView in interface builder.
@IBOutlet weak var scrollView: UIScrollView!

// Remove the outlet and view for gridView.
//@IBOutlet var gridView: GridView!

// Create the gridView here:
var gridView: GridView!

// Setup some views
override func viewDidLoad() {
    super.viewDidLoad()
    // The width for the gridView is set to 1000 here, change if needed.
    gridView = GridView(frame: CGRect(x: 0, y: 0, width: 1000, height: self.view.bounds.height))
    scrollView.addSubview(gridView)
    scrollView.contentSize = CGSize(width: gridView.frame.width, height: scrollView.frame.height)
    gridView.contentMode = .ScaleAspectFill
}

func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
    return gridView
}

func scrollViewDidZoom(scrollView: UIScrollView) {
    scrollView.contentOffset = CGPoint(x: scrollView.contentOffset.x, y: 0.0)
    scrollView.contentSize = CGSize(width: scrollView.contentSize.width, height: scrollView.frame.height)
}

Answer 2

尝试设置translatesAutoresizingMaskIntoConstraints

func scrollViewDidZoom(scrollView: UIScrollView) {
    gridView.translatesAutoresizingMaskIntoConstraints = true
}

在示例项目中它可以工作。如果这还不够，请尝试在 scrollViewDidEndZooming: 中以编程方式创建新约束可能会有所帮助。

另外，如果这没有帮助，请更新示例项目，以便我们可以使用变量 intrinsicContentSize() 重现问题

Ole Begemann 的这篇文章对我帮助很大
How I Learned to Stop Worrying and Love Cocoa Auto Layout

WWDC 2015 视频
Mysteries of Auto Layout, Part 1
Mysteries of Auto Layout, Part 2

幸运的是，有一个标志。它被称为 translatesAutoResizingMask IntoConstraints [无空格]。

这有点拗口，但它几乎做到了它所说的。它使视图的行为方式与它们在 Legacy Layout 系统下但在 Auto Layout 世界中的行为方式相同。

Answer 3

我想我明白了。您需要在转换中应用平移以抵消 UIScrollView 在缩放时尝试做的居中。

将此添加到您的 GridView：

var unzoomedViewHeight: CGFloat?
override func layoutSubviews() {
    super.layoutSubviews()
    unzoomedViewHeight = frame.size.height
}

override var transform: CGAffineTransform {
    get { return super.transform }
    set {
        if let unzoomedViewHeight = unzoomedViewHeight {
            var t = newValue
            t.d = 1.0
            t.ty = (1.0 - t.a) * unzoomedViewHeight/2
            super.transform = t
        }
    }
}

要计算变换，我们需要知道视图的未缩放高度。在这里，我只是在 layoutSubviews() 期间抓取帧大小并假设它包含未缩放的高度。可能存在一些不正确的极端情况；在视图更新周期中计算高度可能是一个更好的地方，但这是基本思想。

Answer 4

虽然@Anna 的解决方案有效，但UIScrollView 提供了一种使用自动布局 的方式。但由于滚动视图的工作方式与其他视图略有不同，因此对约束的解释也不同：

• 滚动视图的边缘/边距与其内容之间的约束附加到滚动视图的内容区域。
• height、width 或 centers 之间的约束附加到滚动视图的 frame。
• 滚动视图和滚动视图之外的视图之间的约束就像普通视图一样工作。

因此，当您将子视图添加到固定到其边缘/边缘的滚动视图时，该子视图将成为滚动视图的内容区域或内容视图。

Apple 在Working with Scroll Views 中建议采用以下方法：

1. 将滚动视图添加到场景中。
2. 像往常一样绘制约束来定义滚动视图的大小和位置。
3. 向滚动视图添加视图。将视图的 Xcode 特定标签设置为 Content View。
4. 将内容视图的顶部、底部、前导和后沿固定到滚动视图的相应边缘。内容视图现在定义 滚动视图的内容区域。
5. (...)
6. (...)
7. 在内容视图中布置滚动视图的内容。使用约束在内容视图中正常定位内容。

在您的情况下，GridView 必须在 content view 内：

您可以保留您一直在使用但现在附加到内容视图的网格视图约束。对于仅水平缩放，请保持代码原样。您的 transform 覆盖处理得很好。