UIScrollView Paging Autolayout & Storyboard

Question

There are plenty of answers regarding scroll views with autolayout and plenty about scrollview paging, but I can't find a single thing that addresses both.

I'm not trying to do anything fancy...just 7 full-screen image views that I would like to scroll horizontally with paging, but for the sake of simplicity (ha!), I decided to attempt it all right in the storyboard.

The controller is set to freeform size with a width of 2240 (320*7). I then set it up the way Apple suggests for autolayout...

UIScrollview
/-----UIView
/----------Content (7 image views)

The scrollview has 0/0/0/0 constraints to all edges, as does the UIView inside.

When Paging Enabled is off, it behaves beautifully - exactly as expected. But once I turn Paging on, a swipe makes the view go crazy, scrolling the entire 2240 width, and then bouncing back and eventually landing on the proper page.

I know I have the tried-and-true option of just scrapping it all and doing it programmatically, but my stubbornness wants to figure this out. It must be possible!

Answer 1

I have a UIScrollView with paging and AutoLayout working perfectly fine. Here is my set up:

UIView  // Main view
|---> Dummy UIView   // See below
      |---> UIScrollView
            |---> Content UIView
                  |---> Page 1 Container
                  |---> Page 2 Container

The constraints I used are Dummy UIView -> Parent UIView is whatever I want the size of the paging scrollview to be, and UIScrollView -> Dummy UIView is (0,0,0,0) on all sides. This is just regular auto layout stuff which creates a dummy UIView where I want to put the scrollview and a UIScrollView which completely fills the dummy UIView.

Refer to the Technote from Apple for AutoLayout and UIScrollViews: https://developer.apple.com/library/content/technotes/tn2154/_index.html

The content inside the scrollview has to have an intrinsic size. It cannot rely on the scrollview to get its size.

As indicated in the TechNote, set the constraints from all four sides of the Content View to the UIScrollView to (0,0,0,0). The exact values don't really matter since all you are telling the UIScrollView is that this is the view to get the contentSize from.

At this point Xcode will complain that Content View has no intrinsic size. And here is the trick: This is where we use the Dummy UIView that we created above. The size of the Dummy UIView is precisely the size of each page in the UIScrollView.

So we set the height of Content UIView equal to height of Dummy UIView and the width of the Content UIView equal to the number of pages times the width of the Dummy UIView using AutoLayout. (For the later change the multiplier in the constraint to be the number of pages).

Now create pages inside the Content UIView as you normally would and set Paging Enabled to yes on your UIScrollView and voila you have paging in a UIScrollView using AutoLayout.

I've tested this in IOS 6, 7 & 8.

Update:

Here is a sample project with this setup as requested: https://github.com/kostub/PagingScrollView

Answer 2

Follow Working with Scroll Views to build paging UIScrollView with content in Interface Builder.

I'd also recommend using Stack View as a content view for your UIScrollView since it allows to essentially reduce layout complexity.

When you use traditional approach each entry view inside content view has 5 constraints at least:

• leading to previous entry
• top to parent
• trailing to next entry
• bottom to parent
• equal width to scroll view

Stack View arrange its content automatically thus the only constraint each entry should have is "equal width to scroll view"

Check this project https://github.com/eugenebrusov/ios-stack-paging-scroll to see Stack View in action.

Answer 3

It is possible to use the scrollView's size to set the size of the contentView, contrary to https://developer.apple.com/library/ios/technotes/tn2154/_index.html; this was tested in iOS 8.2 beta 3.

Note that I did this programmatically, but hopefully this is useful to someone. The hierarchy is:

root: UIView
  scrollView: UIScrollView
    contentView: UIView
      page0
      page1
      ...

1. Add constraints to position scrollView relative to root and any siblings of scrollView.

2. Attach contentView sides to its superview (scrollView): "H:|[contentView]|"
   "V:|[contentView]|"

3. Add size equality constraints to contentView and scrollView; this is the part that contradicts TN2154 (which says "do not rely on the scroll view to get their size"):

   contentView.height == scrollView.height
   contentView.width == scrollView.width

Note: the above is made-up notation for a programmatically instantiated height constraint.

4. Lay out the pages relative to their superview(contentView); I did this by tacking the first page left/top to contentView left/top, and subsequent pages left/top to previous page right/top.

Credit to Koustub for getting me on the right track - his solution works, but with some fiddling I was able to eliminate the dummy view.