iOS UIPageViewController — Easy!!!

UIPageViewController is useful for displaying information in a series of UIViewControllers with great animation. You can see this widget everywhere, e.g. App Store, WhatsApp and Album app.

UUIPageViewController is a common widget used in lots of modern apps today. It can display a series of individual UIViewController when the user swipes on it. A famous example is the app listing page in the App Store app:

There are two types of UIPageViewController — “Page Curl” and “Scroll”. “Page Curl” one looks like a real book with a book spine and the user can flip between pages with lovely animation. “Scroll” one is just like a UIScrollView with paging feature.

Step-by-Step tutorial

Step 1) Add a UIContainerView to a UIViewController

Step 2) Replace the default UIViewController with a UIPageViewController

Step 3) Connect the UIContainerView with the UIPageViewController with Embed relationship

Step 4) Create a simple UIViewController (e.g. DemoIndividualPageViewController) for each individual page

Step 5) Coding on CustomPageViewController

At line 8–13, we create an UIViewController list for storing all the individual pages.

At line 15, we initialise the start page of the CustomPageViewController to be the first element of the UIViewController list.

The number of initial UIViewController varies between different spine location properties. If mid is used, TWO UIViewController s have to be used at the setViewControllers function. We will discuss in the next session.

Step 6) Implement the UIPageViewControllerDataSource for defining the previous and next page

Step 7) Finish! Let’s build and run the app!

Different Configurations of UIPageViewController

1. Navigation: Can be either horizontal or vertical, which are both self-explanatory
2. Transition Style: “Page Curl” or “Scroll”

3. Page Spacing

4. Spine location: Can be one of none, min, mid or max

You can imagine an UIPageViewController in page curl mode is just like a book flipping between different pages. There is a spin in every book.

Moreover, there MUST be 2 pages shown at the same time when spine location is set to mid. We need to ensure the length of the UIViewController list is in even number and initialise the UIPageViewController with a list of TWO UIViewController. Otherwise, there will be run-time errors.

* There is no concept about spine location when transition style is set to Scroll. Therefore, spine location is always none in this case.

5. Double sided:

This property determines if the pages in an UIPageViewController (or a book) should be printed on both sides. In my opinion, this property should only be set to true when the spine location and transition style are set to mid and page curl, else the even number page will be missing from the user interface (See the green Page 1 at the above image)!

Since scroll UIPageViewController does not have the flipping feature, there is no effect caused by the double sided property.

Summary

UIPageViewController can display a series of UIViewController with animation. Page curl mode can display the UIViewController s like a book with a different spine location. If spine location is set to mid, please make sure the number of UIViewController must be an even number and initialising the UIPageViewController with TWO UIViewController s!

Read More & References

iOS — Custom UIPageControl with UIPageViewController

UIPageViewController | Apple Developer Documentation

UIPageViewControllerDataSource | Apple Developer Documentation

UIPageViewControllerDelegate | Apple Developer Documentation

Thank you for reading this article. Hope you find it interesting and useful!
You are welcome to follow me and contact me through the following channels:

1. Twitter@myrick_chow
2. YouTube@myrickchow
3. LinkedIn@Myrick Chow