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?

Solution 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)

Solution 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

Solution 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
}

Solution 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)
    }
}

View more solutions

Comments

[Vinh]

this code will only mess up your bar (dirty programming style), as you try to handle the automatically added UIToolbar from UINavigationController. If the User doesn't use UINavigationController then it definitely doesn't work.

[Christopher Francisco]

could you publish the whole subclass if possible please?

[SHS]

I had tried the same subclass for Bottom toolbar. This increase the height, but sets toolbar to 0,0 at top,left. So I searched and found another 'constraint' way. We need to set height constraint ( Select toolbar element, choose Editor > Pin > Height to create constraint ). I hope this will be helpful to others.

[StackUnderflow]

Much better solution!

[JanApotheker]

Why are you using self.frame to set the new rect? By modifying the bounds and setting the new value as the frame, you'll always place your view at the top left corner (0,0).