articles

Home / DeveloperSection / Articles / Creating PageViewController Sample using Storyboard

Creating PageViewController Sample using Storyboard

Tarun Kumar4296 05-Nov-2015

Previous example on UIPageViewController sample in iOS

 

In our previous article we already learn to create app using UIPageViewController, but previously we use different storyboard for each view controller's.

Here we will create same sample like before but here we use main Storyboard for all the view controller's and adding some extra line of code in our app. I will show you how to build a similar type of walk through screens by using UIPageViewController. In this app I will add UITableViewController, UISearchBar for displaying country list and also giving facility to search specific country from the country list. Ok, I will give you some brief introduction, UIPageViewController class was first introduced in iOS 5 SDK that helps to build pages of contents , and each page manage its own view controller. With the help of page view, users can easily navigate between multiple pages through simple gesture.

 

Ok, for creating page view sample follow the steps:


1.    Open Xcode and goto File > New > Project > select 'Single View Application' and click on Next button;

2.    Next, in Product Name field enter 'PageViewDemo', select iPhone device from options, and click on Next button and click on Create button;

3.    Now, in Project Navigator select Main.storyboard, drag a UIPageViewController from the ObjectLibrary into the storyboard. Then add another ViewController on the same storyboard;

4.    Now, select page view controller and set Storyboard ID as PageViewController, select newly added view controller and set Storyboard ID as PageContentViewController, from Identity Inspector; change the transition style to Scroll of page view controller from attribute inspector.


Creating PageViewController Sample using Storyboard 


5.    Select original view controller, press ctrl and drag a UIButton on the bottom of the view (from ObjectLibrary) and set the navigation controller (select original view controller and goto Editor > Embed in > select Navigation Controller); look like this:

Creating PageViewController Sample using Storyboard


6.    Add 5 images in the Project Navigator.


Creating PageViewController Sample using Storyboard


7.    select newly added view controller, press ctrl and drag UIView on the middle of the view and on this UIView controller drag a UILabel and UIImageView (from ObjectLibrary), after that it will look like this:


Creating PageViewController Sample using Storyboard

8.    Next, create a view controller class and associate it with the corresponding view controller (select File > New > File > select Objective C class and click on Next > name the class as 'PageContentViewController' and make it a sub-class of UIViewController. 


9.    Now, select assistant editor, two view will be open, in first view open PageContentViewController.h file and in the other view open pagecontentviewcontroller view on the storyboard, create outlets for the UILabel as 'titleLabel' and UIImageView as 'backgroundImageView' and create three @properties. And implement the properties in the implementation file; PageContentViewController.h file will look like this:


@property (weak, nonatomic) IBOutlet UIImageView *backgroundImageView;
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
@property NSUInteger pageIndex;
@property NSString *titleText;
@property NSString *imageFile;


10. now, add code in the viewDidLoad method of PageContentViewController.m file.  


self.view.backgroundColor = [UIColor colorWithPatternImage:
    [UIImage imageNamed:@"img3.jpg"]];
self.backgroundImageView.image = [UIImage imageNamed:self.imageFile];
self.titleLabel.text = self.titleText;

11. Now, select ViewController.h file and implement UIPageViewControllerDataSource in the ViewController interface. The data source for a pageViewController is responsible for providing contents to view controller as on demand. It is responsible for telling the page view controller what to display for each page. (implement like this) 

@interface ViewController : UIViewController<UIPageViewControllerDataSource>


12. now, initialize the 'pageTitles', 'pageImages' in the viewDidLoad method in ViewController.h file. Like this: 


_pageTitles = @[@"img1", @"img2", @"img3", @"img4", @"img5"]; 
_pageImages = @[@"img1.jpg", @"img2.jpg", @"img3.jpg", @"img4.jpg",
                           @"img5.jpg"];


13. now, we have to implement two methods of UIPageViewControllerDataSource protocol:

viewControllerAfterViewController- it provides data to be display in the next screen.

viewControllerBeforeViewController- it provides data to be display in the previous screen.  


- (UIViewController *)pageViewController:
                                 (UIPageViewController *)pageViewController
                                  viewControllerBeforeViewController:
                                 (UIViewController *)viewController
{ ... }
- (UIViewController *)pageViewController:
                                 (UIPageViewController *)pageViewController
                                  viewControllerAfterViewController:
                                 (UIViewController *)viewController

{ ... }


14. above both methods using viewControllerAtIndex: method, it is a helper method designed to provide the content to be display in the current page index.   


- (PageContentViewController *)viewControllerAtIndex:(NSUInteger)index
{ ... }

 

To instantiate a view controller in storyboard, use this line of code: 


instantiateViewControllerWithIdentifier:@"PageContentViewController"];


