Implemented different image per index. Added support to have image for on and off state.

Classes/DDPageControl.h

@@ -24,6 +24,10 @@ DDPageControlType ;
 {
 	NSInteger numberOfPages ;
 	NSInteger currentPage ;
+    UIImageView *dotImageView;
+
+    NSMutableDictionary *onImagesPerIndexDict;
+    NSMutableDictionary *offImagesPerIndexDict;
 }
 
 // Replicate UIPageControl features
@@ -48,8 +52,14 @@ DDPageControlType ;
 @property (nonatomic,retain) UIColor *onColor ;
 @property (nonatomic,retain) UIColor *offColor ;
 
+@property (nonatomic,retain) UIImage *onImage ;
+@property (nonatomic,retain) UIImage *offImage ;
+
 @property (nonatomic) CGFloat indicatorDiameter ;
 @property (nonatomic) CGFloat indicatorSpace ;
 
+-(void)addOnImage:(UIImage*)image forIndex:(NSInteger)index; // bypass onImage for specific index
+-(void)addOffImage:(UIImage*)image forIndex:(NSInteger)index; // bypass offImage for specific index
+
 @end
 

Classes/DDPageControl.m

@@ -95,29 +95,52 @@ - (void)drawRect:(CGRect)rect
 
 		if (i == currentPage)
 		{
-			if (type == DDPageControlTypeOnFullOffFull || type == DDPageControlTypeOnFullOffEmpty)
-			{
-				CGContextSetFillColorWithColor(context, drawOnColor.CGColor) ;
-				CGContextFillEllipseInRect(context, CGRectInset(dotRect, -0.5f, -0.5f)) ;
-			}
-			else
-			{
-				CGContextSetStrokeColorWithColor(context, drawOnColor.CGColor) ;
-				CGContextStrokeEllipseInRect(context, dotRect) ;
-			}
+            if ([onImagesPerIndexDict objectForKey:[NSNumber numberWithInt:i]]) {
+                UIImage *image = [onImagesPerIndexDict objectForKey:[NSNumber numberWithInt:i]];
+                UIGraphicsBeginImageContext(image.size);
+                UIGraphicsPushContext(context);
+                [image drawInRect:CGRectInset(dotRect, (diameter - image.size.width)/2, (diameter - image.size.height)/2)];
+                UIGraphicsPopContext();
+                UIGraphicsEndImageContext();
+            }else if (self.onImage) {
+                CGContextDrawImage(context, CGRectInset(dotRect, (diameter - self.onImage.size.width)/2, (diameter - self.onImage.size.height)/2), self.onImage.CGImage);
+            }else{
+                if (type == DDPageControlTypeOnFullOffFull || type == DDPageControlTypeOnFullOffEmpty)
+                {
+                    CGContextSetFillColorWithColor(context, drawOnColor.CGColor) ;
+                    CGContextFillEllipseInRect(context, CGRectInset(dotRect, -0.5f, -0.5f)) ;
+                }
+                else
+                {
+                    CGContextSetStrokeColorWithColor(context, drawOnColor.CGColor) ;
+                    CGContextStrokeEllipseInRect(context, dotRect) ;
+                }
+            }
 		}
 		else
 		{
-			if (type == DDPageControlTypeOnEmptyOffEmpty || type == DDPageControlTypeOnFullOffEmpty)
-			{
-				CGContextSetStrokeColorWithColor(context, drawOffColor.CGColor) ;
-				CGContextStrokeEllipseInRect(context, dotRect) ;
-			}
-			else
-			{
-				CGContextSetFillColorWithColor(context, drawOffColor.CGColor) ;
-				CGContextFillEllipseInRect(context, CGRectInset(dotRect, -0.5f, -0.5f)) ;
-			}
+            if ([offImagesPerIndexDict objectForKey:[NSNumber numberWithInt:i]]) {
+                UIImage *image = [offImagesPerIndexDict objectForKey:[NSNumber numberWithInt:i]];
+
+                UIGraphicsBeginImageContext(image.size);
+                UIGraphicsPushContext(context);
+                [image drawInRect:CGRectInset(dotRect, (diameter - image.size.width)/2, (diameter - image.size.height)/2)];
+                UIGraphicsPopContext();
+                UIGraphicsEndImageContext();
+            }else if (self.offImage) {
+                CGContextDrawImage(context, CGRectInset(dotRect, (diameter - self.offImage.size.width)/2, (diameter - self.offImage.size.height)/2), self.offImage.CGImage);
+            }else{
+                if (type == DDPageControlTypeOnEmptyOffEmpty || type == DDPageControlTypeOnFullOffEmpty)
+                {
+                    CGContextSetStrokeColorWithColor(context, drawOffColor.CGColor) ;
+                    CGContextStrokeEllipseInRect(context, dotRect) ;
+                }
+                else
+                {
+                    CGContextSetFillColorWithColor(context, drawOffColor.CGColor) ;
+                    CGContextFillEllipseInRect(context, CGRectInset(dotRect, -0.5f, -0.5f)) ;
+                }
+            }
 		}
 
 		x += diameter + space ;
@@ -239,7 +262,21 @@ - (void)setBounds:(CGRect)aBounds
 	super.bounds = aBounds ;
 }
 
+#pragma mark - Images Per index Dictionaries
 
