Outer Level


Code Example: Drawing the iPhone Back Button

Recently, I had need to provide a back button similar to the one used in Mobile Safari for a consulting project.

Many of the buttons used in the built-in iPhone applications are made available via the SDK with built in button types and graphics. Unfortunately, the back button is not one of these.

Because I needed to display the toolbar button from inside a static library which can not include images, I had to render the back arrow directly in code.

Since this was a bit time consuming, I thought I would share in hopes that it saves someone else a little bit of time.

- (CGContextRef)createContext
{
   // create the bitmap context
   CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
   CGContextRef context = CGBitmapContextCreate(nil,27,27,8,0,
                            colorSpace,kCGImageAlphaPremultipliedLast);
   CFRelease(colorSpace);
   return context;
}

- (CGImageRef)createBackArrowImageRef
{
   CGContextRef context = [self createContext];
	
   // set the fill color
   CGColorRef fillColor = [[UIColor blackColor] CGColor];
   CGContextSetFillColor(context, CGColorGetComponents(fillColor));
	
   CGContextBeginPath(context);
   CGContextMoveToPoint(context, 8.0f, 13.0f);	
   CGContextAddLineToPoint(context, 24.0f, 4.0f);
   CGContextAddLineToPoint(context, 24.0f, 22.0f);
   CGContextClosePath(context);
   CGContextFillPath(context);
	
   // convert the context into a CGImageRef
   CGImageRef image = CGBitmapContextCreateImage(context);
   CGContextRelease(context);
	
   return image;
}

- (UIBarButtonItem *)backButton
{
   CGImageRef theCGImage = [self createBackArrowImageRef];
   UIImage *backImage = [[UIImage alloc] initWithCGImage:theCGImage];
   CGImageRelease(theCGImage);
	
   UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:backImage
                                        style:UIBarButtonItemStylePlain 
                                        target:self.webView 
                                        action:@selector(goBack)];
   
   [backImage release], backImage = nil;
	
   return [backButton autorelease];
}

One Response to “Code Example: Drawing the iPhone Back Button”

  1. Joe Says:

    Nice! This works beautifully. Only one bit of feedback: You may need to use “new” instead of “create” in those first two method names, as they both return objects that aren’t autoreleased. Otherwise, the static analyzer will raise the proverbial red flag.