8

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.

3
  • HHPageControl
    – Hemang
    Sep 7, 2013 at 4:56
  • 2
    This is not a dupe of the other question: here we want to know how to change the dots; the linked "dupe" just wants to change the colour. My solution is appended to Aragon's below.
    – Aaron Vegh
    Mar 20, 2014 at 14:07
  • Since this "dupe" does not accept answers anymore I will comment another solution. If you just want to change the size of the dots you can use pagecontrol.transform = CGAffineTransformMakeScale(2, 2);
    – mvandillen
    Apr 5, 2017 at 13:38

2 Answers 2

21

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.

6
  • 2
    dots are UIView objects in iOS7, so need to update the code.
    – Centurion
    Oct 7, 2013 at 15:40
  • I've updated the code for Aragon's updateDots: method to support iOS 7. See my answer below.
    – Aaron Vegh
    Mar 20, 2014 at 14:04
  • Curses, answers are closed, even though I like this solution better than the one on the linked page for which this is supposedly a dupe. Simply put, a PageControl's subviews are UIViews, so I'm injecting a UIImageView into them:
    – Aaron Vegh
    Mar 20, 2014 at 14:06
  • 4
    -(void)updateDots { for (int i = 0; i < [self.subviews count]; i++) { UIView* dot = [self.subviews objectAtIndex:i]; UIImageView * newDot = [[UIImageView alloc] initWithFrame:CGRectMake(dot.frame.origin.x, dot.frame.origin.y, 14, 14)]; if (i == self.currentPage) { newDot.image = self.activeImage; } else { newDot.image = self.inactiveImage; } [dot addSubview:newDot]; } }
    – Aaron Vegh
    Mar 20, 2014 at 14:06
  • Aragon's answer combined with Aaron Vegh's comment is a working solution.
    – Randy
    May 16, 2016 at 15:52
4

There is not public API to change the images. You can take a look at this blog post, that describes a method to customize the UIPageControl.

0