Can't assign multiple Buttons to UINavigationItem when using Storyboard with iOS 5

Question

I'm a iOS developer with a lot experience in developing the UI by code.

I'm now testing the Storyboard functionality, because I testing to switch to "design" the UI rather then implementing it. In the past I stuck with to much limits using nib/xib's and therefore I never succeed with the switch. So here comes a new try with storyboading :)

Now my question - I'm designing an iPad Storyboard which has a Navigation Controller and a Tableview Controller. I want to add multiple UIBarButtonItems, but I can just add one for each side with the Interface Builder.

The code would look like:

UIBarButtonItem *b = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemBookmarks target:nil action:nil];

UIBarButtonItem *spacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
spacer.width = 20;

self.navigationItem.rightBarButtonItems = [NSArray arrayWithObjects:self.editButtonItem, spacer, b, nil];

But why can't I add multiple buttons using the IB? There are only outlets for leftBarButtonItem, rightBarButtonItems, backBarButtonItems...

This is driving me crazy¡¡¡

Thanks!

Answer 1

EDIT

At the time I answered this question, Xcode was not offering the possibility of linking added buttons in the storyboard. The trick presented permitted to still have the segues designed in the storyboard.

With more recent versions of Xcode, for sure the solution introduced by @ecotax and later the more detailed answer of @ShimanskiArtem are the ones to be used.

---

I had the same problem as you and I found the following trick

Suppose you have a navigationController in which you would like to have multiple buttons. Since iOS 5 you can assign an array. The problem is that you lose all the benefits of using the storyboard as it will be done programmatically.

I used the following trick. Usually when you want multiple button on the navigation bar you don't want a toolbar.

In the current view (not in the navigation controller) where you want the buttons to appear, show the toolbar by changing

bottomBar = inferred to bottomBar = toolbar.

A toolbar will appear at the bottom. Add UIBarButtons to this bar. Link them to other view controllers using segues, etc ...

in your .h file create an outlet for each button

@property (strong, nonatomic) IBOutlet UIBarButtonItem *Button1;
@property (strong, nonatomic) IBOutlet UIBarButtonItem *Button2;
@property (strong, nonatomic) IBOutlet UIBarButtonItem *Button3;

Then in your viewDidLoad() link the buttons to the navigation bar and hide the toolbar. Add them in the reverse order of the order you want to see them

self.navigationItem.rightBarButtonItems =
    [NSArray arrayWithObjects:self.Button3, self.Button2, self.Button1, nil];

self.navigationController.toolbarHidden = YES;

And voilà you have multiple buttons in your navigation bar

and the result in the simulator

Answer 2

I found an easy solution.

1) Add the folowing category:

@interface UINavigationItem(MultipleButtonsAddition)
@property (nonatomic, strong) IBOutletCollection(UIBarButtonItem) NSArray* rightBarButtonItemsCollection;
@property (nonatomic, strong) IBOutletCollection(UIBarButtonItem) NSArray* leftBarButtonItemsCollection;
@end

@implementation UINavigationItem(MultipleButtonsAddition)

- (void) setRightBarButtonItemsCollection:(NSArray *)rightBarButtonItemsCollection {
    self.rightBarButtonItems = [rightBarButtonItemsCollection sortedArrayUsingDescriptors:@[[NSSortDescriptor sortDescriptorWithKey:@"tag" ascending:YES]]];
}

- (void) setLeftBarButtonItemsCollection:(NSArray *)leftBarButtonItemsCollection {
    self.leftBarButtonItems = [leftBarButtonItemsCollection sortedArrayUsingDescriptors:@[[NSSortDescriptor sortDescriptorWithKey:@"tag" ascending:YES]]];
}

- (NSArray*) rightBarButtonItemsCollection {
    return self.rightBarButtonItems;
}

- (NSArray*) leftBarButtonItemsCollection {
    return self.leftBarButtonItems;
}

@end

2) Add your items to view controller (items will be sorted ascending by tag)

3) Connect your items with leftBarButtonItemsCollection or rightBarButtonItemsCollection outlet collection of UINavigationItem

Answer 3

I wanted to follow HpTerm's advice, but in my app i do have both a toolbar and a navigation bar.
I found the method outlined in his/her comment can easily be generalized to support this case too. Instead of adding a dummy toolbar, you can simply add the buttons at the same level as the view controller, either by dragging them in the black bar below:

or in the textual overview displayed left:

Assigning the properties to the array in viewDidLoad remains as HpTerm explained; the only difference is there's no dummy toolbar to hide anymore.

Answer 4

In Xcode7, it is possible to add the multiple buttons to UINavigationItem directly in storyboard, without creating an IBOutlet. simply drag multiple UIBarItems to the left or right section of the Navigation item.

Answer 5

@jchnxu if you havnt already figured out how to finish @Shimanski Artems solution go to story boards and drag a bar button item to the the view controller you have your navigation bar in and drag it on the section where you have the exit and responder icons above the battery icon. From there you can attach them to the collections

Answer 6

Man, try this!

self.navigationItem.rightBarButtonItems = @[self.editButtonItem, spacer, b];