iOS Tutorial: Using UIPageViewController to create a content slider (Objective-C/Swift)

Navigating between content pages by swiping is a widespread behavior in iOS. Surely, it is much more convenient to scroll through the gallery or magazine articles than to go back and select the next item. However, before iOS 5 the only way to implement such a feature was to use UIScrollView. The code could get quite messy. Fortunately, starting with iOS 5 there is a ready to use element available – UIPageViewController. This tutorial will cover the implementation of a simple gallery using UIPageViewController and discuss some customization points.

The demo app

We are going to build a simple photo gallery that will show some beautiful nature pictures. In the bottom there will be a UIPageControl element to show the current page.

UIPageViewController

 

Complete code

You can find the complete code here (tested with Xcode 7.3.1, iOS 9.3):

 

Getting started

Open Xcode and create a new project by choosing the Single View Application template. Choose whether Swift or Objective-C on the screen. This tutorial covers both Swift and Objective-C.

UIPageViewController

Now let’s design the main user interface. Open Main.storyboard that should already have a single ViewController. Change the background color of the ViewController to light gray (or any color you wish).

UIPageViewController

 

 

UIPageViewController

Now find the UIPageViewController in the Object Library and add it to the storyboard. In attributes inspector set navigation to “Horizontal” and transition style to “Scroll”.

UIPageViewController

Open the Identity Inspector of the UIPageViewController object and change its Storyboard ID to anything you wish – for example “PageController”.

UIPageViewController

Lastly, add a new viewcontroller to the storyboard. It’ll be our content controller. Let’s add a custom class for it and name it PageItemController. Create a new file and add the following code to it. Don’t forget to change the viewcontroller’s class in the storyboard.

Objective-C:

Swift:

As you see from the code, our content controller will have an ImageView. Therefore, add a new UIImageView to the PageItemController in the storyboard and connect it to “contentImageView” outlet. Change the background color to light gray. Finally, set controller’s Storyboard ID to something reasonable, e.g “ItemController”.

UIPageViewController

That’s all for now!

Content controller

You have already created a basic class for the content controller. Thus, it only needs a few lines of code to start working. As we’ll have only one class for all content controllers, we need to somehow identify different content items. In order to do it, each  PageItemController should have its index and image name.

Complete your PageItemController with following lines (new lines marked with ***):

Objective-C:

Swift:

Don’t worry about itemIndex and imageName, we’ll set their values later.

The only thing remaining is to actually set the image. We’ll do it in the viewDidLoad and in the setter of imageName (every time when imageName changes, the imageview’ll be updated).

Add following changes to your implementation (notice the usage of didSet in Swift implementation):

Objective-C:

 

Swift:

Parent controller

So, the content controller is ready, but we also need to add some lines of code to ViewController (initial controller) to make the slider work.

Add following declarations to the ViewController:

Objective-C:

Swift:

The variable “contentImages” represents the array of gallery images. Those are simply image names from the application bundle. Add any number of images you wish.

In viewDidLoad we’re going to initialize all those variables:

Objective-C:

Swift:

What’s going on here? We are doing two things:

  1. Creating and initializing the pageviewcontroller in the createPageViewController method.

In order to create a new instance of the UIPageViewController we use the handy storyboard’s method instantiateViewControllerWithIdentifier by passing to it the ID that we specified earlier in the storyboard.

After that we set UIPageViewController’s delegate to self. You also need to specify that ViewController implements UIPageViewControllerDataSource protocol.

Usage of UIPageViewControllerDataSource is not required. It is possible to specify all controllers statically by using setViewControllers method. In this demo app, where there are only 4 pages, it might be a wise thing to do. However, in most cases it is not reasonable to create all controllers at once.

Thus, in this demo app UIPageViewControllerDataSource will be used, but regardless usage of datasource, UIPageViewController needs at least one controller in the beginning. That’s why setViewControllers is called in the createPageViewController by passing the very first controller to it.

Finally, the pageviewcontroller is added as a subview to the controller.

  1. Changing UIPageControl’s style in the setupPageControl method.

By default the UIPageControl has white and light gray dots and depending on the background they might be almost invisible. That’s why default style of the UIPageControl is changed. Everything is pretty easy here: the style is changed using the appearance API. This call can be also done in any other place of the app (e.g AppDelegate), but for me it seems logical to do it in the ViewController.

UIPageViewControllerDataSource

The final step is to implement UIPageViewControllerDataSource methods. The protocol is rather simple and requires only two methods.

viewControllerBeforeViewController: should return a viewcontroller preceding the provided controller or nil if it is the first controller.

viewControllerAfterViewController: should return a viewcontroller following the provided controller or nil if it is the last controller.

Let’s take a look at the example implementation. Note that index is stored in the content controller. A convenience method for retrieving the viewcontroller is also defined.

Objective-C:

Swift:

In order to show UIPageControl, you need to implement two optional datasource methods. Just return the whole number of pages for presentationCountForPageViewController and the initially selected index for presentationIndexForPageViewController. Both methods should be implemented, otherwise UIPageControl won’t be shown.

Objective-C:

Swift:

That’s all for a basic app. However, UIPageViewController is quite customizable. For example, instead of horizontal scrolling you can choose vertical scrolling or create iBook style curling pages. All those settings can be easily changed from the Interface builder.

Common questions & Answers

Complete code

You can find the complete code here (tested with Xcode 7.3.1, iOS 9.3):

Have fun with UIPageViewController :)!

33 Comments
  1. Eugene
  2. Frank
  3. Adam
    • iOSDev iOSDev
      • Alex
  4. JFDion
    • Jean-Francois Dion
    • Adam
  5. Craig
    • iOSDev iOSDev
      • Nicola
  6. meow
  7. fridary
  8. Jawad
  9. Jamie
    • iOSDev Touch events
      • Jamie
  10. Rinku Panigrahi
    • iOSDev Dev
  11. alex4814
  12. Kenny
    • Kenny
  13. Eduardo
  14. Franko
  15. D Rollins
  16. Goktug
  17. Yufri
  18. hello
  19. JAwad
  20. Neo
  21. Rogue Wolf
  22. Amit Makhija

Leave a Reply

Your email address will not be published. Required fields are marked *


*