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 (Freelancer / Contractor) in Australia.

I have worked at places such as Google, Cochlear, Assembly Payments, News Corp, Fox Sports, NineMSN, FetchTV, Coles, Woolworths, Trust Bank, and Westpac, among others. If you're looking for help developing an iOS app, drop me a line!

Get in touch:
[email protected]

 Subscribe via RSS