Resizing a toolbar on rotate in iOS8

Question

I'm trying to get the toolbar in the bottom of my app to resize when I rotate the iphone/ipod. The navigation controller automatically resizes the navigationbar in iOS8. It does get the right height IF it already is in landscape when the activity is started.

Same size as portrait after it has been rotated to landscape

Smaller because the activity was started in landscape

The toolbar was added in the storyboard.

@IBOutlet var toolbar: UIToolbar!

I have tried to change the rect of the toolbar in the willRotateToInterfaceOrientation(toInterfaceOrientation: UIInterfaceOrientation, duration: NSTimeInterval)

Like this:

override func willRotateToInterfaceOrientation(toInterfaceOrientation: UIInterfaceOrientation, duration: NSTimeInterval) {
    var customToolbarFrame: CGRect!
    if toInterfaceOrientation == UIInterfaceOrientation.Portrait {
        customToolbarFrame = CGRectMake(0,self.view.bounds.size.height - 44, self.toolbar.frame.size.width, 44)
    }
    else {
        customToolbarFrame = CGRectMake(0,self.view.bounds.size.height - 32, self.toolbar.frame.size.width, 32)
    }
    UIView.animateWithDuration(duration, animations: {
        self.toolbar.frame = customToolbarFrame
    })
}

I also tried without the animation, but no luck.

It does however work if I do the same in didRotateFromInterfaceOrientation(fromInterfaceOrientation: UIInterfaceOrientation) but without the animation it looks awful because there is some delay.

Solution

from gabbler

1. I selected w Any h Compact for all iphones (I don't want it smaller on ipads)
2. Selected my toolbar
3. Set the height to 32px on the constraints and Update frames to Items of New Constraint

Answer 1

If you are using auto layout, you can set different height constraints in portrait and landscape, for example add a 32 height constraint for the toolbar in wCompact|hCompact mode, you will be able to see a 32 height toolbar in landscape mode, here is an Toolbar test example

Answer 2

I did a lot of research and didn't found any documentation explaining how to change/fix the Navigation Controller Toolbar height in IOS8, but i build a workaround using Autolayout.

First of all a tried the same approach you did, but using "ViewWillTransitionToSize" function, because the methods for interface rotation are deprecated.

iOS 8 Rotation Methods Deprecation - Backwards Compatibility

-(void) viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {

    [super viewWillTransitionToSize: size withTransitionCoordinator: coordinator];

    [coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {

        UIDeviceOrientation deviceOrientation   = [[UIDevice currentDevice] orientation];

        if (UIDeviceOrientationIsLandscape(deviceOrientation)) {
            NSLog(@"Will change to Landscape");

        }
        else {
            NSLog(@"Will change to Portrait");
        }


    }
    completion:^(id<UIViewControllerTransitionCoordinatorContext> context) {
        NSLog(@"finish Transition");
    }];


}

Second i tried to build a custom class inherited from a UIToolbar and implement the changes on the rect on initWithFrame method.

if you want to implement a workaround to fix this issue using Auto Layout, please follow the steps below:

1- Drag a Toolbar to your View Controller and Pin Leading, Bottom and Height:

2- Control Drag from your Toolbar to the container View and Pin "Equal Widths"

3- Its done:

Answer 3

I'm not sure it's possible to create a storyboard toolbar that takes advantage of adaptation (because there's no container for the toolbar's top constraint).

You could setup a height constraint and adjust that in code, however the navigation controller's toolbar already adjusts its height (based on orientation) for you.

If you don't mind setting up your toolbar items in code (using the view controller's toolbarItems property), you'll get adaptive sizing for free.

self.toolbarItems = @[...];

Here's an example of how I setup a toolbar:

/**
 Setup a segmented control of bible versions, and add it to the toolbar
 */
- (void)setupBibleVersionToolbarItems
{
    self.versionSegmentedControl = [[UISegmentedControl alloc] initWithItems:@[@"ESV",
                                                                               @"KJV",
                                                                               @"NASB",
                                                                               @"NIV",
                                                                               @"NKJV",
                                                                               @"NLT"]];
    self.versionSegmentedControl.opaque = NO;
    [self.versionSegmentedControl addTarget:self
                                     action:@selector(versionChanged:)
                           forControlEvents:UIControlEventValueChanged];

    UIBarButtonItem *bibleVersionItem = [[UIBarButtonItem alloc]
                                         initWithCustomView:(UIView *)self.versionSegmentedControl];
    bibleVersionItem.width = 300.0f;
    UIBarButtonItem *flexibleSpace = [[UIBarButtonItem alloc]
                                      initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
                                      target:nil
                                      action:nil];

    self.toolbarItems = @[flexibleSpace, bibleVersionItem, flexibleSpace];
}

You can show or hide the navigation controller's toolbar, as needed, by setting its toolbarHidden property.

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    self.navigationController.toolbarHidden = NO;
}

- (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
    self.navigationController.toolbarHidden = YES;
}