Ios – UIScrollView Paging Autolayout & Storyboard

autolayoutiosobjective c

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!

Best Answer

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

Related Topic