Custom tab button position error on iphone x

Question

I add custom button to my tabbar with following this answer.

var menuButtonFrame: CGRect = menuButton.frame

//menuButtonFrame.origin.y = tabBar.frame.y + tabBar.frame.height - menuButtonFrame.height

menuButtonFrame.origin.y = view.bounds.height - menuButtonFrame.height
menuButtonFrame.origin.x = self.view.bounds.width / 2 - menuButtonFrame.size.width / 2
menuButton.frame = menuButtonFrame

menuButton.backgroundColor = Colors.mainColor
menuButton.layer.cornerRadius = menuButtonFrame.height/2
self.view.addSubview(menuButton)

when i tested on simulator it works good. but when i tested on Iphone X simulator it displays under tabbar.

I tried to align buttons origin.y value to tabbar bottom (commented line) but it didn't work again.

Should i use iphone x specific alignment or is there more clean solution for this.

Answer 1

Don't add centerButton in UIView. Add in tabBar

func addMenuButton() {

    let menuWidth: CGFloat = 64    //let height & width same as 64

    let menuButton = UIButton(frame: CGRect(x: (tabBar.frame.width / 2) - (menuWidth / 2), y: 0, width: menuWidth, height: menuWidth))

    menuButton.backgroundColor = .red
    menuButton.layer.cornerRadius = menuWidth/2
    tabBar.addSubview(menuButton)    //Add in tabBar instead of UIView
}