問題描述

我正在嘗試使 UIScrollView 只允許在水平方向上縮放.滾動視圖是使用純自動布局方法設置的.通常的方法是在許多 Stack Overflow 答案(例如

但是，當使用自動布局時，內容偏移在縮放過程中最終會出錯.雖然內容視圖僅在水平方向縮放，但它會垂直移動:

我在 GitHub 上放了一個示例項目 (用于制作此問題中的視頻).它包含兩個故事板，Main.storyboard 和 NoAutolayout.storyboard，除了 Main.storyboard 啟用了自動布局而 NoAutolayout 沒有之外，它們是相同的.通過更改主界面項目設置在它們之間切換，您可以看到兩種情況下的行為.

我真的不想關閉自動布局，因為它以比手動布局所需的更好的方式解決了許多實現 UI 的問題.有沒有辦法在使用自動布局進行縮放時保持垂直內容偏移正確(即零)?

我在示例項目中添加了第三個故事板 AutolayoutVariableColumns.storyboard.這會添加一個文本字段來更改 GridView 中的列數，從而更改其固有內容大小.這更接近地顯示了我在提示此問題的真實應用中需要的行為.

我想我想通了.您需要在轉換中應用平移以抵消 UIScrollView 在縮放時嘗試做的居中.

將此添加到您的 GridView:

var unzoomedViewHeight: CGFloat?覆蓋 func layoutSubviews() {super.layoutSubviews()unzoomedViewHeight = frame.size.height}覆蓋 var 變換:CGAffineTransform {得到 { 返回超級轉換 }放 {如果讓 unzoomedViewHeight = unzoomedViewHeight {var t = 新值t.d = 1.0t.ty = (1.0 - t.a) * unzoomedViewHeight/2super.transform = t}}}

要計算變換，我們需要知道視圖的未縮放高度.在這里，我只是在 layoutSubviews() 期間獲取幀大小并假設它包含未縮放的高度.可能存在一些不正確的極端情況；在視圖更新周期中計算高度可能是一個更好的地方，但這是基本思想.

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 only 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:

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.

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?

EDIT: 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.

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

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

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 僅向一個方向縮放的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！