How to correct Tab Bar height issue on iPhone X

Question

I'm having an issue with my app when testing for iPhone X. I'm not sure how to adjust this issue, as well as not make it an issue for non iPhone X sizes. This only seems to be an issue on the iPhone X simulator.

use programmatically TabbarController which will not affect this issues — Hitesh, Nov 01 '17 at 12:36
Did you resolved this problem.I am facing this issue because of custom tabbar height — Shangari C, Apr 13 '18 at 05:04
@ShangariC Your issue is same as mine (custom height), and you can try [this](https://gist.github.com/calt/7ea29a65b440c2aa8a1a#gistcomment-2270140), remove the `viewWillLayoutSubviews`'s override, and use this instead to apply custom height. — Dan, Dec 27 '18 at 14:42

Andrey · Answer 1 · 2020-10-15T15:21:20.500

On iOS 12.1 I've solved this issue by overriding safeAreaInsets in the UITabBar subclass:

class TabBar: UITabBar {
    private var cachedSafeAreaInsets = UIEdgeInsets.zero

    override var safeAreaInsets: UIEdgeInsets {
        let insets = super.safeAreaInsets
    
        if insets.bottom < bounds.height {
            cachedSafeAreaInsets = insets
        }
    
        return cachedSafeAreaInsets
    }
}

For iOS 13.0 onward,

class TabBar: UITabBar {
    private var cachedSafeAreaInsets = UIEdgeInsets.zero

    let keyWindow = UIApplication.shared.connectedScenes
        .filter { $0.activationState == .foregroundActive }
        .compactMap { $0 as? UIWindowScene }
        .first?.windows
        .filter { $0.isKeyWindow }
        .first
    
    override var safeAreaInsets: UIEdgeInsets {
        if let insets = keyWindow?.safeAreaInsets {
            if insets.bottom < bounds.height {
                cachedSafeAreaInsets = insets
            }
        }
        return cachedSafeAreaInsets
    }
}

score 15 · Answer 2 · edited Mar 10 '20 at 19:24

15

Create a separate file with the following code:

extension UITabBar {
    override open func sizeThatFits(_ size: CGSize) -> CGSize {
        super.sizeThatFits(size)
        guard let window = UIApplication.shared.keyWindow else {
            return super.sizeThatFits(size)
        }
        var sizeThatFits = super.sizeThatFits(size)
        sizeThatFits.height = window.safeAreaInsets.bottom + 40
        return sizeThatFits
    }
}

edited Mar 10 '20 at 19:24

Renetik

5,887
1
47
66

answered Jun 28 '18 at 11:54

Mohamed Ali

263
3
13

1

Great solution worked for me, although you would never want to do this in an extension – tennis779 Sep 26 '18 at 18:59

score 10 · Accepted Answer · edited Mar 10 '20 at 19:25

10

"File inspector" from right of Xcode storyboard, enable Safe Area guide layout to support your app in iPhone

This post describes it really well.

edited Mar 10 '20 at 19:25

shim

9,289
12
69
108

answered Nov 01 '17 at 12:51

Dipak Kacha

423
2
13

Sounds like this question is a duplicate then, why not flag it as such? – Martijn Pieters Nov 03 '17 at 08:51
3

@MartijnPieters Both questions are different concepts, but directs to same solutions. – Dipak Kacha Nov 03 '17 at 09:01
1

Duplicates are all about the same solution. – Martijn Pieters Nov 03 '17 at 09:02
10

This was checked and my constraints are set to Safe Area but I'm still getting that odd gap at the bottom. – icekomo Nov 04 '17 at 00:10
@icekomo were you able to find a fix? – Jay Jan 12 '18 at 03:59
I am getting this issue on iPhone XR only, It is working on XS and XS Max why? – Nick Dec 24 '18 at 08:15
1

Just because the answer is a duplicate does not necessarily make the question a duplicate. I found the question useful and unique. – picciano Jul 22 '19 at 17:32

score 7 · Answer 4 · answered Apr 18 '18 at 06:59

7

For iOS 11.3 this worked for me:

func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    tabBar.invalidateIntrinsicContentSize()
}

answered Apr 18 '18 at 06:59

clopex

459
6
11

score 3 · Answer 5 · answered Jan 12 '18 at 06:31

3

