19

I am trying to change the height of the stock UITabBar to 44px, similar to Tweetbot's tab bar height. I've also seen a few other apps do this as well.

however, when i try to set the height it still remains the same

self.tabBar.frame.height = 40

are we not allowed to change the tab bar height? and if so what is a good alternative? using a toolbar?

3254523
  • 3,016
  • 7
  • 29
  • 43

9 Answers9

39

It seems everybody says this can't be done easily

In your storyboard give your UITabBar a custom subclass name, then implement the subclass with the following

This tells all views that use the tab bar that it should be a certain height.

@implementation MyTabBar

-(CGSize)sizeThatFits:(CGSize)size
{
    CGSize sizeThatFits = [super sizeThatFits:size];
    sizeThatFits.height = 100;

    return sizeThatFits;
}

@end

enter image description here

SomeGuy
  • 9,670
  • 3
  • 32
  • 35
  • Thanks so much for this! I added the Swift translation below. – Melly Jan 24 '15 at 21:58
  • This is gold. So simple and so effective! :D – napolux Mar 17 '15 at 22:16
  • @Lev it still works, please make sure you've set the custom UITabBar class in Interface Builder – SomeGuy May 29 '15 at 10:36
  • @SomeGuy I did... I'm sure. I setup logging within the method to see it was being called. It is, but it has no effect whatsoever. I've tried various numbers from 1 to 100 and none have any effect, but the method continues to be called. I've tried it both in the emulator and on the phone (8.3). – SikoSoft May 29 '15 at 13:49
  • @SomeGuy is there something else that needs to be done, or needs *not* to be done? Anything related to it's constraints in the story board? – SikoSoft May 29 '15 at 13:50
  • 1
    @Lev I believe you have auto layout enabled. This would require you to override override func intrinsicContentSize() -> CGSize { var sizeThatFits = super.frame.size sizeThatFits.height = 120 return sizeThatFits } – jernkuan Jul 24 '15 at 15:12
33

SomeGuy's answer above worked for me. Here's the Swift translation for anyone who may need it. I made the height close to what it seems most popular apps use.

class TabBar: UITabBar {

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

         return sizeThatFits
     }
}
iambot
  • 25
  • 6
Melly
  • 675
  • 5
  • 6
11

For Swift 3 and xcode 8 

extension UITabBar {
     override open func sizeThatFits(_ size: CGSize) -> CGSize {
     var sizeThatFits = super.sizeThatFits(size)
     sizeThatFits.height = 80 // adjust your size here
     return sizeThatFits
    }
 }
Museer Ahamad Ansari
  • 5,414
  • 3
  • 39
  • 45
6

In your UITabBarController

- (void)viewWillLayoutSubviews {
    CGRect tabFrame = self.tabBar.frame;
    tabFrame.size.height = 80;
    tabFrame.origin.y = self.view.frame.size.height - 80;
    self.tabBar.frame = tabFrame; 
}
jose920405
  • 7,982
  • 6
  • 45
  • 71
6

In swift it is even simpler than all solutions suggested above by using an extensions to UITabBar, no subclassing necessary:

extension UITabBar {

    override public func sizeThatFits(size: CGSize) -> CGSize {
        super.sizeThatFits(size)
        var sizeThatFits = super.sizeThatFits(size)
        sizeThatFits.height = <Insert your height here>
        return sizeThatFits
    }
}
der_michael
  • 3,151
  • 1
  • 24
  • 43
5

If you have auto layout enabled, you will need to override instrinsicContentSize instead

Proper usage of intrinsicContentSize and sizeThatFits: on UIView Subclass with autolayout

class TabBar: UITabBar {
    override func intrinsicContentSize() -> CGSize {
        var intrinsicSize = super.frame.size

        intrinsicSize.height = 120
        return intrinsicSize
     }
}
Community
  • 1
  • 1
jernkuan
  • 630
  • 6
  • 8
  • 1
    Note that intrinsicContentSize is now a computed property in newer versions of Swift. See: https://stackoverflow.com/questions/38881151/intrinsiccontentsize-method-does-not-override-any-method-from-its-superclass – Jason Machacek Apr 17 '19 at 08:08
2

The developer doesn't own the tabBar, the framework does. It will fight you to make sure that the tabBar stays the same height. If you want to work around this, you can make your own toolbar and add autlayout constraints to its height to force it to stay whatever height you'd like.

InkGolem
  • 2,662
  • 1
  • 15
  • 22
2

If you are on iOS 11 then following will help 

-(CGSize)sizeThatFits:(CGSize)size
{
    CGSize sizeThatFits = [super sizeThatFits:size];
    sizeThatFits.height = 60;

    if (@available(iOS 11.0, *)) {
        UIWindow *window = UIApplication.sharedApplication.keyWindow;
        CGFloat bottomPadding = window.safeAreaInsets.bottom;
        sizeThatFits.height += bottomPadding;
    }

    return sizeThatFits;
}

Basically need to cover safe area, else tabbar height on iPhone X appears to be low.

vishal dharankar
  • 7,536
  • 7
  • 57
  • 93
0

For iOS11 and above you can use below:

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    if (@available(iOS 11.0, *)) {
        self.additionalSafeAreaInsets = UIEdgeInsetsMake(0, 0, 20, 0);
    } 
}

And for all os, create UITabBar subclass, use it in the UITabBarController and implement below method in the implementation of custom tab bar class:

-(CGSize)sizeThatFits:(CGSize)size {
    CGSize sizeThatFits = [super sizeThatFits:size];
    sizeThatFits.height = kBarHeight;
    return sizeThatFits;
}
user7424029
  • 59
  • 3