PageControl Example in iPhone

A Page control presents the user with a set of horizontal dots representing pages. The current page is presented as a white dot. The user can go from the current page to the next or to the previous page.

Step 1: Create a Window-base application using template. Give the name of the application PageControlExample.

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: We will create  UIScrollView for the scrollView,UIPageControl for the pageControl and also declear viewControllers. So we have to declear in the PageControlExampleAppDelegate.h file. Make the following changes in the header file.

#import <uikit/UIKit.h>
@interface PageControlExampleAppDelegate : NSObject  {
UIWindow *window;
IBOutlet UIScrollView *scrollView;
IBOutlet UIPageControl *pageControl;
NSMutableArray *viewControllers;
BOOL pageControlUsed;

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) UIScrollView *scrollView;
@property (nonatomic, retain) UIPageControl *pageControl;
@property (nonatomic, retain) NSMutableArray *viewControllers;

- (IBAction)changePage:(id)sender;

Step 4: Open the MainWindow.xib file in the Interface Builder. First, drag scroll View from the library and place it to the window. Connect File’s Owner icon to the UIScrollView and select ScrollView. Drag Page Control from the library and place below of the UIScrollView. Now connect File’s Owner to the Page Controll and select Page Control. Save your .xib file and go back to the Xcode.

Step 5: Now we are adding viewcontroller class in the project. Select classes -> Add -> NewFile ->UIViewControllersubclass , save it , give the name PageControlExampleViewController.m,make sure that, it creates .h file also. Create a .xib file and give the name PageControllerExample.

Step 6: In the ViewController header file , we’ll create UILabel for display the page number, and mention one method. Make the following changes in the PageControlExampleViewController.h file.

#import <uikit/UIKit.h>
@interface PageControlExampleViewControl : UIViewController {
IBOutlet UILabel *pageNumberLabel;
int pageNumber;
@property (nonatomic, retain) UILabel *pageNumberLabel;
- (id)initWithPageNumber:(int)page;

Step 7: Now double click your PageControlExample.xib file and open it to the Interface Builder. Drag label from the library and place it on the View Window. Double click it and change the name into “1”. Now Connect the File’s Owner icon to the label and select ¬†pageNumberLabel. Save it and go back to the Xcode.

Step 8: Make the following changes in the PageControlExampleAppDelegate.m file.

- (void)applicationDidFinishLaunching:(UIApplication *)application {
    NSMutableArray *controllers = [[NSMutableArray alloc] init];
    for (unsigned i = 0; i < kNumberOfPages; i++) {
        [controllers addObject:[NSNull null]];
    self.viewControllers = controllers;
    [controllers release];

    scrollView.pagingEnabled = YES;
    scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * kNumberOfPages, scrollView.frame.size.height);
    scrollView.showsHorizontalScrollIndicator = NO;
    scrollView.showsVerticalScrollIndicator = NO;
    scrollView.scrollsToTop = NO;
    scrollView.delegate = self;

    pageControl.numberOfPages = kNumberOfPages;
    pageControl.currentPage = 0;

    [self loadScrollViewWithPage:0];
    [self loadScrollViewWithPage:1];

- (void)loadScrollViewWithPage:(int)page {
    if (page < 0) return;
    if (page >= kNumberOfPages) return;

    PageControlExampleViewControl *controller = [viewControllers objectAtIndex:page];
    if ((NSNull *)controller == [NSNull null]) {
        controller = [[PageControlExampleViewControl alloc] initWithPageNumber:page];
        [viewControllers replaceObjectAtIndex:page withObject:controller];
        [controller release];

    if (nil == controller.view.superview) {
        CGRect frame = scrollView.frame;
        frame.origin.x = frame.size.width * page;
        frame.origin.y = 0;
        controller.view.frame = frame;
        [scrollView addSubview:controller.view];

- (void)scrollViewDidScroll:(UIScrollView *)sender {
  if (pageControlUsed) {
    CGFloat pageWidth = scrollView.frame.size.width;
    int page = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
    pageControl.currentPage = page;

    [self loadScrollViewWithPage:page - 1];
    [self loadScrollViewWithPage:page];
    [self loadScrollViewWithPage:page + 1];

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    pageControlUsed = NO;
- (IBAction)changePage:(id)sender {
    int page = pageControl.currentPage;
    [self loadScrollViewWithPage:page - 1];
    [self loadScrollViewWithPage:page];
    [self loadScrollViewWithPage:page + 1];
    CGRect frame = scrollView.frame;
    frame.origin.x = frame.size.width * page;
    frame.origin.y = 0;
    [scrollView scrollRectToVisible:frame animated:YES];
    pageControlUsed = YES;

Step 9: In the PageControlExampleViewController.m file make the following changes.

+ (UIColor *)pageControlColorWithIndex:(NSUInteger)index {
    if (__pageControlColorList == nil) {
        __pageControlColorList = [[NSArray alloc] initWithObjects:[UIColor grayColor], [UIColor greenColor], [UIColor magentaColor],
                                  [UIColor blueColor], [UIColor orangeColor], [UIColor brownColor], [UIColor redColor], nil];
    return [__pageControlColorList objectAtIndex:index % [__pageControlColorList count]];

- (id)initWithPageNumber:(int)page {
  if (self = [super initWithNibName:@"PageControlExample" bundle:nil])    {
       pageNumber = page;
    return self;

- (void)dealloc {
  [pageNumberLabel release];
  [super dealloc];

- (void)viewDidLoad {
  pageNumberLabel.text = [NSString stringWithFormat:@"Page %d", pageNumber + 1];
  self.view.backgroundColor = [PageControlExampleViewControl pageControlColorWithIndex:pageNumber];

Step 10: Now compile and run the application in the simulator.

You can downloaded SourceCode from here PageControlExample

  • Rick
  • February 26, 2010
  • iOS

About the Author