How to create UIPageViewController with Storyboard (2023)

We have coveredUIPageViewControllerBefore. The original tutorial shows how to create UIPageViewController with Interface Builder. To make it compatible with iOS 7 and Xcode 5 we completely rewrite the entire tutorial. Additionally, we use Storyboard to create UIPageViewController.

When you launch an app for the very first time, you'll likely encounter a series of walkthrough (or tutorial) screens that give you a brief introduction to its features. It is customary to explain how the app works. In this tutorial, we'll show you how to create a similar type of walk-through screen using UIPageViewController.

The UIPageViewController class was first introduced in the iOS 5 SDK to allow developers to create pages of content, with each page managed by its own view controller. The class has been further improved in iOS 6 to support scrolling transition. With Page View, users can easily navigate between multiple pages using simple gestures. The page view controller is not limited to creating walkthrough screens. Examples of pageview implementations can be found in games like Angry Birds to show available levels or book apps to show pages of content.


The UIPageViewController is a highly configurable class. You may define the following:

• the orientation of the side views – vertical or horizontal
• the transition style – page curl transition style or scrolling transition style
• the position of the spine – applies only to the page roll transition style
• the space between pages – applies only to scrolling transition style to define space between pages

Let's build a simple app together to demonstrate how UIPageViewController works. However, we will not demonstrate every option of UIPageViewController. We only use scrolling transition style to show a series of walkthrough screens. Do not worry. With a basic understanding of the UIPageViewController, I believe you should be able to explore other features in the PageView controller.

Let's begin.

A look at the demo app

The demo app we are going to create is very simple. It displays 4 screens to give users a brief introduction to the interface. The user can navigate between pages by swiping the screen. Each time the user taps the Restart button to return to the first page of the tutorial. You shouldn't be new to these types of walkthrough/tutorial screens as they're commonly found in apps like Snapguide and Airbnb.


Build the project

Launch Xcode and create a new project using the Single View Application template. It might seem a bit odd to choose the Single View Application template, since Xcode already ships with a page-based application template that contains a fully functional app based on the UIPageViewController. However, this template is a bit complex and it will take more time to clean up the template's code than to start from scratch. Of course, if we start from scratch, we can better understand the concept behind the UIPageViewController.


OK, let's continue. On the next screen, enter PageViewDemo as the product name and set com.appcoda in the Company ID field. Select iPhone for the Devices option. Click Next and build the project.


Create Page View Controller in Storyboard

Next, select the Main.storyboard. As usual, you should find a default view controller generated by Xcode. leave it as it is Drag a Page View Controller from the Object Library to the Storyboard. Then add another view controller and place it in the same storyboard.



For this project, the original view controller is used as the root view controller to hold the page view controller. The view controller we just added is used for displaying the page content. Throughout the article, we refer to the original view controller as the root view controller and the other view controller as the page content controller.

You may wonder why we only add a single view controller for 4 content pages. Shouldn't we be using four view controllers instead of one? As you can see from the final result, the walkthrough screens are very similar. It's better to use the same view controller for different screens.

Next, assign a Storyboard ID for the Page View Controller and the Page Content Controller. You can just select the controller and set the ID under Identity Inspector. Set the Page View Controller Storyboard ID as "PageViewController" and name the Page Content Controller ID as "PageContentController". We'll refer to these IDs later in our code.


By default, the Page View Controller transition style is set to Page Curl. The Page Curl style is perfect for book apps. For walkthrough screens, we prefer the scroll style. So change the Transition Style to Scroll under Attribute Inspector.

We design the UI of the page content view controller. Drag an image view and caption into the controller. You can freely change the font and size. But your view controller should be similar to the screenshot below.


For the default view controller, add a Restart button and place it at the bottom of the screen.


Create a view controller class

The next step is to create a view controller class and associate it with the appropriate view controller. Select File -> New -> File... menu and select the "Objective-C Class" template. Name the class PageContentViewController and make it a subclass of UIViewController.


Go back to the storyboard. Select the page content view controller and set the custom class under Identify Inspector to PageContentViewController.


Next we create outlets for the image view and label. Go to Assistant Editor and make sure PageContentViewController.h is open. Control and drag from the image view to PageContentViewController.h and create an IBOutlet. Set the name as backgroundImageView for the image view. For the label, set the name of the outlet as the titleLabel.


After the change, the PageContentViewController.h should look like this:

Next, select the root view controller and make sure ViewController.h is open. Create an action for the Start Over button and name the action startWalkthrough.


Okay, we finished the UI design and created all the outlets. Let's move on to the implementation of the view controller classes.

