Customisable UIPageControl

Customisable UIPageControl

PageControl Examples

The UIPageControl has no way of changing the colors of the dots. Kind of annoying right? Well I knocked up a simple solution to customising the look of the UIPageControl.
This class allows you to replace the dots with your own UIImages, with the following 2 properties:

@property (nonatomic, readwrite, retain) UIImage* imageNormal;
@property (nonatomic, readwrite, retain) UIImage* imageCurrent;

It works by replacing the UIImage on the UIImageView containing the original dot.
One word of warning, if Apple change the way the UIPageControl works, this code will most likely break (especially if they change the dots so they are no longer UIImageViews!). However I’d say the only reason this would happen, is if they add their own functionality in to customise the look of it, so it’s probably OK.
Here’s the full code, in all it’s glory. Feel free to use how you see fit (I’m releasing this with no restrictions). It’s not very complicated, but I figured it might be useful to someone!

#import <UIKit/UIKit.h>
 
@interface OMPageControl : UIPageControl {
  UIImage* mImageNormal;
  UIImage* mImageCurrent;
}
 
@property (nonatomic, readwrite, retain) UIImage* imageNormal;
@property (nonatomic, readwrite, retain) UIImage* imageCurrent;
 
@end

#import "OMPageControl.h"
 
@interface OMPageControl (Private)
- (void) updateDots;
@end
 
 
@implementation OMPageControl
 
@synthesize imageNormal = mImageNormal;
@synthesize imageCurrent = mImageCurrent;
 
- (void) dealloc
{
  [mImageNormal release], mImageNormal = nil;
  [mImageCurrent release], mImageCurrent = nil;
 
 [super dealloc];
}
 
 
/** override to update dots */
- (void) setCurrentPage:(NSInteger)currentPage
{
  [super setCurrentPage:currentPage];
 
  // update dot views
  [self updateDots];
}
 
/** override to update dots */
- (void) updateCurrentPageDisplay
{
  [super updateCurrentPageDisplay];
 
  // update dot views
  [self updateDots];
}
 
/** Override setImageNormal */
- (void) setImageNormal:(UIImage*)image
{
  [mImageNormal release];
  mImageNormal = [image retain];
 
  // update dot views
  [self updateDots];
}
 
/** Override setImageCurrent */
- (void) setImageCurrent:(UIImage*)image
{
  [mImageCurrent release];
  mImageCurrent = [image retain];
 
  // update dot views
  [self updateDots];
}
 
/** Override to fix when dots are directly clicked */
- (void) endTrackingWithTouch:(UITouch*)touch withEvent:(UIEvent*)event 
{
  [super endTrackingWithTouch:touch withEvent:event];
 
  [self updateDots];
}
 
#pragma mark - (Private)
 
- (void) updateDots
{
  if(mImageCurrent || mImageNormal)
  {
    // Get subviews
    NSArray* dotViews = self.subviews;
    for(int i = 0; i < dotViews.count; ++i)
    {
      UIImageView* dot = [dotViews objectAtIndex:i];
      // Set image
      dot.image = (i == self.currentPage) ? mImageCurrent : mImageNormal;
    }
  }
}
 
@end