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.

[**HHPageControl**](https://github.com/hemangshah/HHPageController) — Hemang, Sep 07 '13 at 04:56
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 '14 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 05 '17 at 13:38

Ahmed Hammad · Answer 1 · 2012-11-12T12:56:18.750

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.

edited Nov 12 '12 at 12:56

answered Nov 12 '12 at 12:43

Ahmed Hammad

435
4
8

2

dots are UIView objects in iOS7, so need to update the code. – Centurion Oct 07 '13 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 '14 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 '14 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 '14 at 14:06
Aragon's answer combined with Aaron Vegh's comment is a working solution. – Randy May 16 '16 at 15:52
can i have the final working solution? – user2903299 Nov 07 '21 at 18:56

score 4 · Answer 2 · edited Mar 08 '19 at 07:33

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.

edited Mar 08 '19 at 07:33

karel

5,489
46
45
50

answered Apr 20 '10 at 09:22

Laurent Etiemble

27,111
5
56
81

How to change UIPageControl dots

2 Answers2

Linked