2/24/2016 UIPageViewController in iOS Tutorial

UIPageViewController in iOS
iOS 

Created By Drashti Lakhani | Last Updated on : 29 January 2016

http://www.theappguruz.com/blog/uipageviewcontroller-in-ios 1/18
2/24/2016 UIPageViewController in iOS Tutorial

Jump To:

1 Create Xcode Project for UIPageViewController

2 Design UI
3 Add ViewControllers
4 Set storyBoard ID
5 Design UI
6 Create IBOutlet
7 Initialized UIPageViewCotnroller
8 Delegate & Datasource mehtods
9 Add PageViewController
10 Set PageViewController in AppDelegate

Objective

This blog post gives introduction to the UIPageViewController in iOS.

Introduction:

UIPageViewController is used to navigate between the screens or in simple

words pages with animations. The screen navigation is controlled by the user
gestures. Smart phone users are aware of the scrolling between the pages in the
Home Screen of the device. This is done by the use of UIPageViewController.
UIPageViewController in iOS is a highly configurable class.

We are allowed to define:

Orientation of the page views: vertical or horizontal

Transition style:  page curl transition style or scrolling transition style

Ocation of the spine: only applicable to page curl transition style

Space between pages: only applicable to scrolling transition style to

define the inter-page spacing

http://www.theappguruz.com/blog/uipageviewcontroller-in-ios 2/18
2/24/2016 UIPageViewController in iOS Tutorial

In this post I am going to create a simple example of UIPageViewController

which uses the scroll transition style to navigate between three screens which
will have 3 different images of cartoon characters. So, lets get started.

 
Step 1 Create Xcode Project for
UIPageViewController

Create a new xcode project for UIPageViewController example under the iOS
Application and create single view application. Here we can see that page based
application is also available for navigating through pages, but in this post I am
concentrating upon navigation between different pages or screens using
UIPageViewController, which is easier than page based application.

Here, I am giving the iOS Page View Controller product name as PageViewDemo.
And the and organization name as com.TheAppGuruz . You can enter the product
name and organization name as per your preference. Press next and store the
Pagve View Controller Tutorial project according to your preference.

Press create, and the project for Xcode Page View Controller in iOS is created.

You can get more detail about creating XCode project from following link:

Basic of Creating Xcode Project in iOS

 
Step 2 Design UI

Drag a new PageViewController which is subclass of UIPageViewController. And

a new ViewController on to the storyboard.

The UIPageViewController storyboard shall look as shown below: 

http://www.theappguruz.com/blog/uipageviewcontroller-in-ios 3/18
2/24/2016 UIPageViewController in iOS Tutorial

 
Step 3 Add ViewControllers

In this iOS PageViewController tutorial, the original view controller is used as the
root view controller for holding the page view controller. The view controller
we've just added will be used for displaying the page content. Throughout the
post, we will refer the original view controller as the root view controller and the
other view controller as page content controller. For that delete the default
viewcontroller.h and viewcontroller.m files and create new class under the
UIViewController Class and name it as RootViewController.

In the 3rd inspector of default view controller in the class section select
RootViewController, hence the default view controller inherits from the
RootViewController class. Similarly for the page content view controller create a
new class under the UIViewController and name it as
PageContentViewController. And in the 3rd inspector of new view controller
select the class as PageContentViewController which means the new view
controller inherits from PageContentViewController.

http://www.theappguruz.com/blog/uipageviewcontroller-in-ios 4/18
2/24/2016 UIPageViewController in iOS Tutorial

Now the two view controllers titles will appear as shown below:

 
Step 4 Set storBoard ID

Next we will assign Storyboard ID for PageViewController and

PageContentViewController which we will use later in our code. For that select
the PageViewController and in the identity inspector enter the text
PageViewController, also select PageContentViewController and in the identity
inspector enter text PageContentViewController. 

By default, the transition style of the page view controller is set as Page Curl. The
page curl style is perfect for book apps. For navigating between screens, we will
use scrolling style. So change the transition style to Scroll under Attribute
Inspector. 