Implementation of the Page Content View Controller

It is very easy to implement the page content view controller. First add the following properties in PageContentViewController.h:

The pageIndex stores the current page index (or page number). The view controller is used to display an image and a title. So we create two parameters to pass the title text and image file. Next, open PageContentViewController.m and change the viewDidLoad::

Implementation of the Page View Controller

The UIPageViewController class is classified as a container controller. The container controller is used to hold and manage multiple view controllers displayed in the app and to control the way one view controller switches to another. Here the UIPageViewController is the container controller that allows the user to navigate from page to page, each page being managed by its own view controller object. The following figure shows the relationship between the page view controller and the page content view controller.

For UIPageViewController to work, we need to adopt the UIPageViewControllerDataSource protocol. The data source for a page view controller is responsible for providing the content view controllers when needed. By implementing the data source protocol, we tell the pageview controller what to display for each page.

In this case we use the ViewController class as the data source for the UIPageViewController instance. Therefore it is necessary to declare the ViewController class as implementing the UIPageViewControllerDataSource protocol.

The ViewController class is also responsible for providing the page content data (i.e. images and titles). Open the ViewController.h. Modify the @interface declaration, add a new property to hold the UIPageViewController, and properties for images and titles:

In ViewController.m, initialize the pageTitles and pageImages in the viewDidLoad method:

We created the data model for the page content. Next we need to implement at least two methods of the UIPageViewControllerDataSource protocol:

• viewControllerAfterViewController - provides the view controller after the current view controller. In other words, we tell the app what to show for the next screen.
• viewControllerBeforeViewController - Provides the view controller before the current view controller. In other words, we tell the app what to show when the user goes back to the previous screen.

Add the following lines of code before the end of the ViewController.m file:

The above methods are very simple. First we get the current page index. Depending on the method, we simply increase/decrease the index number and bring the view controller back to display. Of course, we need to check if we've reached page boundaries and return null if we do.

As you may have noticed, we didn't create the viewControllerAtIndex: method. It's a helper method to create the page content view controller if needed. It takes the index parameter and creates the appropriate page content controller.
In ViewController.m add the helper method:

Recall that when we designed the UI, we set a storyboard ID for the view controllers. The ID is used as a reference to create the view controller instance. To instantiate a view controller in the storyboard, you can use the instantiateViewControllerWithIdentifier: method with a specific storyboard ID.

To display a page indicator, you need to tell iOS the number of pages (i.e. dots) to display in the page view controller and which page to select initially. Add the following two methods to the end of the ViewController.m file:

Again, the above code is very simple. We simply tell iOS that we have the total number of pages to display in the Page View Controller and that we want the first page to be selected by default.

Note: You must implement both methods to see the page display. Also, page display only works in scroll transition mode.

Initializing the UIPageViewController

The final step is to create and initialize the UIPageViewController. The best place to do this is in the viewDidLoad method. Open the ViewController.m file and change the method to:

Let's see what the method does. We first create the PageViewController instance. Next we specify the data source, in this case it's the class itself. Then we create the first page content controller, add it to an array of controllers and assign it to the page view controller for display.

The last thing we do is resize the page view controller and add the page controller view to the current view.

Customize the page display

If you compile and run the app now, your app should run correctly, but the page display may be missing. Actually, the page display is there, but the color of the dots is the same as the color of the view. So let's change its color.

In AppDelegate.m, add the following lines of code in the didFinishLaunchingWithOptions: method:

Compile and run the app

And there you go, start the application and see how the UIPageViewController works. You should be able to load the page view controller using the iPhone simulator. Try swiping the screen to navigate between pages.


Back to the first page

One thing remains. The "restart" is not yet implemented. When you tap it, we expect the page view controller to scroll back to the first page. You can use the setViewControllers: method of the UIPageViewController to switch the page. To return to the first page of the page view controller, change the startWalkthrough: method of ViewController.m:

Run the app again. The app will take you back to the first page when you tap the "Restart" button.

Summary

In this tutorial, we'll cover the basics of UIPageViewController and demonstrate how to implement the controller using Storyboard. The UIPageViewController is a very handy class for implementing walkthrough screens in your app. However, the use of UIPageViewController is unlimited. You can use it to display any information, such as B. Web view pages. The UIPageViewController is highly configurable. This tutorial only covers the scroll transition style. But don't you know that you can easily use the class to create a simple book app? Just change the transition style from Scroll to Page Curl and see what you get. So don't stop there. Try changing the options available and learn more about UIPageViewController.

For your full reference, you canDownload the Xcode project here. As always, please leave us a comment and share your thoughts.