如何使用自动布局时做出的UIScrollView放大仅在一个方向 [英] How to make UIScrollView zoom in only one direction when using auto layout

问题描述

我试图使一个UIScrollView只允许在水平方向上缩放。滚动视图是建立一个纯粹的自动布局方法。作为建议通常的做法在一些堆栈溢出的答案（如这个）和的其他资源。我的应用已经成功地使用这种自动布局存在之前。该方法如下：在滚动视​​图的内容来看，我重写的setTransform（），并修改通过了变换的规模在X方向：

I'm attempting to make a UIScrollView only allow zooming in the horizontal direction. The scroll view is setup with a pure autolayout approach. The usual approach is as suggested in a number of Stack Overflow answers (e.g. this one) and other resources. I have successfully used this in apps before autolayout existed. The approach is as follows: in the scroll view's content view, I override setTransform(), and modify the passed in transform to on scale in the x direction:

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

我也重置滚动视图的内容偏移，使其不会在变焦过程中垂直滚动：

I also reset the scroll view's content offset so that it doesn't scroll vertically during the zoom:

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)
}

这个作品非常漂亮，不使用自动布局时：

This works very nicely when not using autolayout:

然而，在使用自动布局时，内容偏移变焦期间结束错的。虽然内容视图唯一的扩展的水平方向，它垂直移动：

However, when using autolayout, the content offset ends up wrong during zooming. While the content view only scales in the horizontal direction, it moves vertically:

我已经把一个例子项目在GitHub上（用于制作在这个问题上的视频）。它包含两个故事板，Main.storyboard和NoAutolayout.storyboard，这是除了Main.storyboard相同的自动版式已经开启，而NoAutolayout没有。通过改变主界面项目设置和它们之间进行切换您可以在这两种情况下看到的行为。

I've put an example project on GitHub (used to make the videos in this question). It contains two storyboards, Main.storyboard, and NoAutolayout.storyboard, which are identical except that Main.storyboard has autolayout turned on while NoAutolayout does not. Switch between them by changing the Main Interface project setting and you can see behavior in both cases.

我想，因为它解决了许多与比所要求的具有手动布局更加美好的方式实现我的UI问题，实在不好意思关掉自动布局。有没有一种方法，以保持与自动布局在变焦过程中的垂直内容偏移正确的（即零）？

I'd really rather not switch off autolayout as it solves a number of problems with implementing my UI in a much nicer way than is required with manual layout. Is there a way to keep the vertical content offset correct (that is, zero) during zooming with autolayout?

编辑：我已经添加了第三个故事板，AutolayoutVariableColumns.storyboard，以示例项目。这增加了一个文本字段以更改在GridView列数，从而改变其固有的内容的大小。这更加紧密地表明我需要在促使这一问题的真正的应用程序的行为。

I've added a third storyboard, AutolayoutVariableColumns.storyboard, to the sample project. This adds a text field to change the number of columns in the GridView, which changes its intrinsic content size. This more closely shows the behavior I need in the real app that prompted this question.

推荐答案

我想我想通了。您需要申请一个翻译转换，以抵消中心的UIScrollView试图变焦时做的。

Think I figured it out. You need to apply a translation in the transform to offset the centering UIScrollView tries to do while zooming.

添加到您的GridView：

Add this to your 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期间敛帧大小（），并假设它包含未缩放高度。有可能是一些边缘情况下，这是不正确;可能是在视图更新周期来计算的高度一个更好的地方，但是这是基本的想法。

To compute the transform, we need to know the unzoomed height of the view. Here, I'm just grabbing the frame size during layoutSubviews() and assuming it contains the unzoomed height. There are probably some edge cases where that's not correct; might be a better place in the view update cycle to calculate the height, but this is the basic idea.

这篇关于如何使用自动布局时做出的UIScrollView放大仅在一个方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！