In Constraints -

If you are giving bottom space with "Bottom Layout Guide", then this issue will occur.

Solution:

Give bottom space with respect to superview. This will work 100% perfect.

answered Jan 12 '18 at 06:31

Mehul Thakkar

12,440
10
52
81

score 3 · Answer 6 · edited Sep 26 '19 at 10:28

3

This worked for me.

[self.tabBar.bottomAnchor constraintEqualToAnchor:self.view.layoutMarginsGuide.bottomAnchor].active = YES;

edited Sep 26 '19 at 10:28

steveSarsawa

1,559
2
14
31

answered Jul 08 '19 at 18:18

Jonah

4,810
14
63
76

This is really the answer that saved me – Ting Yi Shih Jul 31 '20 at 03:12

score 2 · Answer 7 · answered Apr 29 '18 at 22:29

2

I had a a similar issue. I was setting the selectionIndicatorImage in viewDidLoad(). Moving the code to viewDidLayoutSubviews() fixed my issue.

answered Apr 29 '18 at 22:29

Randeep

403
1
4
11

ben87nz · Answer 8 · 2018-08-06T23:01:20.550

2

Just align the bottom of the UITabBar to the superview, not to the safe area. If you align it to safe area it will be like this:

And when aligned to the superview, it will show correctly:

I think this is because Apple gave the tab bar items a default margin to the bottom if it is on iPhone X as they want the tab bar to be extended to the bottom of the screen to avoid a floating bar.

edited Aug 06 '18 at 23:01

answered Aug 06 '18 at 22:53

ben87nz

79
7

score 2 · Answer 9 · answered Sep 07 '18 at 11:03

Follow below guidelines for setting the UITabbar selectionIndicatorImage.

UITabBar.appearance().selectionIndicatorImage = #YOUR_IMAGE
Make sure your image height is 48.

The default height of tabbar selectionIndicatorImage is 49, But in iPhone X set image height equals to 48.

score 1 · Answer 10 · answered Feb 08 '18 at 13:41

The solution for me was that I had a custom UITabBar height set, something like this:

  override func viewWillLayoutSubviews() {            
        var tabFrame = tabBar.frame
        tabFrame.size.height = 60
        tabFrame.origin.y = self.view.frame.size.height - 60
        tabBar.frame = tabFrame
    }

Remove it and the tab bar will display correctly on iPhone X.

score 1 · Answer 11 · answered May 02 '19 at 16:08

Add this code in viewDidLoad

DispatchQueue.main.async {
            let size = CGSize(width: self.tabBar.frame.width / numberOfTabsFloat,
                              height: self.tabBar.frame.height)
            let image = UIImage.drawTabBarIndicator(color: UIColor.white,
                                                   size: size,
                                                   onTop: false)
            UITabBar.appearance().selectionIndicatorImage = image
            self.tabBar.selectionIndicatorImage = image
        }

and add this extension

extension UIImage{
    //Draws the top indicator by making image with filling color
    class func drawTabBarIndicator(color: UIColor, size: CGSize, onTop: Bool) -> UIImage {
        let indicatorHeight = size.height
        let yPosition = onTop ? 0 : (size.height - indicatorHeight)

        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        color.setFill()
        UIRectFill(CGRect(x: 0, y: yPosition, width: size.width, height: indicatorHeight))
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return image!
    }
}

score 1 · Answer 12 · answered May 07 '19 at 11:12

Put this into your UITabBarViewController to correct the TabBar height if your UIViewController is rotatable.

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to: size, with: coordinator)
        tabBar.sizeToFit()
    }

score 0 · Answer 13 · answered Nov 01 '17 at 12:31

0

invalidateIntrinsicContentSize of UITabBar in viewWillLayoutSubviews that may help you.

 override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    self.tabBar.invalidateIntrinsicContentSize()
}

answered Nov 01 '17 at 12:31

Nishant Bhindi

2,242
8
21

2

Hi Nishant, trid this, didn't make a difference. – icekomo Nov 03 '17 at 23:46

score 0 · Answer 14 · edited Aug 12 '19 at 17:59

0

This worked for me as I am using a selection image.

tabBar.selectionIndicatorImage = UIImage.imageWithColor(color: UIColor.NewDesignColor.yellow, size: tabBarItemSize).resizableImage(withCapInsets: UIEdgeInsets.init(top: 0, left: 0, bottom: 20, right: 0))

