How to Draw Shapes with Core Graphics

Would you like to know how to draw simple shapes directly on your iPhone app screen?

Most of the time we rely on UIKit to draw the images we use for our controls like buttons and other user controls. However, there are times when we would like to draw our own shapes or even let our users draw shapes on the screen. The technology that you use for this is called Core Graphics.

Core Graphics

Core Graphics uses the idea of a context which is like an artist’s palate where we will do our drawing. When you draw with Core Graphics you must first define a color and width for a virtual pen and then give the pen instructions to move around the screen. Once you have done this you may call function that will execute your instructions and draw the line or shape.

Here is How to Use Core Graphics

The easiest way to experiment with using Core Graphics is to add a new UIView to your XCode project and then to add the view to a view controller. All the Core Graphics code must be located in the UIView implementation file (don’t confuse this with a view controller).

In my example project I first added a new UIView called CGView and then assigned an instance of this view to my view controller’s view property. Here is the relevant code from my view controller:

#import "Draw_ShapesViewController.h"
#import "CGView.h"

@implementation Draw_ShapesViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    CGView *cgv = [[CGView alloc] initWithFrame:self.view.frame];
    self.view = cgv;
    [cgv release];
}

@end

Where to Add Drawing Code in the UIView

The easiest place to add the code the does the drawing in your UIView subclass is the drawRect method. Here is some example code I put in there that draws some lines and a rectangle. See the embedded comments for detailed explanations of what each line of code is doing:

#import "CGView.h"

@implementation CGView

- (void)drawRect:(CGRect)rect {
	//Get the CGContext from this view
	CGContextRef context = UIGraphicsGetCurrentContext();
	//Set the stroke (pen) color
	CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
	//Set the width of the pen mark
	CGContextSetLineWidth(context, 5.0);

	// Draw a line
	//Start at this point
	CGContextMoveToPoint(context, 10.0, 30.0);

	//Give instructions to the CGContext
	//(move "pen" around the screen)
	CGContextAddLineToPoint(context, 310.0, 30.0);
	CGContextAddLineToPoint(context, 310.0, 90.0);
	CGContextAddLineToPoint(context, 10.0, 90.0);

	//Draw it
	CGContextStrokePath(context);

	//Draw a rectangle
	CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
	//Define a rectangle
	CGContextAddRect(context, CGRectMake(10.0, 150.0, 60.0, 120.0));
	//Draw it
	CGContextFillPath(context);
}

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

@end

Results

When I build and run this project the output will look like this:

That is how to draw shapes – there are many other features to Core Graphics so be sure to check out the documentation on the Apple website.
m_source=blog&utm_medium=inpostad&utm_campaign=traffic” title=”Learn how to develop an iPhone app that people will buy even if you never programmed before!”>Learn How To Make Your Own iPhone, iPad iOS apps!

If you are completely new to iPhone programming and want to start to developing iPhone apps this ebook will give you everything you need to get started today. You Get the 5 Essential Things You Need to Make iPhone Apps C Procedural Programming Objective-C Object Oriented Programming Cocoa-Touch Model-View-Controller Design Pattern Architecture of Real World iPhone Apps 12 Step App Development Formula

This ebook is much different than the other books out there: it really is a *system* that includes ONLY what you need to know to make iPhone applications. Not only that, but you will get some real insight on how to make a product and how to set up your code in the best way the first time.

Plus, you will get plenty of bonuses including exclusive source code projects. For more information, head on over to the website for the ebook:

Head over to How To Make An iPhone App eBook Website website to find out how to get Matt’s eBook and the bonus source code.