Custom UIPageControl view, replacing dots with “Page X of Y”

Question

I\'m trying to find a way to replace the dots of a UIPageControl with a caption that reads \"Page X of Y\" since I\'ll likely have >50 items. I\'m just becoming familiar with Co

Answer 1

EDIT:

This answer has received several upvotes. Thank you but for all who come here please realize that the UIPageControl is very easy to implement yourself! More to the point, take a look at my response and sample code below for some ideas but you really shouldn't use it in production code. Roll your own subclass of UIControl if you need to modify the look & feel of a UIPageControl.

---

ORIGINAL ANSWER:

The UIPageControl isn't doing anything fancy. For most views the view itself either does all its drawing in drawRect: or it adds subviews and those draw themselves. By overriding drawRect: and not calling [super drawRect:] you ensure that if the implementation is drawRect:-based you'll have your own drawing code called. In the case of UIPageControl, it relies on subviews that have been added to UIPageControl. You don't really need to know what kind though nor should you care. It's Apple's implementation and it's subject to change.

But because you know it has to be either drawRect: or subview-based, you can get away with simply removing the subviews of the UIPageControl and then your drawRect: override will work as you'd expect (mostly, you have to do a little bit of extra work to make sure you redraw at the right times).

Here's an example that shows how to make your own custom UIPageControl. The astute reader will notice that once you've gone to the trouble to do it this way you might as well have just created your own page control as a subclass of UIControl and simply implemented the UIPageControl API.

//
//  RedGreyPageControl.m
//

@interface RedGreyPageControl : UIPageControl {
    NSArray                     *originalSubviews;
}

@end


@implementation RedGreyPageControl


// This assumes you're creating the control from a nib.  Depending on your
// usage you might do this step in initWithFrame:
- (void) awakeFromNib {
    // retain original subviews in case apple's implementation
    // relies on the retain count being maintained by the view's
    // presence in its superview.
    originalSubviews = [[NSArray alloc] initWithArray: self.subviews];

    for ( UIView *view in self.subviews ) [view removeFromSuperview];

    // make sure the view is redrawn not scaled when the device is rotated
    self.contentMode = UIViewContentModeRedraw;
}


- (void) dealloc {
    [originalSubviews release];
    [super dealloc];
}


- (void) drawRect:(CGRect) iRect {
    UIImage                 *grey, *image, *red;
    int                     i;
    CGRect                  rect;

    const CGFloat           kSpacing = 10.0;

    iRect = self.bounds;

    if ( self.opaque ) {
        [self.backgroundColor set];
        UIRectFill( iRect );
    }

    if ( self.hidesForSinglePage && self.numberOfPages == 1 ) return;

    red = [UIImage imageNamed: @"circle_graphic_red.png"];
    grey = [UIImage imageNamed: @"circle_graphic_grey.png"];

    rect.size.height = red.size.height;
    rect.size.width = self.numberOfPages * red.size.width + ( self.numberOfPages - 1 ) * kSpacing;
    rect.origin.x = floorf( ( iRect.size.width - rect.size.width ) / 2.0 );
    rect.origin.y = floorf( ( iRect.size.height - rect.size.height ) / 2.0 );
    rect.size.width = red.size.width;

    for ( i = 0; i < self.numberOfPages; ++i ) {
        image = i == self.currentPage ? red : grey;

        [image drawInRect: rect];

        rect.origin.x += red.size.width + kSpacing;
    }
}


// you must override the setCurrentPage: and setNumberOfPages:
// methods to ensure that your control is redrawn when its values change
- (void) setCurrentPage:(NSInteger) iPage {
    [super setCurrentPage: iPage];
    [self setNeedsDisplay];
}


- (void) setNumberOfPages:(NSInteger) iPages {
    [super setNumberOfPages: iPages];
    [self setNeedsDisplay];
}


@end