Tutorial details

Custom PageControl | App Code for Sale | Preview

Custom PageControl | iOS Tutorial

This tutorial is based on the component Custom PageControl
Download

Overview PAGE TOP

Custom PageControl used to create and manage page controls without using the iOS API i.e, UIPageControl. A page control is a succession of dots centered in the control. Each dot corresponds to a page in the application’s document (or other data-model entity), with the blue dot indicating the currently viewed page. Here we also get familiar with the UISwipeGestureRecognizer, is a concrete subclass of  UISwipeGestureRecognizer that looks for swiping gestures in one or more directions. A swipe is a discrete gesture, and thus the associated action message is sent only once per gesture. For example we are going to use the array/group of images used for the Custom PageControl and UIGestureRecognizer.

Project Set-Up PAGE TOP

Create new project in XCode that will use ViewBased/SingleView application template and name it as ‘CustomPageControl’. Device is targeted to iPhone. Ensure that you have the Use Automatic Reference Counting option checked as shown below.

177.png
271.png
Right Click on the Supporting files and create a new folder called 'Images', Add the following dummy images as shown into the folder :

  1. Gray Icon: A round gray colored icon with 20x20px size and named it as grayicon.png

    grayicon.png

  2. Blue Icon: A round blue colored icon with 20x20px size and named it as blueicon.png

    blueicon.png

  3. Seven plane background or any images as you like to have with 320x460px size and named it as img1.png, img2.png, img3.png,..till img7.png And include that folder into project space by dragging into SupportingFiles Folder as shown below (only two sample backgrounds shown you have to include seven backgrounds or any images as you like).

img6.png
img7.png

Programming: PAGE TOP

In ViewController.h, Create following instances and methods :

@interface ViewController : UIViewController
{
    int pageNo;
    int pageNumber;
    UIButton *buttonItem;
    NSMutableArray *pageArray;
}
@property (nonatomic, strong) NSMutableArray *imageArray;
@property (nonatomic, strong) UIImageView *image;
@property (nonatomic, strong) UIButton *previousButton;

-(void)handlePagination:(id)sender;
-(void) swipeLeft;
-(void) swipeRight;
@end

Following are the description of the code above : Here pageNo and PageNumber used to hold the current pageNumber. buttonItem holds the custom page control button items. PageArray holds total number of the buttonItems. imageArray holds the images. image holds the current image on the screen. previousButton holds the reference of the Previous Button.

HandlePagination, this is called when user taps on the page control buttons. SwipeRight is called once user swipes in the right direction. SwipeLeft is called once user swipes in the left direction.

Create the macro's for the image Names in viewController.h file:

#define GRAY_ICON @"grayicon.png"
#define BLUE_ICON @"blueicon.png"

In ViewController.m, Implement the ViewDidLoad by creating the array of buttons and UISwipeGestureRecognizer as follows:

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    self.imageArray = [NSMutableArray arrayWithObjects:@"img1.png",@"img2.png",@"img3.png",@"img4.png",@"img5.png", @"img6.png", @"img7.png",nil];

    pageNo = 0;
    pageNumber = 0;
    self.image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"img1.png"]];
    self.image.frame = CGRectMake(0, 0, 320, 460);
    self.image.userInteractionEnabled = YES;
    [self.view addSubview:self.image];
    pageArray = [[NSMutableArray alloc] init];
    for(int i = 0 ; i < [self.imageArray count] ; i++)
    {
        if(i==0){
            buttonItem = [UIButton buttonWithType:UIButtonTypeCustom];
            [buttonItem setImage:[UIImage imageNamed:BLUE_ICON] forState:UIControlStateNormal];
            [buttonItem setBackgroundColor:[UIColor clearColor]];
            buttonItem.frame=CGRectMake(25+(i*25), 390, 10, 10);
            buttonItem.tag =i;
            [buttonItem addTarget:self action:@selector(handlePagination:) forControlEvents:UIControlEventTouchUpInside];
            [self.view addSubview:buttonItem];
            self.previousButton= buttonItem;
            [pageArray addObject:buttonItem];

        }else{
            buttonItem = [UIButton buttonWithType:UIButtonTypeCustom];
            [buttonItem setImage:[UIImage imageNamed:GRAY_ICON] forState:UIControlStateNormal];
            [buttonItem setBackgroundColor:[UIColor clearColor]];
            buttonItem.frame=CGRectMake(25+(i*25), 390, 10, 10);
            buttonItem.tag =i;
            [buttonItem addTarget:self action:@selector(handlePagination:) forControlEvents:UIControlEventTouchUpInside];
            [self.view addSubview:buttonItem];
            [pageArray addObject:buttonItem];
        }
    }

    UISwipeGestureRecognizer *swipeGestureLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeLeft)];
    swipeGestureLeft.numberOfTouchesRequired = 1;
    swipeGestureLeft.direction = UISwipeGestureRecognizerDirectionLeft;
    [self.image addGestureRecognizer:swipeGestureLeft];

    UISwipeGestureRecognizer *swipeGestureRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeRight)];
    swipeGestureRight.direction = UISwipeGestureRecognizerDirectionRight;
    swipeGestureRight.numberOfTouchesRequired = 1;
    [self.image addGestureRecognizer:swipeGestureRight];

}