15. implement two more methods in the ViewController.h file, presentationCountForPageViewController: it returns the number of items to be reflected in the page indicator.

presentationIndexForPageViewController: it returns the index of the selected item to be reflected in the page indicator.  

Here we are providing Complete source code for more help: 
ViewController.h file


#import <UIKit/UIKit.h>

#import "PageContentViewController.h"

 

@interface ViewController : UIViewController<UIPageViewControllerDataSource>

 

@property (strong, nonatomic) UIPageViewController *pageViewController;

 

@property (strong, nonatomic) NSArray *pageTitles;

@property (strong, nonatomic) NSArray *pageImages;

 

@end

 

ViewController.m file


#import "ViewController.h"

 

@interface ViewController ()

@end

 

@implementation ViewController

 

- (void)viewDidLoad

{

[super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

 

_pageTitles = @[@"img1", @"img2", @"img3", @"img4", @"img5"];

_pageImages = @[@"img1.jpg", @"img2.jpg", @"img3.jpg", @"img4.jpg", @"img5.jpg"];

 

// Create page view controller

self.pageViewController = [self.storyboard instantiateViewControllerWithIdentifier:

@"PageViewController"];

self.pageViewController.dataSource = self;

PageContentViewController *startingViewController = [self viewControllerAtIndex:0];

NSArray *viewControllers = @[startingViewController];

[self.pageViewController setViewControllers:viewControllers direction:

UIPageViewControllerNavigationDirectionForward

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.height - 30);

 

[self addChildViewController:_pageViewController];

[self.view addSubview:_pageViewController.view];

[self.pageViewController didMoveToParentViewController:self];

}

 

-(void)viewWillAppear:(BOOL)animated{

[super viewWillAppear:YES];

self.navigationController.navigationBar.hidden=YES;

}

 

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

{

NSUInteger index = ((PageContentViewController*) viewController).pageIndex;

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

return nil;

}

index--;

return [self viewControllerAtIndex:index];

}

 

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

{

NSUInteger index = ((PageContentViewController*) viewController).pageIndex;

if (index == NSNotFound) {

return nil;

}

index++;

if (index == [self.pageTitles count]) {

return nil;

}

return [self viewControllerAtIndex:index];

}

 

- (PageContentViewController *)viewControllerAtIndex:(NSUInteger)index

{

if (([self.pageTitles count] == 0) || (index >= [self.pageTitles count])) {

return nil;

}

 

// Create a new view controller and pass suitable data.

PageContentViewController *pageContentViewController =[self.storyboard instantiateViewControllerWithIdentifier:@"PageContentViewController"];

pageContentViewController.imageFile = self.pageImages[index];

pageContentViewController.titleText = self.pageTitles[index];

pageContentViewController.pageIndex = index;

return pageContentViewController;

}

 

- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController

{

return [self.pageTitles count];

}

 

- (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController

{

return 0;

}

 

- (void)didReceiveMemoryWarning

{

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

 

- (IBAction)startWalkThrough:(id)sender

{ ... }

@end

 

PageContentViewController.h file


#import <UIKit/UIKit.h>

 

@interface PageContentViewController : UIViewController

 

@property (weak, nonatomic) IBOutlet UIImageView *backgroundImageView;

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

 

@property NSUInteger pageIndex;

@property NSString *titleText;

@property NSString *imageFile;

 

@end

 

PageContentViewController.m file

 

#import "PageContentViewController.h"

 

@interface PageContentViewController ()

@end

 

@implementation PageContentViewController

 

- (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.

 

self.view.backgroundColor = [UIColor colorWithPatternImage:

[UIImage imageNamed:@"img3.jpg"]];

self.backgroundImageView.image = [UIImage imageNamed:self.imageFile];

self.titleLabel.text = self.titleText;

} 

 

- (void)didReceiveMemoryWarning

{

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

 

@end

 

Now when you Run the app it will look like this, you can navigate through first page to last page and also reverse: (in the next article we will do some more interesting things with our sample)


Creating PageViewController Sample using Storyboard ... Creating PageViewController Sample using Storyboard

 


Updated 07-Sep-2019

Leave Comment

Comments

Liked By