Aligning UIToolBar items

Question

I have three UIBarButtonItem created as below. They align left and I'd like to align center so there isn't a gap on the right side. I don't see an align property on UIToolBar. Is there another way to accomplish this?

//create some buttons
UIBarButtonItem *aboutButton = [[UIBarButtonItem alloc] initWithTitle:@"About" style:UIBarButtonItemStyleBordered target:self action:@selector(showAbout:)];
[toolbar setItems:[NSArray arrayWithObjects:settingsButton,deleteButton,aboutButton,nil]];
//Add the toolbar as a subview to the navigation controller.
[self.navigationController.view addSubview:toolbar];

nduplessis · Accepted Answer · 2016-07-11T18:28:40.763

262

Add two UIBarButtonSystemItemFlexibleSpace items to your toolbar, to the left and right of your items

UIBarButtonItem *flexibleSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
[toolbar setItems:[NSArray arrayWithObjects:flexibleSpace, settingsButton,deleteButton,aboutButton, flexibleSpace, nil]];

Adding these as you would any other toolbar items will distribute space evenly between the two of them.

edited Jul 11 '16 at 18:28

answered Mar 02 '09 at 15:42

nduplessis

11,882
2
34
53

25

There's no real reason to make multiple flexible spaces. You can add the same multiple flexible space object to your toolbar multiple times if you need more than one. – mmc Jul 20 '09 at 13:15
mmc is correct. In fact, it would probably be perfectly reasonable to make a singleton flexibleSpace and reuse it throughout your product. I have heard it claimed that this was the true original use of singletons: not to enforce program rules, but to reduce overhead. – Amagrammer Aug 01 '09 at 21:03
2

You forgot to update the release call, should read [flexibleSpace release]; – Daniel Hepper Dec 20 '09 at 22:02
Yeah, sorry, it read [flexibleSpaceLeft release] instead of [flexibleSpace release]. Typo fixed – nduplessis Dec 21 '09 at 06:35

score 31 · Answer 2 · answered Nov 28 '14 at 14:55

31

This can also be done right from a storyboard.

Just drag and drop items in the toolbar, and turn some of them into flexible or fixed space to get the desired effect. See the two examples below.

Evenly spaced

Centered

answered Nov 28 '14 at 14:55

Arnaud

15,630
9
57
78

Herman Schoenfeld · Answer 3 · 2015-10-08T06:32:24.360

9

In Xamarin iOS

Right aligned:

yourBar.SetItems(new [] { new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace), yourButton }, false);

Center Aligned:

var flexibleSpace = new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace);
yourBar.SetItems(new [] { flexibleSpace, yourButton, flexibleSpace}, false);

edited Oct 08 '15 at 06:32

answered Jan 24 '13 at 07:10

Herman Schoenfeld

7,500
3
33
48

5

This is not the topic. We are talking about pure iOS here. – jturolla May 27 '13 at 22:02
4

Which is what MonoTouch targets. – Herman Schoenfeld Jun 06 '13 at 14:33
2

Objective C question not MonoTouch/C# – Max MacLeod Jul 31 '13 at 10:14
6

@MaxMacLeod: it's not tagged obj-c, it's tagged iPhone. Therefore my answer is valid. It's also good to contrast c# vs obj-c. Clearly, c# is modern, slimmer, nicer, faster and superior in every way. – Herman Schoenfeld Aug 01 '13 at 02:31
13

While it may have been clear that the code in the question was Objective-C, I found this answer helpful. It's a high ranking question in Google too. – jacob.toye Oct 30 '13 at 07:04
Not a good answer for the primary question, but was helpful for me in working with Xamarin. Thanks! – bdrelling Dec 07 '15 at 16:56

score 9 · Answer 4 · edited Dec 31 '20 at 20:37

Swift version:

    let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: viewController.view.frame.size.width, height: 35.0))
    let flexibleSpace = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.flexibleSpace, target: viewController, action: nil)
    let button1 = UIBarButtonItem(title: "A", style: UIBarButtonItem.Style.Plain, target: viewController, action: foo)
    let button2 = UIBarButtonItem(title: "B", style: UIBarButtonItem.Style.Plain, target: viewController, action: bar)
    let button3 = UIBarButtonItem(title: "C", style: UIBarButtonItem.Style.Plain, target: viewController, action: blah)
    toolbar.items = [button1, flexibleSpace, button2, flexibleSpace, button3]

Aligning UIToolBar items

4 Answers4

Linked