15

From the iOS Human Interface Guidelines, iOS UI Element Usage Guidelines

On iPhone, take into account the automatic change in toolbar height that occurs on device rotation. In particular, make sure your custom toolbar icons fit well in the thinner bar that appears in landscape orientation. Don’t specify the height of a toolbar programmatically.

I can see the height changing from 44 points to 32 points in Mail, Twitter for iPhone and Dropbox for example, but when I add a toolbar (with Interface Builder) and have my UIViewController subclass to automatically rotate (shouldAutorotateToInterfaceOrientation: returns YES), the toolbar does not automatically change its height on device rotation.

The UIToolbar Class Reference does not mention this automatic change of height, so am I supposed to change it programmatically even though the HIG says Don’t specify the height of a toolbar programmatically?

4 Answers 4

19

Did you check the auto-resizing property of the toolbar?

5
  • 11
    That's it, you have to do toolbar.autoresizingMask = toolbar.autoresizingMask | UIViewAutoresizingFlexibleHeight; programmatically as Interface Builder doesn't allow you to change the flexible height!
    – 0xced
    Mar 7, 2011 at 12:47
  • 2
    don't you have a side effect with iOS5.0 with this solution ? It works ok but the icons in the toolbar always have the landscape (=smaller) size, even in portrait :/
    – yonel
    Dec 14, 2011 at 13:45
  • I second yonel - the icons retain the small size in both orientation. Also, once rotated, it doesn't position it properly - there's an extra uncovered pixel at the bottom of the screen. I wonder if there's a god reason for the resizing mask to be disabled in IB...
    – George
    Aug 16, 2012 at 19:13
  • I think you are seeing that pixel issue and icon size issue for two reasons. First, the pixel issue is because your struts are not set properly for your views above/below the toolbar. Second, the icon sizing issue is probably because you are adjusting the autoresizingMask in the viewDidLoad method. Try doing this in the viewWillAppear method. Doing these makes it work as expected for me in iOS 6.
    – lehn0058
    Feb 24, 2013 at 14:27
  • @0xced you can find autoresizing masks in Interface Builder. Just go to the 'Size' tab and you'll see the Autosizing box on the left Apr 18, 2013 at 11:13
15

As noted by yonel and George in the comments from 7KV7 answer, changing the autoresizing mask does not work as intended on iOS 5.

I found another solution by using the -[UIView sizeThatFits:] method. Here is how I did it:

- (void) layoutForInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Adjust the toolbar height depending on the screen orientation
    CGSize toolbarSize = [self.toolbar sizeThatFits:self.view.bounds.size];
    self.toolbar.frame = (CGRect){CGPointMake(0.f, CGRectGetHeight(self.view.bounds) - toolbarSize.height), toolbarSize};
    self.webView.frame = (CGRect){CGPointZero, CGSizeMake(CGRectGetWidth(self.view.bounds), CGRectGetMinY(self.toolbar.frame))};
}

Then I call this layoutForInterfaceOrientation: method in my view controller viewWillAppear: and willAnimateRotationToInterfaceOrientation:duration: methods.

The height is nonetheless changed programmatically but at least the value is not hardcoded.

12

This behavior is a lot simpler to achieve with auto layout. I've only tested in iOS8 but the following code works for me with the desired animation on orientation change:

public override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    toolbar.invalidateIntrinsicContentSize()
}
2
  • Works great on iOS 9. Jun 18, 2015 at 9:55
  • This almost worked, I had to add toolbar.sizeToFit() after the invalidateIntrinsicContentSize();
    – C0C0AL0C0
    Jul 3, 2016 at 22:11
2

If you use a ViewController inside a NavigationController, you can use the NavigationController’s toolbar instead of creating your own, and let it handle the resizing. This is what the ViewController's toolbarItems property is for, actually.

1
  • 1
    I'm aware of this solution, but when you push view controller B onto view controller A, if A doesn't want a toolbar and B wants a toolbar, you can't get a nice push horizontal animation. The toolbar animation is vertical while the push transition animation is horizontal so it looks awkward in my opinion. Not animating the toolbar is even worse.
    – 0xced
    Aug 24, 2012 at 18:44

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.