How to build UI PageViewController by storyboard

In this blog, we will show you the basics of UIPageViewController and illustrate how to execute the controller by using Storyboard

Creating the Project

Initiate Xcode and build a new Project by using the Single View Application template. It may seem a small bit strange to choose the Single View Application template as Xcode already comes with a Page-Based Application template, which includes a fully functional app based on the UIPageViewController. Yet, this template is a small spot difficult and it will take us more time to clean-up the code of the template than to start from scratch. Pointless to say, we can better grasp the concept behind the UIPageViewController when we start from scratch.

Create a New Xcode Project

Then move on to the next screen enter PageViewDemo as the product name and set com.Webnexs in the company identifier field. Choose iPhone for the Devices option. Press next and create the project.

Creating Page View Controller in Storyboard

Then, Choose the Main.storyboard. As commonly, you should find a default view controller generated by Xcode. Leave it as it is. Haul a Page View Controller from the Object Library into the storyboard. Then contain another View Controller and set it in the same storyboard.

Page View Controller in Storyboard

In this project, the original view controller is used as the root view controller for holding the page view controller. The view controller included will be used for displaying the page content. In this blog, we refer the original view controller as the root view controller and the other view controller as page content controller.

Then, allocate a Storyboard ID for the page view controller and the page content controller. You can simply choose the controller and set the ID under Identity Inspector. Place the Storyboard ID of the page view controller as “PageViewController” and name the ID of the page content controller as “PageContentController”. Presently we’ll refer to these IDs in our code.

Assigning Storyboard ID

The transition technique of the page view controller is set as Page Curl, as a default. The page curl style is great for book apps. For walkthrough screens, we choose to use scrolling style. Hence modify the transition style to Scroll below the Attribute Inspector.

Changing Transition Style

We will scheme the user interface of page content view controller. Haul an image view and a label into the controller. You are free to modify the font type and size. But your view controller should be related to the below image.

Page Content View Controller

Include a “Start again” button and put it at the below of the screen. For the default view controller

Page View Controller with Start again button

Creating View Controller Class

Then, the next step is to build view controller class and associate it with the equivalent view controller. From the menu, Choose File -> New -> File … and choose the “Objective-C class” template. Name the class as PageContentViewController and create it a subclass of UIViewController.

New View Controller Class

Navigate to the Storyboard. Choose the page content view controller and set the custom class to PageContentViewController below the Identify Inspector.

Assigning Custom Class

Then, we build outlets for the image view and label. Switch to the Assistant Editor and ensure the PageContentViewController.h is opened. Control and haul from the image view to the PageContentViewController.h and build an IBOutlet. Situate the name as backgroundImageView for the image view. For the label, situate the name of the outlet as titleLabel.

Once changed, the PageContentViewController.h should appear like this:

#import <UIKit/UIKit.h>

 
@interface PageContentViewController : UIViewController

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

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

@end

Then, choose the root view controller and ensure the ViewController.h is opened. Build an action for the “Start again” button and name the action as “startWalkthrough”.

Once the design of user interface is completed and created all the outlets. Then go to the Execution of the view controller classes.

Executing the Page Content View Controller

It’s very simple to execute the page content view controller. First, including the following properties in PageContentViewController.h:

@property NSUInteger pageIndex;

@property NSString *titleText;

@property NSString *imageFile;

The pageIndex supplies the current page index (or page number). The view controller is considered to exhibit an image and a title. So we build two parameters for passing the title text and image file. Then, open PageContentViewController.m and modify the viewDidLoad: method:

- (void)viewDidLoad

{

    [super viewDidLoad];

 

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

    self.titleLabel.text = self.titleText;

}

Executing the Page View Controller

The class UIPageViewController is categorized as a container controller. The container controller is used to hold and handle multiple view controllers displayed in the app, as well as, controlling the way one view controller switches to another. At this point, the UIPageViewController is the container controller that lets the user go from page to page, where each page is managed by its own view controller object. The following figures describe the relationship between the page view controller and the page content view controller.

In order to create UIPageViewController work, we should accept the UIPageViewControllerDataSource protocol. The data source for a page view controller is liable for providing the content view controllers on demand. By executing the data source protocol, we tell the page view controller what to exhibit for every page.

In this case, we utilize the ViewController class as the data source for the UIPageViewController instance. Therefore it is essential to state the ViewController class as executing the UIPageViewControllerDataSource protocol.

The ViewController class is also responsible to offer the data of the page content (i.e. images and titles). Open the ViewController.h. Change the @interface declaration, include a new property to grip the UIPageViewController, as well as, properties for both images and titles:

#import <UIKit/UIKit.h>

#import "PageContentViewController.h"

 

@interface ViewController : UIViewController <UIPageViewControllerDataSource>

 