+-(void)addOnImage:(UIImage*)image forIndex:(NSInteger)index{
+    if (!onImagesPerIndexDict) {
+        onImagesPerIndexDict = [[NSMutableDictionary alloc]init];
+    }
+    [onImagesPerIndexDict setObject:image forKey:[NSNumber numberWithInt:index]];
+}
+
+-(void)addOffImage:(UIImage*)image forIndex:(NSInteger)index{
+    if (!offImagesPerIndexDict) {
+        offImagesPerIndexDict = [[NSMutableDictionary alloc]init];
+    }
+    [offImagesPerIndexDict setObject:image forKey:[NSNumber numberWithInt:index]];
+}
 
 #pragma mark -
 #pragma mark UIPageControl methods

Classes/DDPageControlViewController.m

@@ -42,6 +42,7 @@ - (void)viewDidLoad
 	[pageControl addTarget: self action: @selector(pageControlClicked:) forControlEvents: UIControlEventValueChanged] ;
 	[pageControl setDefersCurrentPageDisplay: YES] ;
 	[pageControl setType: DDPageControlTypeOnFullOffEmpty] ;
+    [pageControl setOnImage:[UIImage imageNamed:@"activeDot.png"]];
 	[pageControl setOnColor: [UIColor colorWithWhite: 0.9f alpha: 1.0f]] ;
 	[pageControl setOffColor: [UIColor colorWithWhite: 0.7f alpha: 1.0f]] ;
 	[pageControl setIndicatorDiameter: 15.0f] ;

DDPageControl.xcodeproj/project.pbxproj

@@ -15,6 +15,8 @@
 		2899E5220DE3E06400AC0155 /* DDPageControlViewController.xib in Resources */ = {isa = PBXBuildFile; fileRef = 2899E5210DE3E06400AC0155 /* DDPageControlViewController.xib */; };
 		28AD733F0D9D9553002E5188 /* MainWindow.xib in Resources */ = {isa = PBXBuildFile; fileRef = 28AD733E0D9D9553002E5188 /* MainWindow.xib */; };
 		28D7ACF80DDB3853001CB0EB /* DDPageControlViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = 28D7ACF70DDB3853001CB0EB /* DDPageControlViewController.m */; };
+		2E5B7DA2188581790099DB8F /* activeDot.png in Resources */ = {isa = PBXBuildFile; fileRef = 2E5B7DA1188581790099DB8F /* activeDot.png */; };
+		2E5B7DA4188581A20099DB8F /* activeDot@2x.png in Resources */ = {isa = PBXBuildFile; fileRef = 2E5B7DA3188581A20099DB8F /* activeDot@2x.png */; };
 		6DFFB62F12E0550E00515A0F /* DDPageControl.m in Sources */ = {isa = PBXBuildFile; fileRef = 6DFFB62E12E0550E00515A0F /* DDPageControl.m */; };
 /* End PBXBuildFile section */
 
@@ -30,6 +32,8 @@
 		28D7ACF60DDB3853001CB0EB /* DDPageControlViewController.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = DDPageControlViewController.h; sourceTree = "<group>"; };
 		28D7ACF70DDB3853001CB0EB /* DDPageControlViewController.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = DDPageControlViewController.m; sourceTree = "<group>"; };
 		29B97316FDCFA39411CA2CEA /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = main.m; sourceTree = "<group>"; };
+		2E5B7DA1188581790099DB8F /* activeDot.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = activeDot.png; sourceTree = "<group>"; };
+		2E5B7DA3188581A20099DB8F /* activeDot@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "activeDot@2x.png"; sourceTree = "<group>"; };
 		32CA4F630368D1EE00C91783 /* DDPageControl_Prefix.pch */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = DDPageControl_Prefix.pch; sourceTree = "<group>"; };
 		6DFFB62D12E0550E00515A0F /* DDPageControl.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = DDPageControl.h; sourceTree = "<group>"; };
 		6DFFB62E12E0550E00515A0F /* DDPageControl.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = DDPageControl.m; sourceTree = "<group>"; };
@@ -53,6 +57,8 @@
 		080E96DDFE201D6D7F000001 /* Classes */ = {
 			isa = PBXGroup;
 			children = (
+				2E5B7DA1188581790099DB8F /* activeDot.png */,
+				2E5B7DA3188581A20099DB8F /* activeDot@2x.png */,
 				1D3623240D0F684500981E51 /* DDPageControlAppDelegate.h */,
 				1D3623250D0F684500981E51 /* DDPageControlAppDelegate.m */,
 				28D7ACF60DDB3853001CB0EB /* DDPageControlViewController.h */,
@@ -137,6 +143,8 @@
 /* Begin PBXProject section */
 		29B97313FDCFA39411CA2CEA /* Project object */ = {
 			isa = PBXProject;
+			attributes = {
+			};
 			buildConfigurationList = C01FCF4E08A954540054247B /* Build configuration list for PBXProject "DDPageControl" */;
 			compatibilityVersion = "Xcode 3.1";
 			developmentRegion = English;
@@ -161,8 +169,10 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				2E5B7DA4188581A20099DB8F /* activeDot@2x.png in Resources */,
 				28AD733F0D9D9553002E5188 /* MainWindow.xib in Resources */,
 				2899E5220DE3E06400AC0155 /* DDPageControlViewController.xib in Resources */,
+				2E5B7DA2188581790099DB8F /* activeDot.png in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

README

@@ -9,4 +9,8 @@ There are two color properties: one for 'on' controls and one for 'off' controls
 
 You can also set the type of indicators you want as a filled circle or a simple ellipse.
 
+Also you can use an image for 'on' or/and 'off' state.
+
 Finally, the diameter of every indicator and their spacing is also customizable by setting a couple of properties.
+
+