Sunday, 10 May 2015

UIPageViewController Tutorial IOS (objective C)


UIPageControl in IOS is a control that is used mostly in help screens or info screens for IOS apps. In this we are going to create a small tutorial for UIPageControl, in which we will change background color of UIImageView as per page number selected by user on tapping on UIPageControl or swiping UIScrollView. UIScrollView is used with UIPageControl as the page control itself is set of dots and does not has display interface.

Check swift version of this tutorial: Learn how to create UIPageControl in swift


So let us dive in to UIPageControl Tutorial.

Create a singleView application, and name it UIPageControlDemo. After creating the project Xcode will display you below shown screen


Main Interface after creating project in Xcode
Main Interface after creating project in Xcode


Now, click on Main.storyboard and select View Controller. Drag UIPageControl and UIScrollView to view.


Drag UIPageControl and UIScrollView to view
Drag UIPageControl and UIScrollView to view

Now open ViewController.h and create IBOutlets for UIPageControl and UIScrollView and an IBAction changePage that we are going to assign to UIPageControl ValueChanged event so that we can detect that user has taped on UIPageControl.



Open Main.storyboard and connect IBOutlets and IBAction to UIScrollView and UIPageControl

Connecting UIScrollView With IBOutlet
Connecting UIScrollView With IBOutlet



Connecting UIPageControl valueChanged event With IBAction
Connecting UIPageControl valueChanged event With IBAction
 
Setting IBAction to UIPageControl ValueChanged Event
Setting IBAction to UIPageControl ValueChanged Event

UIPageControl has properties to set minimum number of pages you want in your UIPageControl and which page do you want to set as current page. We will stick with default values for this tutorial.

Set minimum pages and current page for UIPageControl
Set minimum pages and current page for UIPageControl
Open ViewController.m, as we have to implement our IBAction definition here

Inside viewDidLoad method, we will add UIImageView to our scroll and assign its delegate to self.
We will set contentSize of scroll to number of pages we want in UIPageControl multiplied by width of UIScrollView.

Then, we add three UIImageView to our scroll and set different background color to it.



Note: SCROLLWIDTH is width of our UIScrollView.

 In our changePage action, we will use scrollRectToVisible  method of UIScrollView so that we can scroll our UIScrollView as per user tap on UIPageControl.



Lastly. we ned to implement scrollViewDidEndDecelerating delegate of UIScrollView so that we can calculate page number if user did not use UIPageControl and simple scroll down UIScrollView.



In setIndicatorForCurrentPage, we will calculate page by diving x offset of UIScrollView with its width and the assign that page to our pageControl as its current or selected page.

Source Code:  To Download Click

You can check swift version of UIPageControl from here Learn UIPageControl in swift

No comments:
Write comments