When subclassing UIToolBar to have a custom background the bottom half of toolbar is black?

Question

I'm subclassing UIToolBar, here is how I override the drawRect method of UIToolBar:

- (void)drawRect:(CGRect)rect
{
    UIImage *backgroundImage = [UIImage imageNamed:@"UIToolBar_Background.png"];
    [backgroundImage drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}

The app uses a UINavigationController paradigm initialized with initWithNavigationBarClass method.

The issue is that the bottom half of toolbar is black? The UIToolBar_Background.png is 44 pixels height (or 88 for retina). It should not have it's bottom half black.

Mastermind

Answer 1

By subclassing UIToolBar and overriding drawRect, you eliminate some of UIToolBar's own drawing. Why not use the appearance api to set a background image:

[[UIToolbar appearance] setBackgroundImage:[UIImage imageNamed:@"UIToolBar_Background.png"]
                        forToolbarPosition:UIToolbarPositionBottom
                                barMetrics:UIBarMetricsDefault];

alternatively, you could use the subclassing route, just make sure you call [super drawrect:rect] before doing your own drawing:

- (void)drawRect:(CGRect)rect
{
    [super drawRect:rect];
    UIImage *backgroundImage = [UIImage imageNamed:@"UIToolBar_Background.png"];
    [backgroundImage drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}

Craig

Thanks Marcel for response, key reason is I need to have an oversized button in the middle of my toolbar. Something like shown on these tutorials. idevrecipes.com/2010/12/16/raised-center-tab-bar-button Right now I've been adding a toolbar as a view on the viewController but I'm struggling with getting it to be correct Y position all the time esp. with 4inch display. So I'm trying to encapsulate everything in a UIToolbar. – Mastermind

I aded the [super drawRect:rect]; still getting half the toolbar cut off. Is it something to do with default tintColour or barStyle? – Mastermind

The .png has a alpha transparency on the bottom half. This I believe is what is causing the issue. – Mastermind

The issue was caused by the .png (UIToolBar_Background.png) having an alpha transparency. - Specifically the bottom half of the image had transparency, hence the bottom half being black. - This leads me to believe that the drawInRect method that I was calling on the UIImage instance is not capable of rendering transparency. It's beyond my current knowledge to describe why this is. - I could use the above code with an image, a .png, without transparency and the whole image was displayed. I'll move this comment to the answer when I'm allowed – Mastermind

your code for the appearance API seems to crash my app, I had to use: [[UIToolbar appearance] setBackgroundImage:[UIImage imageNamed:@"UIToolBar_Background.png"] forToolbarPosition:UIToolbarPositionBottom barMetrics:UIBarMetricsDefault]; – Mastermind