Can I center a UIToolbar item?

Question

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!

Polystyrene

Answer 1

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

Evilminded

Thanks other-Ben, that was my plan B. :) – Polystyrene

EricS's method is superior and much easier to implement. – Knowall

EricS's method is "static" and doesn't work when you change orientation – Delgado

Answer 2

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;

Kuhlman

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. – Montgolfier

Answer 3

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;

Delgado

This method work properly when you change orientation and when there are left or right bar buttons – Delgado

Answer 4

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];

Im

Answer 5

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:

Sula