Custom UIPageViewController

Question

In the process of building an application, we will inevitably encounter UI / UX like this

To solve this problem, most people will choose to include a CollectionView in a CollectionView. This approach is very good, solving many cases. However, if you do not handle the Layout as well as the Reuse management of CollectionView, it will cause many annoying Bugs about the UI. In today’s article, I will introduce another approach to solve the above problem, which is to use UIPageViewController.

Introducing the UIPageViewController

UIPageViewController is a Component of UIKit. UIPageViewController can be understood as an array of ViewController and at a time will display only 1 Controller (exactly the view of that ViewController, but in this article I would like to call Controlller for short. and these Controllers can switch back and forth (left, right) according to different transition effects during initialization.

UIPageViewController can be used in many cases. However, as I see, when searching for how to use UIPageViewController does not produce much documentation. Swift also doesn’t have much support for this component. If you implement the default Apple UIPageViewController will clearly see that. UIPageViewControllerDelegate also only has two functions called when a controller’s view is about to transition to the next controller’s view in Pages.

To make it easier to use and extend the UIPageViewController, we will have to add some Custom functions. The next part of the article I will go into each specific step.

Custom UIPageViewController

First, I want to receive events when the Controller displays on the Page changes with the corresponding Index. Above I mentioned 2 functions in default Delegate, but these 2 functions are not always called. Therefore, I will create a Delegate to capture this event.

Create a CustomPageViewController class that inherits the UIPageViewController

I will declare the controller property to contain a Controller array which is the Controllers displayed on UIPageViewController and a delegate of type CustomPageViewControllerDelegate I defined above. Remember to weak to avoid the Retain Cycle.

The mechanism of UIPageViewController at a time sets a Controller, and pre-creates Controller (Will display when swiping left) and Controller after (Will show when swiping right) of that Controller. Therefore, when for CustomPageViewController conform UIPageViewControllerDataSource, we will have to declare two functions.

Add the following code to those two functions. The logic of this code is relatively simple, we will check how much index controller is displayed. Subtract 1 from the indext to get the previous Controller index in the array controlles, if the index is valid then the corresponding element is returned, otherwise nil is returned. Similar to the afterController finder logic.

Declare the notifyfNewIndex () function to trigger the delegate when new controller is displayed, index changes.

Declare the scrollToViewController function. The purpose of this function is called in case we want to specify a ViewController to display. Then we have to call the UIPageViewController’s setViewControlles function. This function we will not use directly, so we will declare Private.

Our Controllers are in an array with corresponding indexes, during use we want to access the specific viewController via index. Therefore, we will declare function func scrollToViewController (index newIndex: Int) viewControllers? .First returns the currently displayed Controller. Find the corresponding index of that firstViewController in the array controllers. Compare the newIndex with the index just found to decide whether the scroll direction is forward or reverse. Then call the scrollToViewController function declared in the above paragraph to reset the displayed controller

Conform UIPageViewControllerDelegate. And declare the following code. This function will be called when viewController is called when we swipe between Controllers sequentially. But will not go in when we call the setViewController function of UIPageViewController. Therefore, we need to handle both cases, calling notifyfNewIndex () function to delegate to capture the event.

Add some functions in viewDidLoad. We need to set the default controller to show up for the PageViewController, I will choose to be the first controller in the array.

Use CustomPageViewController

The script here will look like the example at the beginning of the post. So I will create a simple Controller including 1 CollectionView and random Color displayed

Now I will create a CustomPageViewController including an array ColorViewController just created above in ViewController. I will initialize from within the code pageViewController because when dragging directly from the Storyboard, Swift will default to transitionStyle as .pageCurl.