http://www.theappguruz.com/blog/uipageviewcontroller-in-ios 5/18
2/24/2016 UIPageViewController in iOS Tutorial

Contact Us
S earch

CATEGORIES
3DS

Max Android Blog Graphics iOS Maya Unity Web

RELATED BLOG POSTS

iOS - Create Gradient View

Build iOS Outlet and Action via Drag and Drop Method

Yosemite OS with Latest Features

Customize Table View Cells for UITableView in iOS

  Swift Application Development

Step 5 Design UI
Google Maps Mobile SDK Using Swift

UIPageViewController in iOS
Now we will create the user interface for the PageContentViewController for that
drag ImageView and
Create Label on to
UITableView the PageContentViewController’s
Control in iOS view put the
label on to the ImageView in the upper portion. The ImageView will contain
different images
iOS -for different to
Introduction screens
Gestureand the label
Recognizer will have some text about the
in iOS
image. Change the label text color to pink color.
iOS - AirDrop File Sharing
The PageContentViewController will look as shown below: 
Stripe Integration - iOS (Payments through Card)

iOS - Overlap Multiple Videos

http://www.theappguruz.com/blog/uipageviewcontroller-in-ios 6/18
2/24/2016 UIPageViewController in iOS Tutorial

For the root view controller, add a "Start Again" button and put it at the below of
the screen. 

Step 6 Create IBOutlet

Now create an Outlet from the ImageView and Label in the

PageContentViewController.h file and name it as ivScreenImage and
lblScreenLabel respectively. 

http://www.theappguruz.com/blog/uipageviewcontroller-in-ios 7/18
2/24/2016 UIPageViewController in iOS Tutorial

Next we create NString for holding the current images file and current image text
for that we add the following line of code in PageViewController.h file. Also we will
have NSUInteger for keeping page index.

@property NSUInteger pageIndex;

@property NSString *imgFile;
@property NSString *txtTitle;

And in the PageContentViewController.m file in the ViewDidiLoad Method

implement the following line of code:

- (void)viewDidLoad
{
[super viewDidLoad];
self.ivScreenImage.image = [UIImage imageNamed:self.i
mgFile];
self.lblScreenLabel.text = self.txtTitle;
}

Step 7 Intialized UIPageViewController

In order to make UIPageViewController work, we must adopt the

UIPageViewControllerDataSource protocol. The data source for a page view
controller is responsible for providing the content view controllers on demand.
By implementing the data source protocol, we tell the page view controller what
http://www.theappguruz.com/blog/uipageviewcontroller-in-ios 8/18
2/24/2016 UIPageViewController in iOS Tutorial

to display for each page.

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

The RootViewController class is also responsible to provide the data of the page
content (i.e. images and titles). Open the RootViewController.h .

Add the following line of code:

@interface RootViewController : UIViewController

<UIPageViewControllerDataSource>

@property (nonatomic,strong) UIPageViewController *Pa

geViewController;
@property (nonatomic,strong) NSArray *arrPageTitles;
@property (nonatomic,strong) NSArray *arrPageImages;

- (PageContentViewController *)viewControllerAtIndex:
(NSUInteger)index;

- (IBAction)btnStartAgain:(id)sender;

@end

In the RootViewController.m file initialize the arrays for pageimages and pagetitles
in ViewDidLoad Method:

