How to create Page View Controller in Objective-C ?

Page View Controller in Objective-C

Introduction

A page view controller lets the user navigate between pages of content, where each page is managed by its own view controller object. More...

In this tutorial, we are creating an app showing apple devices images using Page View Controller using Objective-C language.

Steps to create Page View Controller Project as follows:

Step 1: Launch Xcode and create new project by clicking on Single View Application template under iOS tab as shown in below image and click Next button. 

Step 2: Enter product name as PageViewDemo and select Language as Objective-C then again click on Next button as shown in below image. Later click on Create button to create project on the next pop-up window.

Step 3: On your project, just go to main.storyboard file available in the project navigator, in storyboard canvas, and search Page View Controller from Object Library then drag & drop to the storyboard. Make Page View Controller as Initial View Controller by dragging Arrow from exiting View Controller to Page View Controller.

Thereafter, View Controller will be instantiated through Page View Controller class using its storyboard ID.  

                         

View Controller will be content view controller where the contents of the page view controller will be displayed.

Step 4: Creating Class for PageViewController

Now, we need to create a class for Page View Controller and its superclass should be UIPageViewController as can be seen in given image. To create new class, select  Xcode File -> New -> File menu option (or press Cmd + N).

select the Cocoa Touch Class and click on Next.

After clicking on Next, enter class name as PageViewController and make sure its subclass is UIPageViewController, then click on Next and create button. 

Step 5: Associate class to PageViewController

Now, select Page View Controller from storyboard and associate that class with it by selecting ‘Identity Inspector’ from Inspector Pane and enter the class name i.e. PageViewController in the field of Class as mentioned in below image.

Step 6: Set Image View object to View Controller

Just drag & drop Image View object to View Controller from Object Library and also set its constraints, pin ‘zero’ to four side.

Next is to set Image View property by selecting Assistant Editor option, drag & drop to its class i.e. ViewController.h file and name it as deviceImage.

Step 7: Coding for View Controller

Select ViewController.h file & add following code as mentioned in below image:

@property (strong,nonatomic) NSString *strImage;

@property NSUInteger pageIndex;

Reason to  define:

• ‘strImage’ of type String is defined to store that image name by index value to fetch from an array.
• ‘pageIndex’ type of NSUInteger is defined to store index value of page.

Next, select ViewController.m file, there you need to below line in viewDidLoad() method.

self.deviceImage.image = [UIImage imageNamed:self.strImage];

Reason:

• simply passing image name to Image View object to display image. 

Step 8: Code for Page View Controller

Now, select PageViewController.h file & firstly import ViewController.h file and one protocol named UIPageViewControllerDataSource just next to subclass of its class then further add the following code:

@property (strong, nonatomic) ViewController *viewController;

Reason to create above property:

• We have created an instance for ViewController named ‘viewController’ class to call its class members in this class.

PageViewController.h file 

Now, select PageViewController.m file, here we need to create an array consisting apple device images to display the content in view controller, for that import that images by drag & drop into our project as mentioned in below screenshot and copy all its code in our project.

// array declaration

NSArray *devices;

// Array definition

devices = [NSArray arrayWithObjects:@"iPhone", @"iPad", @"iPod Touch", @"iMac", @"iTV", @"iWatch", @"MacBook_Pro_TouchBar", nil]; 

PageViewController.m file 

Step 9: Coding for mandatory protocol methods

Now, its time to code for protocol methods discussed above.

• viewControllerBeforeViewController
• viewControllerAfterViewController

In viewControllerBeforeViewController() method, this method is responsible for what happens when view controller moves/swipes in backward direction.

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

            NSUIntger index = ((ViewController *) viewController).pageIndex;

            if (index == 0 || index == NSNotFound) {

                    return nil;

            }

            index--;

            return [self viewControllerAtIndex: index];

}

In viewControllerAfterViewController() method, this method is responsible for what happens when view controller moves/swipes in forward direction.

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

            NSUIntger index = ((ViewController *) viewController).pageIndex;

            if (index == NSNotFound) {

                    return nil;

            }

            index++;

            if (index == devices.count) {

                    return nil;

            }

            return [self viewControllerAtIndex: index];

}

Most importantly, we need helper method wherein we access ViewController class members and pass index value to Image string variable. We also need to return this method in above protocol methods due to their return type.

// helper method

(ViewController *)viewControllerAtIndex:(NSUInteger)index

{

       ViewController *vc = [self.storyboard instantiateViewControllerWithIdentifier:@"ViewController"];

  vc.strImage = devices[index];

    vc.pageIndex = index;

return vc;

}

NOTE: To instantiate View Controller, we need to set its Storyboard ID named ‘ViewController’.

To set Storyboard ID, select the View Controller and under Identity Inspector enter name ‘ViewController’ in Storyboard ID option as mentioned in below image.

Step 10: Finally Run the Project

Now, we are Ready with our PageView project. Just Run the program & result will be seen below in simulator.

In above result, you will find the images are stretched because Image View property named Content Mode is selected as ‘Scale To Fill’, change it to ‘Aspect Fit’ to display images in its original size which look much better (make sure Image View should be selected). 

One more thing, you might notice that while swiping pages, there is Page Curl  property selected by default which show the transition like turning pages in books, this property is known as Transition Style. To change this property, select Page View Controller then select ‘Scroll’ style under Attribute Inspector as shown in image. 

Again Run the project, here is the result without stretched image.

Hope You Enjoyed!

Have Fun 😇👍🏻