Drawing Circles with UITouch

This tutorial shows how to draw circle with the Core Graphics Framework. The circles will be drawn in different sizes every time the user  taps the screen. This tutorial is made with Xcode 4.4 and uses the iOS 5 target.

Update: Oct 13, 2014. The rewritten version in Swift for iOS 8 and Xcode 6 is available here.

Let's start. Create a new Project. Select Single View Application.

Fill in the following Project Settings.

Create a New File. Select Objective-C Class. Call the class iOSCircle with a subclass of NSObject. This class will contain the circle characteristics.

Add the following properties to iOSCircle.h. circleCenter will be the touch point on the screen and the radius will be a random number.

@interface iOSCircle : NSObject

@property (nonatomic) CGPoint circleCenter;
@property (nonatomic) float circleRadius;


Synthesize these properties in iOSCircle.m

@implementation iOSCircle

@synthesize circleCenter,circleRadius;


Create a New File. Select Objective-C Class. Call the class iOSCircleView with a subclass of UIView. This class will contain the View the circles will be drawn on.

Connect this view through the loadView method in iOSViewController.m

#import "iOSCircleView.h"

- (void)loadView
// Create a view CGRect frame = [UIScreen mainScreen].bounds;
iOSCircleView *v = [[iOSCircleView alloc] initWithFrame:frame];
self.view = v;

Create an ivar and a method declaration in iOSCircleView.h. The NSMutableArray will contain all iOSCircle objects which will be drawn and the drawCircle method will draw the circle using Core Graphics

@interface iOSCircleView : UIView 
NSMutableArray *totalCircles;

- (void)drawCircle;


initWithFrame is the designated initializer of a View so here we initialize the Array and we set the background color of the view.

- (id)initWithFrame:(CGRect)frame 
self = [super initWithFrame:frame];
if (self)
// Initialization code
totalCircles = [[NSMutableArray alloc] init];

// Set background color
self.backgroundColor = [UIColor whiteColor];

return self;

Override drawRect by calling the drawCircle method


- (void)drawRect:(CGRect)rect 
[self drawCircle];

Implement the drawCircle method


- (void)drawCircle 
// Get the Graphics Context
CGContextRef context = UIGraphicsGetCurrentContext();

// Set the circle outerline-width
CGContextSetLineWidth(context, 10.0);

// Set the circle outerline-colour
[[UIColor redColor] set];

// Loop through the circles and Draw these Circles to the view
for (iOSCircle *circle in totalCircles)
// Create Circle
CGContextAddArc(context, circle.circleCenter.x, circle.circleCenter.y, circle.circleRadius, 0.0, M_PI * 2.0, YES);

// Draw

We use two Constants to determine the minimum and maximum radius of a circle at the top of iOSCircleView.m

#define MINRADIUS 10

#define MAXRADIUS 30

To respond to a touch, you need to override the touchesBegan:withEvent method in iOSCircleView.m.

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 
// loop through the touches
for (UITouch *touch in touches)
{ // Get location of Touch
CGPoint location = [touch locationInView:self];

// Create a new iOSCircle Object
iOSCircle *newCircle = [[iOSCircle alloc] init];

// Set the Center of the Circle
newCircle.circleCenter = location;

// Set a random Circle Radius
newCircle.circleRadius = MINRADIUS + (arc4random() % MAXRADIUS);

// Add the Circle Object to the Array
[totalCircles addObject:newCircle];

// update the view
[self setNeedsDisplay];

Build and Run the Application. Touch the screen to draw the circles.

You can download the source code of DrawingCirclesWithUITouch at the ioscreator repository on github.