[super viewDidLoad];
arrPageTitles = @[@"This is The App Guruz",@"This is
Table Tennis 3D",@"This is Hide Secrets"];
arrPageImages =@[@"1.jpg",@"2.jpg",@"3.jpg"];

 
Step 8 Delegate & Datasource method

Next we will add the two required methods for the UIPageViewDatasource in the
as follows:
http://www.theappguruz.com/blog/uipageviewcontroller-in-ios 9/18
2/24/2016 UIPageViewController in iOS Tutorial

RootViewController as follows:

- (UIViewController *)pageViewController:(UIPageViewC
ontroller *)pageViewController viewControllerBeforeVi
ewController:(UIViewController *)viewController
{
NSUInteger index = ((PageContentViewController*) view
Controller).pageIndex;
if ((index == 0) || (index == NSNotFound))
{
return nil;
}
index--;
return [self viewControllerAtIndex:index];
}

- (UIViewController *)pageViewController:(UIPageViewC
ontroller *)pageViewController viewControllerAfterVie
wController:(UIViewController *)viewController
{
NSUInteger index = ((PageContentViewController*) view
Controller).pageIndex;
if (index == NSNotFound)
{
return nil;
}
index++;
if (index == [self.arrPageTitles count])
{
return nil;
}
return [self viewControllerAtIndex:index];
}

Here you can see that we have created a helper method i.e.
viewControllerAtIndex:index .

The definition for this method goes as below:

http://www.theappguruz.com/blog/uipageviewcontroller-in-ios 10/18
2/24/2016 UIPageViewController in iOS Tutorial

- (PageContentViewController *)viewControllerAtIndex:
(NSUInteger)index
{
if (([self.arrPageTitles count] == 0) || (index >= [s
elf.arrPageTitles count])) {
return nil;
}
// Create a new view controller and pass suitable dat
a.
PageContentViewController *pageContentViewController
= [self.storyboard instantiateViewControllerWithIdent
ifier:@"PageContentViewController"];
pageContentViewController.imgFile = self.arrPageImage
s[index];
pageContentViewController.txtTitle = self.arrPageTitl
es[index];
pageContentViewController.pageIndex = index;
return pageContentViewController;
}

To display a page indicator, you have to tell iOS the number of pages (i.e. dots)
to display in the page view controller and which page must be selected at the
beginning. Add the following two methods at the end of the RootViewController.m
file.

-(NSInteger)presentationCountForPageViewController:(U
IPageViewController *)pageViewController
{
return [self.arrPageTitles count];
}

- (NSInteger)presentationIndexForPageViewController:(
UIPageViewController *)pageViewController
{
return 0;
}

http://www.theappguruz.com/blog/uipageviewcontroller-in-ios 11/18
2/24/2016 UIPageViewController in iOS Tutorial

Step 9 Add PageView Controller

In this final step we will create and initiate the UIPageViewController and for that
we will make use of the Storyboard ID of the PageViewController. Remember we
discussed that we will use the Storyboard ID further in our code. Hence change
the ViewDidLoad method to:

- (void)viewDidLoad
{
[super viewDidLoad];
arrPageTitles = @[@"This is The App Guruz",@"This is
Table Tennis 3D",@"This is Hide Secrets"];
arrPageImages =@[@"1.jpg",@"2.jpg",@"3.jpg"];
// Create page view controller
self.PageViewController = [self.storyboard instantiat
eViewControllerWithIdentifier:@"PageViewController"];
self.PageViewController.dataSource = self;
PageContentViewController *startingViewController = [
self viewControllerAtIndex:0];
NSArray *viewControllers = @[startingViewController];
[self.PageViewController setViewControllers:viewContr
ollers direction:UIPageViewControllerNavigationDirect
ionForward animated:NO completion:nil];
// Change the size of page view controller
self.PageViewController.view.frame = CGRectMake(0, 0,
self.view.frame.size.width, self.view.frame.size.hei
ght - 30);
[self addChildViewController:PageViewController];
[self.view addSubview:PageViewController.view];
[self.PageViewController didMoveToParentViewControlle
r:self];
}

 
Step 10 Set PageViewController in AppDelegate

http://www.theappguruz.com/blog/uipageviewcontroller-in-ios 12/18
2/24/2016 UIPageViewController in iOS Tutorial

In this step we customize the look of the PageView i.e. we will change the color
of the dots in the PageView. For that add the following lines of code in the
AppDelegate.m file in didFinishLaunchingWithOptions method:

- (BOOL)application:(UIApplication *)application didF

inishLaunchingWithOptions:(NSDictionary *)launchOptio
ns
{
UIPageControl *pageControl = [UIPageControl appearanc
e];
pageControl.pageIndicatorTintColor = [UIColor lightGr
ayColor];
pageControl.currentPageIndicatorTintColor = [UIColor
blackColor];
pageControl.backgroundColor = [UIColor whiteColor];
return YES;
}

http://www.theappguruz.com/blog/uipageviewcontroller-in-ios 13/18
2/24/2016 UIPageViewController in iOS Tutorial

I hope you will find this blog post very useful. While working with
UIPageViewController in IOS. Let me know in comment if you have any
questions regarding UIPageViewController in IOS. I will reply you ASAP.

Got an Idea of iPhone App Development? What are you still waiting for? Contact
http://www.theappguruz.com/blog/uipageviewcontroller-in-ios 14/18
2/24/2016 UIPageViewController in iOS Tutorial

us now and see the Idea live soon. Our company has been named as one of the
best iPhone App Development Company in India.

Free Download Full Source Code!!!

Created on : 04 March 2015

Drashti Lakhani

I am a Techno Freak who likes to explore new technologies and as an

iOS developer and enthusiast I try to learn new things which polish my
development skills, so that applications are made more users friendly.

PREVIOUS POST
Create Classic Snake Game in Unity 2D

NEXT POST
How To Animate Specific Body Parts Using Avatar Mask

2 Comments The App Guruz 

1 Login

 Recommend 1 ⤤ Share Sort by Best

Join the discussion…

Karthi Keyan • 7 months ago

http://www.theappguruz.com/blog/uipageviewcontroller-in-ios 15/18
2/24/2016
Karthi Keyan • 7 months ago UIPageViewController in iOS Tutorial
@hi

Its easy to understand.thanks to awesome tutorial.

I want to move by button click how to do this.

I have created delegate method and pass the index to viewcontroller but
page view controller not moving properly.

i have tried so far

PageContentViewController.m file

self.pageIndex is my integer value to point out position of

pageviewcontroller.

- (IBAction)nextAction:(id)sender {
int temp=self.pageIndex+1;
[self.delegate scrollKeyboard:self.pageIndex];

see more

△ ▽ • Reply • Share ›

Hardik Trivedi (iHart) > Karthi Keyan • 6 months ago

In this demo make some changes for your next button :

1. Go to Main.storyboard file and replace name “Start Again” with

“Next”.
-> Consider this is your next button.

2. RootViewController.h file
-> Put below code:

@interface RootViewController : UIViewController

<uipageviewcontrollerdatasource>
{
int intCurrentIndex;
}

3. RootViewController.m file
-> In viewDidLoad() method, put below line:

intCurrentIndex = 0;

see more

△ ▽ • Reply • Share ›

ALSO ON THE APP GURUZ WHAT'S THIS?

http://www.theappguruz.com/blog/uipageviewcontroller-in-ios 16/18
2/24/2016 UIPageViewController in iOS Tutorial

ASP.NET MVC 5 at a Glance with Unity - iOS 64 Bit Support

New Features 1 comment • 7 months ago
4 comments • 7 months ago Sridevi Pindi — Hi , when i am trying
parth trivedi — RenderBody method to build the project , i am getting the
exists in the Layout page to render following error …
child page/view. It is just like the
ContentPlaceHolder in master page.
Android Gestures Tutorial Creating Custom Packages in
8 comments • 7 months ago Laravel 4
Tejas Jasani — ok 1 comment • 7 months ago
Luciano Ferreira Filho — Hi Nirmal,
I'm having problem when i export my
laravel package to packagist and
require it to another laravel …

Start a
Project
Like what you see? We'd
love to hear from you!

GET IN TOUCH

Game Development
3D Game Development
IOS Game Development
Android Game Development
Game Development

http://www.theappguruz.com/blog/uipageviewcontroller-in-ios 17/18
2/24/2016 UIPageViewController in iOS Tutorial

App Development

Mobile App Development

iPhone App Development
Android App Development

Tools

Android - JSON
Android XML Layout Generator
CSS Animation

Company

About us
Career
Client Testimonials
Our Team
Contact Us

Receive our email newsletter

Get technical updates about mobile games & apps on your email.

email address SIGN UP

Follow Us

© 2016 The App Guruz. All rights reserved

http://www.theappguruz.com/blog/uipageviewcontroller-in-ios 18/18