How to correct Tab Bar height issue on iPhone X

ios swift xcode uistoryboard iphone-x

43,861

Solution 1

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

This post describes it really well.

Solution 2

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

Solution 3

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

Solution 4

For iOS 11.3 this worked for me:

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

Solution 5

This worked for me.

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

View more solutions

43,861

Author by

icekomo

Updated on July 25, 2022

Comments

icekomo almost 2 years

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.
Martijn Pieters over 6 years

Sounds like this question is a duplicate then, why not flag it as such?
Dipak Kacha over 6 years

@MartijnPieters Both questions are different concepts, but directs to same solutions.
Martijn Pieters over 6 years

Duplicates are all about the same solution.
icekomo over 6 years

Hi Nishant, trid this, didn't make a difference.
icekomo over 6 years

This was checked and my constraints are set to Safe Area but I'm still getting that odd gap at the bottom.
Jay over 6 years

@icekomo were you able to find a fix?
tennis779 almost 6 years

Great solution worked for me, although you would never want to do this in an extension
Nick over 5 years

I am getting this issue on iPhone XR only, It is working on XS and XS Max why?
Christian Gossain over 5 years

This is not fixed in iOS 12.1.4
10623169 about 5 years

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...
picciano almost 5 years

Just because the answer is a duplicate does not necessarily make the question a duplicate. I found the question useful and unique.
tww0003 almost 5 years

It's broken on iOS 13
Sathish Kumar Gurunathan almost 5 years

@tww0003, It's working for me. Can you share how you're doing it?
Ting Yi Shih almost 4 years

This is really the answer that saved me