How to change UIPageControl dots

Question

I've seen apps (e.g. meebo) that have different indicators on UIPageControls instead of the default white circles.

is there an easy way to do this? I've read the docs for UIPageControls and it seems that there is no methods to replace the images.

Answer 1

You can achieve this by making the following steps:

1- Create a custom class that inherits from UIPageControl.

2- Assign this class to the required UIPageControl that you want to change its dots.

3- Put the following code inside your custom UIPageControl class.

Put this in the customClass.m file:

-(id)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if(self)
    {
        activeImage = [UIImage imageNamed:@"active_dot.png"];
        inactiveImage = [UIImage imageNamed:@"inactive_dot.png"];
    }
    return self;
}

-(void)updateDots
{
    for (int i = 0; i < [self.subviews count]; i++)
    {
        UIImageView* dot = [self.subviews objectAtIndex:i];
        dot.frame = CGRectMake(dot.frame.origin.x, dot.frame.origin.y, 14, 14.5);
        if (i == self.currentPage)
            dot.image = activeImage;
        else
            dot.image = inactiveImage;
    }
}

-(void)setCurrentPage:(NSInteger)page
{
    [super setCurrentPage:page];
    [self updateDots];
}

Put this in the customClass.h file

{
    UIImage* activeImage;
    UIImage* inactiveImage;
}
@property(nonatomic, retain) UIImage* activeImage;
@property(nonatomic, retain) UIImage* inactiveImage;

5- Just set the current page of your UIPageControl in the class that you put the page control inside it using the following line:

[self.pageControl setCurrentPage:number];

remember to set the current page in the viewDidLoad() method in the view of that UIPageControl is inside it.

When the view loaded the UIPageControl images will be set.