Say you want to draw a cool looking navigation bar, say with a slightly transparent pattern that is overlaying the default look of the nav bar, here’s how to do it.

Firstly, create a subclass of UINavigationBar:

#import "MyNavBar.h"
#import "QuartzCore/QuartzCore.h"

@implementation MyNavBar

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    UIImage *img    = [UIImage imageNamed:@"MyTextureFile"];
    CGContextSetAlpha(UIGraphicsGetCurrentContext(), 0.05);
    [img drawAsPatternInRect:CGRectMake(0, 0,
        self.frame.size.width, self.frame.size.height)];
    CGContextSetAlpha(UIGraphicsGetCurrentContext(), 1);


Then, in your main XIB where your nav bar is declared, overwrite it’s class to be ‘MyNavBar’. That’s it!

The beauty of this technique over method swizzling or categories is that it allows your drawrect to call the original (super) drawrect, so that you can simply add a texture ‘on top’, instead of having to draw the gloss yourself.

Thanks for reading! And if you want to get in touch, I'd love to hear from you: chris.hulbert at gmail.

Chris Hulbert

(Comp Sci, Hons - UTS)

iOS Developer in Sydney.

I have worked at places such as Google, Cochlear, News Corp, Fox Sports, NineMSN, FetchTV, Woolworths, and Westpac, among others. If you're looking for a good iOS developer, drop me a line!

Get in touch:
[email protected]
my resume

 Subscribe via RSS