The imageArray holds the array of images. Define both the pageNo and pageNumber to 0, then initialize and alloc the pageArray. Create the buttonItems based upon the number of images in a pageControl, and add those buttons to the pageArray as shown above. And also create the instances of the UISwipeGestureRecognizer for the swiping of the Left and Right Directions with actions as the SwipeLeft and SwipeRight. Lets implement those methods:

-(void) swipeLeft
{
    self.previousButton.tag = pageNo;
    int prePage = pageNo;

    [self.previousButton setImage:[UIImage imageNamed:GRAY_ICON] forState:UIControlStateNormal];
    [self.previousButton setBackgroundColor:[UIColor clearColor]];
    self.previousButton.frame=CGRectMake(25+(prePage*25), 390, 10, 10);

    if(pageNo<([imageArray count]-1))
    {
        pageNo = pageNo+1;
    }
    else {
        pageNo =0;
    }
    pageNumber = pageNo;
    UIButton *buton = (UIButton *) [pageArray objectAtIndex:pageNo];
    [buton setImage:[UIImage imageNamed:BLUE_ICON] forState:UIControlStateNormal];
    [buton setBackgroundColor:[UIColor clearColor]];
    buton.frame=CGRectMake(25+(pageNumber*25), 390, 10, 10);

    self.previousButton= buton;
    self.image.image = [UIImage imageNamed:[self.imageArray objectAtIndex:pageNumber]];
}

In the method SwipeLeft, we need to increment the pageNo, change the image dots as per the page change and assign the previous page to the current page.

-(void) swipeRight
{
    self.previousButton.tag = pageNo;
    int prePage = pageNo;

    [self.previousButton setImage:[UIImage imageNamed:GRAY_ICON] forState:UIControlStateNormal];
    [self.previousButton setBackgroundColor:[UIColor clearColor]];
    self.previousButton.frame=CGRectMake(25+(prePage*25), 390, 10, 10);
    if(pageNo == 0)
    {
        pageNo = ([imageArray count]-1);
    }
    else if(pageNo<=([imageArray count]-1))
    {
        pageNo = pageNo-1;
    }
    else {
        pageNo=0;
    }
    pageNumber = pageNo;
    UIButton *buton = (UIButton *)[pageArray objectAtIndex:pageNo];
    [buton setImage:[UIImage imageNamed:BLUE_ICON] forState:UIControlStateNormal];
    [buton setBackgroundColor:[UIColor clearColor]];
    buton.frame=CGRectMake(25+(pageNumber*25), 390, 10, 10);

    self.previousButton= buton;
    self.image.image = [UIImage imageNamed:[self.imageArray objectAtIndex:pageNumber]];
}

In the method SwipeRight, we need to decrement the pageNo, change the image dots as per the page change and assign the previous page to the current page.

-(void)handlePagination:(id)sender
{
    int prePage = self.previousButton.tag;

    [self.previousButton setImage:[UIImage imageNamed:GRAY_ICON] forState:UIControlStateNormal];
    [self.previousButton setBackgroundColor:[UIColor clearColor]];
    self.previousButton.frame=CGRectMake(25+(prePage*25), 390, 10, 10);
    UIButton *button;
    button = (UIButton*)sender;
    pageNumber = button.tag;
    pageNo = pageNumber;
    [button setImage:[UIImage imageNamed:BLUE_ICON] forState:UIControlStateNormal];
    [button setBackgroundColor:[UIColor clearColor]];
    button.frame=CGRectMake(25+(pageNumber*25), 390, 10, 10);

    self.previousButton= button;
    self.image.image = [UIImage imageNamed:[self.imageArray objectAtIndex:pageNumber]];
}

In the method handlePagination, we need to get the tag of the current button clicked, assign it to the PageNumber, change the image of the current button to blue and other as gray and assign the previous page to the current page.

Building and Running the Application: PAGE TOP

The final step is to build and run the application. Click on the Build and Run button located in the toolbar of the main Xcode project window. Assuming an absence of compilation errors, the application should load into the iOS Simulator environment. Now you can both swipe and click the page control to get the current photos as shown below:

339.png

428.png

540.png

659.png

783.png

835.png

946.png

3 Comments Leave a comment

Please login in order to leave a comment.

Newest first
  • engr.aamirwazir 2014-03-03 18:13:09 Thread #61

    best one

  • Extreme_Tech 2013-03-21 04:44:29 Thread #34

    How to I Center the dots?

  • yesappios 2012-12-17 16:04:08 Thread #25

    Nice Tutorial! Are you avalaible for freelancing works? Could you give me your email?

  • yesappios 2012-12-17 16:04:08

    Nice Tutorial! Are you avalaible for freelancing works? Could you give me your email?

!

Sign-in to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.