Changing the height of UIToolbar in iOS 7

Question

I am trying to change the height of my UIToolbar in a new iOS 7 project but I am not able to.

I am using a UINavigationController to manage a couple of UIViewController. I tried setting the frame for the toolbar via the navigation controller but alas, the toolbar property is read-only.

I looked at "Is there a way to change the height of a UIToolbar?" but that did not work.

I tried subclassing UIToolbar, forcing a custom height and setting the right class in the Storyboard but that did not work neither, height keeps on being 44px.

I thought about auto-layout could not set any constraint on the size of the toolbar, every field is disabled.

I can set a custom view in a UIBarButtonItem with a bigger height than the toolbar. The big item will be correctly rendered but it will overflow from the toolbar.

This is the best I could do: screenshot

Is it actually possible to change the height of the UIToolbar in iOS 7? Or am I supposed to create a bunch of custom items to mimic it?

Answer 1

Following the @Antoine suggestion using sizeThatFits, here is my Toolbar subclass with an height of 64:

import UIKit

class Toolbar: UIToolbar {
    override func layoutSubviews() {
        super.layoutSubviews()
        frame.size.height = 64
    }

    override func sizeThatFits(size: CGSize) -> CGSize {
        var size = super.sizeThatFits(size)
        size.height = 64
        return size
    }
}

Then, when initializing the navigation controller, I say it should use that class:

let navigationController = UINavigationController(navigationBarClass: nil, toolbarClass: Toolbar.self)

Answer 2

The easiest way I found to set the toolbar height was to use a height constraint as follows:

let toolbarCustomHeight: CGFloat = 64

toolbar.heightAnchor.constraintEqualToConstant(toolbarCustomHeight).active = true

Answer 3

I've fixed this by subclassing UIToolbar and pasting the following code:

override func layoutSubviews() {
    super.layoutSubviews()

    var frame = self.bounds
    frame.size.height = 52
    self.frame = frame
}

override func sizeThatFits(size: CGSize) -> CGSize {
    var size = super.sizeThatFits(size)
    size.height = 52
    return size
}

Answer 4

If you are using same height for all screens, this should do the trick

extension UIToolbar {
    open override func sizeThatFits(_ size: CGSize) -> CGSize {
        return CGSize(width: UIScreen.main.bounds.width, height: 60)
    }
}

Answer 5

Although many solutions point in the right direction, they have either some layout issues or doesn't work properly. So, here's my solution:

Swift 3, custom UIToolbar subclass

class Toolbar: UIToolbar {

    let height: CGFloat = 64

    override func layoutSubviews() {
        super.layoutSubviews()

        var newBounds = self.bounds
        newBounds.size.height = height
        self.bounds = newBounds
    }

    override func sizeThatFits(_ size: CGSize) -> CGSize {
        var size = super.sizeThatFits(size)
        size.height = height
        return size
    }
}

Answer 6

You can customize the height of your UIToolbar in iOS 7 with the following code. I have it tested and working in my current project.

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];

    // Make the Toolbar visible with this line OR check the "Shows Toolbar" option of your Navigation Controller in the Storyboard
    [self.navigationController setToolbarHidden:NO];

    CGFloat customToolbarHeight = 60;
    [self.navigationController.toolbar setFrame:CGRectMake(0, self.view.frame.size.height - customToolbarHeight, self.view.frame.size.width, customToolbarHeight)];
}