How to align UIBarButtonItem in UIToolbar in iOS universal app?

Question

I want to put two UIBarButtonItem instances to UIToolbar in my iOS universal app, on which the first item is on the left-edge of the toolbar and the second is on the center. However, it looks like this cannot be done in Interface Builder, because the auto layout doesn't support forcing constraints on UIBarButtonItem class due to the fact that it is not a subclass from UIView.

Notice that I don't want to put the first on the left-edge and the second is on the right-edge - I have to put the second button at the center. Also, I don't have a plan to use the third button in order to align them as left, center, and right at equal interval.

Is it still possible to add such constraint in this situation in storyboard? I use Xcode 6 beta 5.

score 77 · Accepted Answer · edited May 23 '17 at 12:18

77

You can do it all in your Storyboard.

Select a Bar Button Item in the Object library and drag it into your Toolbar. Add a Flexible Space Bar Button Item at its right. Add your second Bar Button Item at its right. Then, add a second Flexible Space Bar Button Item at its right.

The result will look like this in Interface Builder:

enter image description here

If necessary, you can add an extra Fixed Space Bar Button Item at the right edge of your Toolbar to be sure that your second Bar Button Item is really centered.

User lxt gives another example of this in answer for a similar question here.

Edit: Be sure that your UIToolbar has good constraints before proceeding!

edited May 23 '17 at 12:18

Community

1
1

answered Aug 15 '14 at 11:53

Imanou Petit

76,586
23
234
201

Did you try running the simulator? Actually I tried it before posting this question, but it puts two bar buttons on the left and right edge. – Blaszard Aug 15 '14 at 12:26
I tried it again but it didn't work. Did you select an universal app template? – Blaszard Aug 15 '14 at 17:10
This answer works for me too. I was going to suggest adding a zero-width Fixed space at the right edge but it doesn't make any difference as the flexispaces grow to the max possible (and the answer suggests that too, doh!) . @Gardecolo can you post a screen shot of your current non working view hierarchy (the left bit of IB) – Warren Burton Aug 17 '14 at 11:39
Thanks, Warren. I got that the reason it didn't work for my app is because I didn't add constraints to the horizontal edge of the toolbar, and since the "actual center position" was shown at the "right edge of the 4-inch iPhone", I didn't realize it is the origin of the problem. Adding `-16` horizontal constraints makes it work on both the iPhone and iPad properly. – Blaszard Aug 17 '14 at 11:54
You're right: I didn't mention in my post that I had added auto-layout constraints to the Toolbar just after adding it to my viewController scene. Well, in fact, it was part of the problem... – Imanou Petit Aug 17 '14 at 11:59

score 5 · Answer 2 · edited Sep 25 '18 at 01:03

you can do this programmatically

UIBarButtonItem *flexible = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:nil];

UIBarButtonItem *item1 = [[UIBarButtonItem alloc] initWithTitle:@"item1" style:UIBarButtonItemStylePlain target:self action:nil];
UIBarButtonItem *item2 = [[UIBarButtonItem alloc] initWithTitle:@"item2" style:UIBarButtonItemStylePlain target:self action:nil];
UIBarButtonItem *item3 = [[UIBarButtonItem alloc] initWithTitle:@"item3" style:UIBarButtonItemStylePlain target:self action:nil];

self.toolbarItems = [NSArray arrayWithObjects: item1, flexible, item2, flexible, item3, nil];

check this link if you want more details

How to place UIBarButtonItem on the right side of a UIToolbar?

For some reason, when I add `*flexible`, it just stacks all my BarButtonItems on top of each other. — Trip, Mar 28 '16 at 20:21

score 3 · Answer 3 · edited May 23 '17 at 12:18

3

I think you should try Flexible bar button space item and for more understating i am sharing a link, so have look of it might this help you out

UIToolbar and Flexable/Fixed bar button items

edited May 23 '17 at 12:18

Community

1
1

answered Aug 21 '14 at 14:02

Arvind

450
1
4
11

score 2 · Answer 4 · answered Aug 21 '14 at 11:17

Code to add toolbar :

Here fixed width can be variable. Accordingly you can keep it as far as you want so as to keep the second button in centre.

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

    fixedItemSpaceWidth.width = 200.0f; // or whatever you want

    UIBarButtonItem *doneBarButton  = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(doneButtonAction:)];

            UIBarButtonItem *cancelBarButton  = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(cancelButtonAction:)];

            // Initialise toolabr
            UIToolbar *toolbar          = [[UIToolbar alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height-44, 320, 44)];
            //toolbar.barStyle = UIBarStyleBlack;
            toolbar.items               = [NSArray arrayWithObjects:cancelBarButton,fixedItemSpaceWidth,doneBarButton, nil];
        [self.view addSubview:toolbar];

How to align UIBarButtonItem in UIToolbar in iOS universal app?

4 Answers4