Is there a way to change page indicator dots color

We customized the UIPageControl to use a custom image for the page indicator, I have listed the guts of the class below...

GrayPageControl.h

@interface GrayPageControl : UIPageControl
{
    UIImage* activeImage;
    UIImage* inactiveImage;
}

GrayPageControl.m

-(id) initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];

    activeImage = [[UIImage imageNamed:@"active_page_image.png"] retain];
    inactiveImage = [[UIImage imageNamed:@"inactive_page_image.png"] retain];

    return self;
}

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

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

Then in the View Controller we just use it like a normal UIPageControl

IBOutlet GrayPageControl* PageIndicator;

Edit:

In the view controller that has the GrayPageControl I have an IBAction that is linked to the GrayPageControl.ValueChanged event.

-(IBAction) pageChanged:(id)sender
{
    int page = PageIndicator.currentPage;

    // update the scroll view to the appropriate page
    CGRect frame = ImagesScroller.frame;
    frame.origin.x = frame.size.width * page;
    frame.origin.y = 0;
    [ImagesScroller scrollRectToVisible:frame animated:YES];
}

The application crashes in iOS7. I have a Solution for iOS 7:

Reason for Crash:

in iOS 7 [self.subViews objectAtIndex: i] returns UIView Instead of UIImageView and setImage is not the property of UIView and the app crashes. I solve my problem using this following code.

Check Whether the subview is UIView(for iOS7) or UIImageView(for iOS6 or earlier). And If it is UIView I am going to add UIImageView as subview on that view and voila its working and not crash..!!

-(void) updateDots
{
    for (int i = 0; i < [self.subviews count]; i++)
    {
        UIImageView * dot = [self imageViewForSubview:  [self.subviews objectAtIndex: i]];
        if (i == self.currentPage) dot.image = activeImage;
        else dot.image = inactiveImage;
    }
}
 - (UIImageView *) imageViewForSubview: (UIView *) view
{
    UIImageView * dot = nil;
    if ([view isKindOfClass: [UIView class]])
    {
        for (UIView* subview in view.subviews)
        {
            if ([subview isKindOfClass:[UIImageView class]])
            {
                dot = (UIImageView *)subview;
                break;
            }
        }
        if (dot == nil)
        {
            dot = [[UIImageView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, view.frame.size.width, view.frame.size.height)];
            [view addSubview:dot];
        }
    }
    else
    {
        dot = (UIImageView *) view;
    }

    return dot;
}

Hope this solve ur issue too for iOS7. and If Anypone find the optimal solution for that please comment. :)

Happy coding

JWD answer is the way to go. However, if all you want is to just change the color, why not do this:

This technique will only work on iOS6.0 and higher!

Select your UIPageControl go to attribute inspector. Tada.

Or alternatively you can play around with these 2 properties:

  pageIndicatorTintColor  property
  currentPageIndicatorTintColor  property

This is so simple. I read the question again to make sure I am not wrong. You really just want to change the color don't you? Then yes.

You're still stuck with that lawsy dots. Use JWD technique for the awesome dot pictures.

just one line of code fir your demand. The example set to black color.

pageControl.pageIndicatorTintColor = [UIColor blackColor];

DDPageControl is an excellent replacement. Check it out!

You can also view the archived blog post here.