Introduction To Core Graphics For iOS Apps

Matthew Campbell, January 10, 2012

We get a lot for free when we are composing apps for the iPhone and iPad.  Stunning graphics.   Flowing animations.

But, there are times when you want to move list a little bit past the built in graphics and animations that iOS comes with.  You have some options to put your own little touch into your app: you can change the style of your app using UIAppearance Protocol, you can add custom colors and graphics to your navigation bars, tab bars, toolbars and table views and you can even draw stuff directly unto your views.

How To Draw Your Own Stuff With Core Graphics

Core Graphics is the system used by iOS to draw vector-like graphics on views. This is low level programming and expect to be doing lots of defining low level graphic entities like lines, circles and squares if you want to dip into this layer of iOS programming.

Here is a quick way to test out using core graphics:

Subclass UIView
#import <UIKit/UIKit.h>

@interface CGView : UIView {

}

@end

Override - (void)drawRect:(CGRect)rect; .

This is the UIView method responsible for drawing the view.

Add Core Graphics Code

#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, 100.0, 30.0);
        CGContextAddLineToPoint(context, 100.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);
}


@end

Add This View To A SubView

You can now add this view to a container like a view controller, the app’s window or as an embedded view on a view controller. For example, to stick the view above into your app’s window you can do this:

#import "AppDelegate.h"
#import "CGView.h" 

@implementation AppDelegate
@synthesize window;

//Use this method to add code to test out in this project.  Each
//type of code will follow the pattern set in the examples below.
- (void)applicationDidFinishLaunching:(UIApplication *)application {

        [window addSubview:[[CGView alloc] initWithFrame:window.frame]];

        // Override point for customization after application launch
        [window makeKeyAndVisible];
}

@end

Can you think of anything you might want to do with Core Graphics?