How do you add more than one UIBarButton on UINavigationItem.rightBarButtonItem (or leftBarButtonItem)?

Question

I have tried this approach/hack: http://blog.blackwhale.at/2009/06/uibuttons-in-uinavigationbar/

The problem is this leaves a faint seam. I tried setting the background image of the nested toolbar to an image I captured of what it should be. That didn't work. The image was not applied. I have also tried using a nested UINavigationBar and that didn't seem to work.

I have seen this done in several iPhone apps. Does anyone know how?

[EDIT] I want the buttons to look like normal UIBarButtonItems and be able to use system styles like UIBarButtonSystemItemAdd, UIBarButtonSystemItemRefresh. The link I provided does this except you can see a faint seam because it is a UIToolbar nested in the navigationbar..

Please don't mention this breaking the Human Interface Guidelines. (We know).

I appreciate you contributing your hacks... thats the only way to do this!

Answer 1

To get rid of the background ('seam') of a UIToolbar, create a subclass of UIToolbar and override the (void)drawRect:(CGRect)rect method. Leave that blank and your UIToolbar will no longer have a background.

Just used this in my own project and worked great. Found this in the comments of: http://osmorphis.blogspot.com/2009/05/multiple-buttons-on-navigation-bar.html

Answer 2

iOS 5.0 now supports multiple buttons. See the iOS documentation for UINavigationItem. Specifically, the following:

Properties:

@property(nonatomic, copy) NSArray *leftBarButtonItems;
@property(nonatomic, copy) NSArray *rightBarButtonItems;
@property BOOL leftItemsSupplementBackButton;

Methods:

- (void)setLeftBarButtonItems:(NSArray *)items animated:(BOOL)animated;
- (void)setRightBarButtonItems:(NSArray *)items animated:(BOOL)animated;

Answer 3

I posted code to add two buttons to the right of the navigationBar. You can set barStyle = -1 instead of subclassing UIToolbar.

Answer 4

UIView *parentView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, myWidth, myHeight)];
// make UIView customView1... (UILabel, UIButton, etc.) with desired frame and settings
[parentView addSubview:customView1];
[customView1 release];
// make UIView customView2... (UILabel, UIButton, etc.) with desired frame and settings
[parentView addSubview:customView2];
[customView2 release];
UIBarButtonItem *customBarButtomItem = [[UIBarButtonItem alloc] initWithCustomView:parentView];
[parentView release];
self.navigationItem.rightBarButtonItem = customBarButtomItem;
[customBarButtomItem release];

Answer 5

see uicatalogue example available at apple's site for free...they used uisegmented control to show three buttons in place of right bar button on navigaion bar...

Answer 6

I can't comment but in addition to @iworkinprogress I had to set the UIToolbar background color to clear:

    [toolbar setBackgroundColor:[UIColor clearColor]];

This was also found in the comments of http://osmorphis.blogspot.com/2009/05/multiple-buttons-on-navigation-bar.html.

Answer 7

In iOS 4.x the clearColor seems to have no effect on the UIToolbar, whereas overriding its drawRect: did.

Answer 8

I came up with a helper function I'm using all over my project. Basically it checks if there is already a button on the bar and either add the new one or merge it with existing buttons. So you can call the function just once or multiple times:

+ (void)AddButtonToBar:(UIViewController *)controller withImage:(NSString *)imageName withAction:(SEL)action withFrame:(CGRect) frame{
    UIButton *newButton =[[UIButton alloc] init];
    [newButton setBackgroundImage:[UIImage imageNamed:imageName] forState:UIControlStateNormal];
    newButton.frame = frame;
    [newButton addTarget:controller action:action forControlEvents:UIControlEventTouchUpInside];

    if ([[controller.navigationItem rightBarButtonItems] count] == 0)
        [controller.navigationItem setRightBarButtonItem:[[UIBarButtonItem alloc] initWithCustomView:newButton]];
    else {
        NSMutableArray *existingButtons = [[NSMutableArray alloc] initWithArray:[controller.navigationItem rightBarButtonItems]];
        [existingButtons addObject:[[UIBarButtonItem alloc] initWithCustomView:newButton]];
        [controller.navigationItem setRightBarButtonItems:(NSArray *)existingButtons];
    }
}

Call it from the view controller:

[Helper AddButtonToBar:self withImage:@"imageName.png" withAction:@selector(myAction) withFrame:CGRectMake(0, 0, 24, 24)];