Is there a way to change page indicator dots color

Question

I am newbie to iphone programming, I am trying to develop an app which uses page control. My view's background color is white and page controllers default one is also white, which makes page control invisible on my view so I have changed the back ground color of page control to make is visible. Now, the view appears patched and bad. Is there a way to change just the dots color for page control?

Thanks in advance

Answer 1

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];
}

Answer 2

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

Answer 3

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.