Incorrect vertical position for UIBarButtonItems in UIToolbar for iOS 7

Question

I have this piece of code for an iPad application that works fine for any iOS below iOS 7

UIToolbar* tools = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 75, 44)];

NSMutableArray* buttons = [[NSMutableArray alloc] initWithCapacity:2];

UIBarButtonItem *composeButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCompose target:self action:@selector(toggleDelete:)];

[buttons addObject:composeButton];

UIBarButtonItem *fixedSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];

fixedSpace.width = 5;

[buttons addObject:fixedSpace];

UIBarButtonItem* bi = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(touchMe:)];

[buttons addObject:bi];

[tools setItems:buttons animated:NO];

tools.barStyle = -1;

self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:tools];

[bi release];
[fixedSpace release];
[composeButton release];
[buttons release];    
[tools release];

The result of this pre iOS 7 is:

The same code when run on iOS 7 yeilds this result:

For some reason the buttons are moved to the bottom of the Toolbar in iOS 7.

Now, I can reposition them using the UIBarItem imageInset property but that seems to be kind of hackish, because then I need to check for iOS version and only do the imageInset if the iPad's running iOS 7+. My question is am I missing anything specific to iOS 7 pertaining to UIToolbar? I went over the iOS 7 UI Transition Guide and cannot find anything specific to this problem.

Upstairs

Answer 1

Since I did not get any other answers and found the right fix for me, I'm going to answer this question for anyone else running into the same problem. If your target is iOS 5.0 and above, there is a convenient method to add multiple items to the right bar button. Here's the fix:

[self.navigationItem setRightBarButtonItems:[NSArray arrayWithObjects:deleteButton, bi, nil]];

Upstairs

Thanks, but this change did not fix the problem for me. I still have the same wrong vertical offset after making this change. edit: HOWEVER, when I combined your answer with specifying the width per Bond007's answer, everything looked good. – Unconscionable

@Unconscionable thanks for adding the info. I spent quite a bit of time on this problem, but it seems that there are different solutions to it. – Upstairs

Answer 2

Check your toolbar in the designer (storyboard). Make sure you have width specified for ALL buttons on the toolbar. I had similar issue and after I have specified width for each button in the toolbar in the storyboard it has gone away and now buttons are properly positioned on the toolbar in iOS 7.

Excipient

I am adding the toolbar programmatically. – Upstairs

I have this case also with system items on toolbar. I have solved it by setting the toolbar frame to CGRectZero and then in the next line setting toolbar frame to correct frame in the layoutSubviews method of the parent table view cell. – Excipient

I combined this answer with the self-answer from bizsytes, and the two answers together fixed my problem. – Unconscionable

I had a similar problem where the bar button items would display correctly in iOS 7 but not in iOS 6. Setting the width of the bar button items fixed that issue, and now the buttons are properly aligned in portrait and landscape mode on both iOS systems. – Brufsky

Answer 3

Creating UIToolbar with CGRectZero and setting it's frame after setItems: solved my problem on iOS 7.

UIToolbar *tools = [[UIToolbar alloc] initWithFrame:CGRectZero];
//Create array with items
[tools setItems:buttonsArray animated:NO];
//Setting frame at this moment fixes the issue    
tools.frame = toolbarFrame;

Sydelle

Answer 4

I had this problem with only iOS7. iOS8 works perfect in generally. The solution is that the height of toolbar is 44.0, and I setted the delegate UIBarPositioning, and the items position to top:

- (UIBarPosition) positionForBar: (id<UIBarPositioning>) bar {
    return UIBarPositionTop;
}

Stereotaxis