articles

Home / DeveloperSection / Articles / UIPageViewController sample in iOS

UIPageViewController sample in iOS

Tarun Kumar7722 29-Oct-2015

In version iOS 5 SDK introduced us with UIPageViewController class. This class gives the facility to our application to implement a page turning style user interface in iOS applications. The UIPageViewController is a highly configurable class that lets developers to configure some points in our applications:


·     view page orientation like -Vertical or Horizontal

·    the transition style – dot based page turning style

·     the axis(spine) on which the page will turn

 

In iOS, UIPageViewController is used to navigate between views with animation. And the page navigation will handled by user gestures. Here we will create a UIPageViewController with a 5 views that displays different Screen numbers in different view number (view means screen). 


To create the application follow the Steps:

1.    Open Xcode, go to File > New > Project > here select 'Empty Application' and click 'Next' > now enter the Product Name as 'PageViewController' and click 'Next' and select the destination to save this project and after click 'Create' button. 


2.    Next, goto File > New > File > here select 'Objective-C class' and click 'Next' > in Class field enter 'ViewController' and select 'UIViewController' in Subclass of field and uncheck the 'Targeted for iPad' and click 'Next' button and at last click on 'Create' button. 


3.    Next, you can see three files 'ViewController.h', 'ViewController.m' and “ViewController.xib” files are displaying now in “Project Navigator”, similarly create another view controller and named it “ContainerViewController”.


4.    Next, select 'ViewController.h' file and create an IBOutlet for UILabel as “screenLabel” and NSInteger variable and named it “indexNumber”, like this:


@property(weak, nonatomic)IBOutlet UILabel *screenLabel; 

@property(assign, nonatomic) NSInteger indexNumber;


5. Next, select 'ViewController.m' file and @synthesize those variables here.   

6. Next, at the time of view loads we need to display no on screen, for that in ViewController.m file add a ViewController method “viewDidAppear” and write this code in it: 

self.screenLabel.text = [NSString stringWithFormat:@"Screen #%d", self.indexNumber];

this code will update the current screen number whenever view display. 


7.    Now, select “ContainerViewController.h” file and implement “UIPageViewControllerDataSource”, and create an instance of “UIPageViewController” as “pageController” and @synthesize it in implementation file, after it will look like this:


@interface ContainerViewController : UIViewController 

<UIPageViewControllerDataSource>

@property(strong, nonatomic) UIPageViewController *pageController;

8.  Now, if we want to move views on Screen, we need to increment/decrement the current screen number and also nil, 'nil' because screen having limits to display views so that it will to identify screen limit. To do this we need to implement 2methods “viewControllerBeforeViewController” and “viewControllerAfterViewController”, import both methods in “ContainerViewController.m” file and also import “ViewController.h” file. 


9. Now, create a method “viewControllerAtIndex:” in “ContainerViewController.m” file, this method will be responsible to create screens to display. 


10.  Now, to initialize the UIPageViewController the best place is in the “viewDidLoad” method, in this method initialize and set delegates, like this:


self.pageController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:nil];

self.pageController.dataSource = self; 

[[self.pageController view] setFrame:[[self view] bounds]];

ViewController *viewControllerObject = [self viewControllerAtIndex:0];

NSArray *viewControllers = [NSArray arrayWithObject:viewControllerObject];

[self.pageController setViewControllers:viewControllers direction: UIPageViewControllerNavigationDirectionForward animated:NO completion:nil];

[self addChildViewController:self.pageController];

[[self view] addSubview:[self.pageController view]];

[self.pageController didMoveToParentViewController:self];


In the above code, first we create UIPageViewController object and specify the navigation style and navigation orientation. As the transition style here we use “UIPageViewControllerTrainsitionStyleScroll” and for Orientation we use “UIPageViewControllerNavigationOrientationHorizontal”.

Next, we specify the dataSource as “self”. Next line for full screen display.

Next, we create first child screen and add that screen to an array of controllers. And at last we replace current controller with our new page controller.

 

Now, Run the application: it will look like this:

UIPageViewController sample in iOS

Application running and swiping pages work perfectly but here one thing more to do, here paging dots are not displaying,

To add dots, we need to implement two more methods into “ContainerViewController.m” file, methods are:

-    presentationCountForPageViewController – it returns the no of dots to be displayed

-    presentationIndexForPageViewController – it returns the initial selected dot index  


Now, after implementing both methods Run the Application and it will look like this:

UIPageViewController sample in iOS

 
Source code is here:

 

ViewController.h


#import <UIKit/UIKit.h>

 

@interface ViewController : UIViewController

 

@property(weak, nonatomic)IBOutlet UILabel *screenLabel;

@property(assign, nonatomic) NSInteger indexNumber;

 

@end

 

ViewController.m


#import "ViewController.h"

@interface ViewController () 

@end

 

@implementation ViewController

@synthesize screenLabel;

 

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil

{

self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];

if (self) {

// Custom initialization

}

return self;

}

 

- (void)viewDidLoad

{

[super viewDidLoad];

// Do any additional setup after loading the view from its nib.

}

 

- (void)didReceiveMemoryWarning

{

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

 

- (void)viewDidAppear:(BOOL)animated{

self.screenLabel.text = [NSString stringWithFormat:@"Screen #%d", self.indexNumber];

}

 

@end

 

ContainerViewController.h


#import <UIKit/UIKit.h>

 

@interface ContainerViewController : UIViewController<UIPageViewControllerDataSource>

 

@property(strong, nonatomic) UIPageViewController *pageController;

 

@end

 

ContainerViewController.m


#import "ContainerViewController.h"

#import "ViewController.h"

 

@interface ContainerViewController ()

@end

 

@implementation ContainerViewController

@synthesize pageController;

 

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil

{

self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];

if (self) {

// Custom initialization

}

return self;

}

 

- (void)viewDidLoad

{

[super viewDidLoad];

// Do any additional setup after loading the view from its nib.

 

self.pageController = [[UIPageViewController alloc]

initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll

navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal

options:nil];

 

self.pageController.dataSource = self;

[[self.pageController view] setFrame:[[self view] bounds]];

 

ViewController *viewControllerObject = [self viewControllerAtIndex:0];

NSArray *viewControllers = [NSArray arrayWithObject:viewControllerObject];

[self.pageController setViewControllers:viewControllers

direction:UIPageViewControllerNavigationDirectionForward

animated:NO completion:nil];

 

[self addChildViewController:self.pageController];

[[self view] addSubview:[self.pageController view]];

[self.pageController didMoveToParentViewController:self];

}

 

- (void)didReceiveMemoryWarning

{

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

 

- (UIViewController *)pageViewController:(UIPageViewController *) pageViewController viewControllerBeforeViewController:(UIViewController *)viewController {

 

NSUInteger index = [(ViewController *)viewController indexNumber];

if (index == 0) {

return nil;

}

index--;

return [self viewControllerAtIndex:index];

}

 

- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController {

 

NSUInteger index = [(ViewController *)viewController indexNumber];

index++;

if (index == 3) {

return nil;

}

return [self viewControllerAtIndex:index];

}

 

- (ViewController *)viewControllerAtIndex:(NSUInteger)index{

 

ViewController *childViewController = [[ViewController alloc]

initWithNibName:@"ViewController" bundle:nil];

childViewController.indexNumber = index;

return childViewController;

}

 

- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController {

return 3;

}

 

- (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController {

return 0;

}

 

@end

 


Updated 07-Sep-2019

Leave Comment

Comments

Liked By