Adding a bottom inset helps in my case. Hope this works for your as well. Thanks.

edited Aug 12 '19 at 17:59

shim

9,289
12
69
108

answered Mar 30 '18 at 17:56

Akanksha Sharma

131
1
10

score 0 · Answer 15 · answered Nov 28 '18 at 17:04

There is UITabBar subclass that solves all my issues with iPhone X iOS 11 / iOS 12

class TabBar: UITabBar {

private var _safeAreaInsets = UIEdgeInsets.zero
private var _subviewsFrames: [CGRect] = []

@available(iOS 11.0, *)
override func safeAreaInsetsDidChange() {
    super.safeAreaInsetsDidChange()

    if _safeAreaInsets != safeAreaInsets {
        _safeAreaInsets = safeAreaInsets

        invalidateIntrinsicContentSize()
        superview?.setNeedsLayout()
        superview?.layoutSubviews()
    }
}

override func sizeThatFits(_ size: CGSize) -> CGSize {
    var size = super.sizeThatFits(size)
    if #available(iOS 12.0, *) {
        let bottomInset = safeAreaInsets.bottom
        if bottomInset > 0 && size.height < 50 && (size.height + bottomInset < 90) {
            size.height += bottomInset
        }
    }
    return size
}

override var frame: CGRect {
    get {
        return super.frame
    }
    set {
        var tmp = newValue
        if let superview = superview, tmp.maxY !=
                superview.frame.height {
            tmp.origin.y = superview.frame.height - tmp.height
        }

        super.frame = tmp
    }
}

override func layoutSubviews() {
    super.layoutSubviews()
    let state = subviews.map { $0.frame }
    if (state.first { $0.width == 0 } == nil) {
        _subviewsFrames = state
    } else {
        zip(subviews, _subviewsFrames).forEach { (view, rect) in
            view.frame = rect
        }
    }

}
}

score 0 · Answer 16 · answered Jan 30 '19 at 12:26

0

Apple has now fixed this issue in iOS 12.1.1

answered Jan 30 '19 at 12:26

Sathish Kumar Gurunathan

295
1
3
16

1

This is not fixed in iOS 12.1.4 – Christian Gossain Feb 12 '19 at 22:22
Can confirm that this issue is fixed on iOS 12.1.1 (tested on two iPhone 8s, one on 12.1 and the other on 12.1.1)... don't tell me that Apple broke it again... – 10623169 May 03 '19 at 12:57
1

It's broken on iOS 13 – tww0003 Sep 23 '19 at 20:01
@tww0003, It's working for me. Can you share how you're doing it? – Sathish Kumar Gurunathan Sep 24 '19 at 03:07

score 0 · Answer 17 · answered Mar 01 '19 at 04:25

It's look crazy but I just need to remove this line in my code

self.view.layoutIfNeeded()

I just guess that call layoutIfNeeded on a view that doesn't appear in screen will make this problem happen. Anyway, solution from @mohamed-ali also work correctly. Thanks you so much.

score 0 · Answer 18 · answered Oct 16 '19 at 19:38

0

Although my answer is late, But let me ensure you, if you are facing any issue like this on iphone x, xs or max screen, Make sure the image size you are uploading as selection must have height = width * 48pxHeight.

answered Oct 16 '19 at 19:38

Raza.najam

769
6
15

score 0 · Answer 19 · answered Jan 22 '20 at 21:37

After trying a few solutions, what worked for me was adding the following line to viewDidLoad:

[self.tabBar.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = YES;

Jonah's and Mehul Thakkar's answers pointed me in the right direction.

Note: I only had a blank tab bar controller in storyboard. The tab bar images and view controllers were setup using the tabBarItem properties (e.g., tabBarItem.title on the view controllers).

score -1 · Answer 20 · answered Jul 19 '19 at 06:15

I was facing this cosmetic problem above iOS 11.0 and below 12.0 only.

I was having a CustomTabBar class inherited from UITabBar. I override the frame method like below:

- (CGRect)frame{
    return self.bounds;
}

It resolved this issue in most of the iOS version 11.0 *

How to correct Tab Bar height issue on iPhone X

20 Answers20

Linked