title: How to make UIScrollView zoom in only one direction when using auto layout
body: <p>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. <a href="https://stackoverflow.com/a/1424272/344733">this one</a>) and <a href="http://codeshaker.blogspot.com/2011/10/restricting-scrollview-to-horizontal.html" rel="nofollow noreferrer">other</a> 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 <code>setTransform()</code>, and modify the passed in transform to only scale in the x direction:</p>
  
  <pre><code>override var transform: CGAffineTransform {
      get { return super.transform }
      set {
          var t = newValue
          t.d = 1.0
          super.transform = t
      }
  }
  </code></pre>
  
  <p>I also reset the scroll view's content offset so that it doesn't scroll vertically during the zoom:</p>
  
  <pre><code>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)
  }
  </code></pre>
  
  <p>This works very nicely when not using autolayout:</p>
  
  <p><a href="https://i.stack.imgur.com/cUA3H.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cUA3H.gif" alt="Zooming without autolayout"></a></p>
  
  <p>However, when using autolayout, the content offset ends up wrong during zooming. While the content view only <em>scales</em> in the horizontal direction, it moves vertically:</p>
  
  <p><a href="https://i.stack.imgur.com/sqqkr.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sqqkr.gif" alt="Zooming with autolayout"></a></p>
  
  <p>I've put an example project <a href="https://github.com/armadsen/HorizontalZoom" rel="nofollow noreferrer">on GitHub</a> (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.</p>
  
  <p>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?</p>
  
  <p>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.</p>