iOS Autolayout and UIToolbar/UIBarButtonItems

Question

I have an iOS view with autolayout enabled and have a UIToolbar with a UISearchBar and UISegmentControl contained with the toolbar. I

Answer 1

Autolayout constraints only work with UIViews and their subclasses.

While UIToolbar allows some UIView based items (such as UISearchBar and UISegmentedControl) they may have to coexist with UIBarButtonItems which do not inherit from UIView.

Until autolayout can work with UIBarButtonItems, do as you have done.

Your alternative is to roll your own toolbar with widgets based only on UIViews.

Answer 2

You can do this in code, at least; I'm the type to forsake Interface Builder and go it in code anyway. IB seems to get in my way more often than not when it comes to adding or tweaking constraints. Here's what I've done in my custom UIToolbar subclass's -initWithFrame: method.

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self addSubview:self.label];

        [self addConstraint:[NSLayoutConstraint
                             constraintWithItem:self.label
                             attribute:NSLayoutAttributeCenterX
                             relatedBy:NSLayoutRelationEqual
                             toItem:self
                             attribute:NSLayoutAttributeCenterX
                             multiplier:1 constant:0]];
        [self addConstraint:[NSLayoutConstraint
                             constraintWithItem:self.label
                             attribute:NSLayoutAttributeCenterY
                             relatedBy:NSLayoutRelationEqual
                             toItem:self
                             attribute:NSLayoutAttributeCenterY
                             multiplier:1 constant:0]];
    }
    return self;
}

And since I like to lazy load as much as possible, here's my self.label instance variable (called when [self addSubview:self.label] gets messaged above).

- (UILabel *)label {
    if (_label) return _label;
    _label = [UILabel new];
    _label.translatesAutoresizingMaskIntoConstraints = NO;
    _label.textAlignment = NSTextAlignmentCenter;
    return _label;
}

Seems to work for me. I'm not adding any UIBarButtonItems, though, so your mileage my vary.

Answer 3

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.

NB: this is a copy of my answer to Aligning UIToolBar items, I stumbbled upon both questions while looking for such a solution