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.

Answer 4

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

pageControl.pageIndicatorTintColor = [UIColor blackColor];

Answer 5

DDPageControl is an excellent replacement. Check it out!

You can also view the archived blog post here.

Answer 6

You can change the page indicator tint color and the current page indicator tint color with the following code:

pageControl.pageIndicatorTintColor = [UIColor orangeColor];
pageControl.currentPageIndicatorTintColor = [UIColor blackColor];

Answer 7

if you just want to change color of dots or customize it you can make it as recommended by JWD, but in little bit another way:

#pragma mark - LifeCycle

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

#pragma mark - Private

- (void)updateDots
{
    for (int i = 0; i < [self.subviews count]; i++) {
        UIView* dot = [self.subviews objectAtIndex:i];
        if (i == self.currentPage) {
            dot.backgroundColor = UIColorFromHEX(0x72E7DB);
            dot.layer.cornerRadius = dot.frame.size.height / 2;
        } else {
            dot.backgroundColor = UIColorFromHEX(0xFFFFFF);
            dot.layer.cornerRadius = dot.frame.size.height / 2 - 1;
            dot.layer.borderColor = UIColorFromHEX(0x72E7DB).CGColor;
            dot.layer.borderWidth = 1;
        }
    }
}

As result you will get something like

Also macros:

#define UIColorFromHEX(hexValue) [UIColor colorWithRed:((float)((hexValue & 0xFF0000) >> 16))/255.0 green:((float)((hexValue & 0xFF00) >> 8))/255.0 blue:((float)(hexValue & 0xFF))/255.0 alpha:1.0]

Answer 8

The best and most siple way to do this is to add the following lines of code in the didFinishLaunchingWithOptions method in the AppDelegate.m

UIPageControl *pageControl = [UIPageControl appearance];
pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
pageControl.currentPageIndicatorTintColor = [UIColor blackColor];
pageControl.backgroundColor = [UIColor whiteColor];

Answer 9

You might wanna have a look on this solution in another stackoverflow question.

Answer 10

Here is a related answer for using a custom image (if you're flexible and can use an image rather than altering the colors directly).

Customize dot with image of UIPageControl at index 0 of UIPageControl