In this blog, we will show you the basics of UI PageViewController and illustrate how to execute the controller by using Storyboard in iOS.
Get build your pixel perfect iOS application for your business, click here and get started!!!
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.
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 UI Page View Controller using Storyboard IN IOS
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 UI by the 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 to the original view controller as the root view controller and the other view controller as the 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.
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 the scrolling style. Hence modify the transition style to Scroll below the Attribute Inspector.
We will scheme the user interface of the 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.
Get build your pixel perfect iOS application for your business, click here and get started!!!
Include a “Start again” button and put it below the screen. For the default view controller
Creating View Controller Class
Then, the next step is to build a 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.
Navigate to the next UI in the same Storyboard. Choose the page content view controller and set the custom class to PageContentViewController below the Identify Inspector.
Then, we build outlets for the image view and label. Switch to the Assistant Editor and ensure the PageContentViewController.his opened. Control and haul from the image view to the PageContentViewController.hand-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 action for the “Start again” button and name the action as “startWalkthrough”.
Once the design of the 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 UI Page View Controller
The class UI PageViewController is categorized as a container controller in Storyboard. 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.
Get build your pixel perfect iOS application for your business, click here and get started!!!
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 the 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 on the method, we simply raise/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 used as a reference for building the view controller instance. To immediate a view controller in the 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 in 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 similar to 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 UI PageViewController to switch page in the storyboard. To go back to the first page of the page view controller, modify the start walkthrough: 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.
Click here and get your free iOS development-related consultation today!!!
Leave a Reply