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 t

Answer 1

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

Answer 2

invalidateIntrinsicContentSize of UITabBar in viewWillLayoutSubviews that may help you.

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

Answer 3

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.

Answer 4

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

}
}

Answer 5

Apple has now fixed this issue in iOS 12.1.1

Answer 6

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.