;)
Custom UIPageControl – Changing the Colour of a PageControl
Posted by Steven Preston in How-to, iOS
iOS’s standard UIPageControl has a fixed colour and style and is barely customisable – as a result it doesn’t show up on lighter backgrounds which can be a nuisance! Methods exist to extend the UIPageControl to handle custom styles and colours but there is some speculation whether this is frowned upon by Apple or whether future OS versions might break this kind of implementation. Here’s an alternative approach that creates a UIPageControl from scratch. It currently only handles different colours but can easily be updated to handle different size or shape dots and variable spacing. First the header file:
// CobiPageControl.h
// Created by Steve Preston on 2010/10/27.
#import <UIKit/UIKit.h>
#define COBIPAGECONTROL_HEIGHT 20
#define DOT_WIDTH 6
#define DOT_SPACING 10
@interface CobiPageControl : UIView {
int numberOfPages;
int currentPage;
UIColor* selectedColor;
UIColor* deselectedColor;
}
@property (assign) int numberOfPages;
@property (assign) int currentPage;
@property (nonatomic, retain) UIColor* selectedColor;
@property (nonatomic, retain) UIColor* deselectedColor;
@end
And the class file:
// CobiPageControl.m
// Created by Steve Preston on 2010/10/27.
#import "CobiPageControl.h"
@implementation CobiPageControl
- (void)dealloc {
[selectedColor release];
[deselectedColor release];
[super dealloc];
}
-(id)initWithCoder:(NSCoder *)aDecoder {
if ((self = [super initWithCoder:aDecoder])) {
self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, self.frame.size.width, COBIPAGECONTROL_HEIGHT);
self.backgroundColor = [UIColor clearColor];
self.selectedColor = [UIColor lightGrayColor];
self.deselectedColor = [UIColor blackColor];
}
return self;
}
- (id)initWithFrame:(CGRect)frame {
if ((self = [super initWithFrame:frame])) {
self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, self.frame.size.width, COBIPAGECONTROL_HEIGHT);
self.backgroundColor = [UIColor clearColor];
self.selectedColor = [UIColor grayColor];
self.deselectedColor = [UIColor blackColor];
}
return self;
}
-(void) setNumberOfPages: (int) number
{
numberOfPages = MAX(number, 0);
currentPage = 0;
CGPoint tempCenter = self.center;
self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y,
4 + numberOfPages * DOT_WIDTH + MAX(numberOfPages - 1, 0) * DOT_SPACING, self.frame.size.height);
self.center = tempCenter;
[self setNeedsDisplay];
}
-(int) numberOfPages
{
return numberOfPages;
}
-(void) setCurrentPage: (int) index
{
if (index >= numberOfPages)
currentPage = 0;
else
currentPage = MAX(0, index);
[self setNeedsDisplay];
}
-(int) currentPage
{
return currentPage;
}
-(void) setSelectedColor: (UIColor*) color
{
[selectedColor release];
selectedColor = [color retain];
[self setNeedsDisplay];
}
-(UIColor*) selectedColor
{
return selectedColor;
}
-(void) setDeselectedColor: (UIColor*) color
{
[deselectedColor release];
deselectedColor = [color retain];
[self setNeedsDisplay];
}
-(UIColor*) deselectedColor
{
return deselectedColor;
}
- (void)drawRect:(CGRect)rect {
for (int i = 0; i < numberOfPages; i++) {
CGContextRef contextRef = UIGraphicsGetCurrentContext();
if (i == currentPage)
CGContextSetFillColorWithColor(contextRef, selectedColor.CGColor);
else
CGContextSetFillColorWithColor(contextRef, deselectedColor.CGColor);
CGContextFillEllipseInRect(contextRef, CGRectMake(2 + DOT_WIDTH * i + DOT_SPACING * i,
(COBIPAGECONTROL_HEIGHT - DOT_WIDTH) / 2, DOT_WIDTH, DOT_WIDTH));
}
}
@end
