12

I am putting a label on a UIToolbar (per this tip: Adding a UILabel to a UIToolbar).

But the toolbar has a button on the left side, and so flexible spaces throw the label off the center, which is where I'd like it to be. Can I somehow center this toolbar item so that it remains centered in the toolbar?

(Already tried balancing the button with a dummy fixed space, no dice.)

Thanks!

5 Answers 5

39

Add a flexible space item to the left and right of your center item, like you did. Then add a fixed space item at the end and set the width to whatever the left button width is -- somewhere around 28 pixels.

UIBarButtonItem *fixedItem = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:NULL] autorelease];
fixedItem.width = 28;
1
  • 2
    This assumes the system font will never change (it has several times) and the user will never set a different sized font. It also ignores localizations of your button’s title being different widths. Feb 17, 2017 at 3:25
6

To center a text/title on a toolbar you can use a simple UILabel like see below:

UILabel *labelTitle = [[UILabel alloc] init];
labelTitle.font =[UIFont fontWithName:@"Helvetica-Bold" size:18];
labelTitle.backgroundColor = [UIColor clearColor];
labelTitle.textAlignment = UITextAlignmentCenter;
labelTitle.userInteractionEnabled = NO;
labelTitle.text = @"Your Title";
[labelTitle sizeToFit];
CGRect labelTitleFrame = labelTitle.frame;
labelTitleFrame.size.width = self.toolbar.bounds.size.width;
labelTitleFrame.origin.y = (self.toolbar.bounds.size.height - labelTitleFrame.size.height) / 2;
labelTitle.frame = labelTitleFrame;
labelTitle.autoresizingMask = UIViewAutoresizingFlexibleWidth;
// Just add UILabel like UIToolBar's subview 
[self.toolbar addSubview:labelTitle];
[labelTitle release];
labelTitle = nil;
1
  • This method work properly when you change orientation and when there are left or right bar buttons
    – Undolog
    Apr 14, 2011 at 10:51
4

Simplest way would be to put the label above the bar, in it's parent view, and justify it there.

3
  • Thanks other-Ben, that was my plan B. :)
    – Ben Zotto
    Mar 24, 2010 at 20:32
  • EricS's method is superior and much easier to implement. Apr 14, 2011 at 0:18
  • 2
    EricS's method is "static" and doesn't work when you change orientation
    – Undolog
    Apr 14, 2011 at 10:50
1

Yes we can center a toolbar item just put two flexible space in the toolbar like :

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

toolbar.items = [NSArray arrayWithObjects:loginButton,flexibaleSpaceBarButton,toolBarLabel,flexibaleSpaceBarButton, nil];
0

If you DON'T use flexible or fixed spaces, you can modify the internal UIToolbar UIStackView distribution as below. Note that you should call toolbar.centerItemsHorizontally() in your view controller's viewDidLayoutSubviews() method.

extension UIView {
    func allSubviews() -> [UIView] {
        var _allSubviews: [UIView] = []
        for subview in self.subviews {
            _allSubviews += subview.allSubviews()
            _allSubviews.append(subview)
        }
        return _allSubviews
    }
}
extension UIToolbar {
    func centerItemsHorizontally() {
        allSubviews().forEach { subview in
            if let stackView = subview as? UIStackView {
                stackView.distribution = .fillEqually
            }
        }
    }
}

Result: enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.