- (IBAction)startWalkthrough:(id)sender;

@property (strong, nonatomic) UIPageViewController *pageViewController;

@property (strong, nonatomic) NSArray *pageTitles;

@property (strong, nonatomic) NSArray *pageImages;

 

@end

In the ViewController.m, Start the pageTitles and pageImages in the viewDidLoad method:

- (void)viewDidLoad
{
 [super viewDidLoad];
 
 _pageTitles = @[@"Over 200 Tips and Tricks", @"Discover Hidden Features", @"Bookmark Favorite Tip", @"Free Regular Update"];
 _pageImages = @[@"page1.png", @"page2.png", @"page3.png", @"page4.png"];
}

We have formed the data model for the page content. Then, we have to execute at least two methods of the UIPageViewControllerDataSource protocol:

viewControllerAfterViewController:  offers the view controller after the present view controller. In other words, we inform the app what to show for the next screen.

viewControllerBeforeViewController: offers the view controller before the current view controller. In other words, we inform the app what to show when user switches back to the previous screen.

Including the following lines of code by the end of the ViewController.m file:

#pragma mark - Page View Controller Data Source
 
- (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];
}

The above mentioned methods are very simple. First, we find the current page index. Depending the method, we simply raises/reduces the index number and return the view controller to display. Obviously, we have to confirm if we have reached the boundaries of the pages and return nil in that case.

As you may observe, we haven’t formed the viewControllerAtIndex: method. It is a helper method that is intended to create the page content view controller on demand. It obtains in the index parameter and creates the corresponding page content controller.

Include the helper method in the ViewController.m:

- (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;
}

While creating the user interface, remember that we have set a storyboard ID for the view controllers. The ID is use as reference for building the view controller instance. To immediate a view controller in storyboard, you can utilize the instantiateViewControllerWithIdentifier: method with a specific storyboard ID.

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

To exhibit a page indicator, you have to tell iOS the number of pages (i.e. dots) to show in the page view controller and which page must be chosen at the starting. Include the following two methods at the ending of the ViewController.m file:

- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController
{
 return [self.pageTitles count];
}
 
- (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController
{
 return 0;
}

The above code is much uncomplicated. We simply define iOS that we have the total number of pages to show in the page view controller and the first page should be selected by default.

Note: You must execute both methods in order to exhibit the page indicator. Also he page viewer only works with scroll modification mode.

Initializing the UIPageViewController

The last step is to build and initialize the UIPageViewController. The viewDidLoad method is the best place to execute. Open the ViewController.m file and modify the method to:

- (void)viewDidLoad
{
 [super viewDidLoad];
 // Create the data model
 _pageTitles = @[@"Over 200 Tips and Tricks", @"Discover Hidden Features", @"Bookmark Favorite Tip", @"Free Regular Update"];
 _pageImages = @[@"page1.png", @"page2.png", @"page3.png", @"page4.png"];
 
 // 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];
 
}

Let’s distinguish what the method does. First build the PageViewController instance. Then we state the data source, in this case it is the class itself. We then build the first page content controller, include it to an array of controllers and allocate it to the page view controller for shown.

Finally, we modify the size of the page view controller and include the page controller view to the current view.

Customize the Page Indicator

When you compile and run the app, your app must run properly but you may find the page indicator absent. In fact the page indicator is there but the color of the dots is the similar as the color of the view. So let’s modify its color.

In the AppDelegate.m, include the following lines of code in the didFinishLaunchingWithOptions: method:

    UIPageControl *pageControl = [UIPageControl appearance];

    pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];

    pageControl.currentPageIndicatorTintColor = [UIColor blackColor];

    pageControl.backgroundColor = [UIColor whiteColor];

Compile and Run the App

After that we go, start the application and observe how the UIPageViewController works. You should be able to load the page view controller by using the iPhone Simulator. Seek to steal through the screen to navigate between pages.

Back to the First Page

Here one thing is absent. The “Start again” is not yet Executed. When clicked, we imagine the page view controller will scroll back to the first page. You can utilize the setViewControllers: method of the UIPageViewController to switch page. To go back to the first page of the page view controller, modify the startWalkthrough: method of ViewController.m:

- (IBAction)startWalkthrough:(id)sender {
 PageContentViewController *startingViewController = [self viewControllerAtIndex:0];
 NSArray *viewControllers = @[startingViewController];
 [self.pageViewController setViewControllers:viewControllers direction:UIPageViewControllerNavigationDirectionReverse animated:NO completion:nil];
}

Again run the app. The app will convey you back to the first page when clicking the “Start again” button.

Last Update: September 11, 2018  

September 11, 2018   157   Nandini R    Storyboard- ObjectiveC    
Total 1 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

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

Facebook
Twitter
INSTAGRAM
LinkedIn