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!

Answer 1

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

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;

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;

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

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: