Adding UIToolbar with two UIBarButtonItem to a UINavigationBar: poor UIToolbar and what about iPhone 4

Question

I'm following the second tip from here. In this tip two UIBarButtonItems are put together in a UIToolbar. Finally, the UIToolbar is added to the UINavigationBar. Now to my problems:

1) A white line is on top of the UIToolbar. If I increase the size of the UIToolbar, the gradient is wrong. I'm using the following size for the UIToolbar:

    UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 90, 44.01)];

How can I get rid of the white line? See here:

The problem is that there is a white instead of a grey line. If it would be grey, everything would be perfect.

2) What about the difference of the display size of iPhone 3 and iPhone 4? Do I have to check which iPhone is used and then double the size?

Edit:

The buttons are created like in the following example I took from the above mentioned website:

// create a toolbar to have two buttons in the right
UIToolbar* tools = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 133, 44.01)];

// create the array to hold the buttons, which then gets added to the toolbar
NSMutableArray* buttons = [[NSMutableArray alloc] initWithCapacity:3];

// create a standard "add" button
UIBarButtonItem* bi = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:NULL];
bi.style = UIBarButtonItemStyleBordered;
[buttons addObject:bi];
[bi release];

// create a spacer
bi = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
[buttons addObject:bi];
[bi release];

// create a standard "refresh" button
bi = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemRefresh target:self action:@selector(refresh:)];
bi.style = UIBarButtonItemStyleBordered;
[buttons addObject:bi];
[bi release];

// stick the buttons in the toolbar
[tools setItems:buttons animated:NO];

[buttons release];

// and put the toolbar in the nav bar
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:tools];
[tools release];

@ tc.:

I tried to subclass UIToolbar.

// MyToolbar.h

#import <Foundation/Foundation.h>


@interface MyToolbar : UIToolbar {

}

@end

// MyToolbar.m

#import "MyToolbar.h"


@implementation MyToolbar

- (void)drawRect:(CGRect)rect {
    // do nothing
}

- (id)initWithFrame:(CGRect)aRect {
    if ((self = [super initWithFrame:aRect])) {
        self.opaque = NO;
        self.backgroundColor = [UIColor clearColor];
        self.clearsContextBeforeDrawing = YES;      
    }
    return self;
}

@end

Answer 1

There's no guarantee that UIToolbar draws seamlessly inside a UINavigationBar; this might be responsible for the white line you're seeing.

You might be able to subclass UIToolbar so that it doesn't draw (i.e. override -drawRect: to not do anything).

Answer 2

1) I can't explain the white line. Curious that it's only above your buttons. How are the buttons created? Also, is there a reason you're setting the height to 44.01, rather than just 44? I'm not positive that the height you set is honored in any case, they may be forced to 44 (someone correct me if I'm wrong).

2) You don't have to do anything for iPhone 4, everything is scaled automatically.

Answer 3

Did you try adding those buttons not inside a container UIView and then adding it as an item but manipulating with UIBarButtonSystemItemFlexibleSpace? I mean adding each of those buttons as an independent item.

Answer 4

An UIToolbar is designed to be used at the bottom of Iphone screen, so if you use somewhere else it will try to make an edge effect on top side. To avoid this the toolbar height should be 2 pixels bigger then Navbar height. Bu this time you will have a different side effect which causes an edge clear on the bottom side of the navbar. (The navbar in any case locates the rightbarbuttonitem as aligned in the middle)