Tabbar Design is not showing properly on iPhone X

Question

I set constraints for tabar but its image and title is showing like this only on iPhone X. Also, it is working properly on other devices like the 8, 6, and 5 series. It is not in proper format, Please suggest what I can do for it.

i had same issue, the tabBar is default@Venkat. it happens in only iPhoneX — Uday Babariya, Mar 14 '18 at 05:15
this could help >> https://stackoverflow.com/questions/46214740/ios-11-iphone-x-simulator-uitabbar-icons-and-titles-being-rendered-on-top-coveri/48686992#48686992 — Uday Babariya, Mar 14 '18 at 05:41
Set your Spash Screen/Launch Image According To Iphone Xit would help — Amey, Mar 14 '18 at 05:52
@UdayBabariya. it is not working fine. and tabbar item is showing upper side of UItabbar(Like images and title ) I want only it show properly . — veerendra pratap singh, Mar 14 '18 at 05:53

score 2 · Accepted Answer · answered Mar 14 '18 at 05:55

I tend to use the view inspector to look at the frames to see what is going on. It looks like you might be doing something at the wrong time in the views life cycle. So that objects have not had time to layout.

You could also try moving the tab bar up one pixel like Uday said.

Last tip when dealing with view issues. Make sure to delete the app from the simulator on say the iPhone 8. As well as Derived Data. I have spent a lot of time trying to diagnose an issue. Only to find out I was looking at a cached storyboard.

Yash · Answer 2 · 2018-03-14T16:53:24.047

I found the easiest way to fix the Tabbar design for all size of iPhone. you can use setItems:animated: method of the tab bar as like below:

 func setItems(_ items: [UITabBarItem]?, animated: Bool) {
    UIIImage * image0 = UIImage(named: "search_icon")
    let item0 = UITabBarItem(title: tabBar.items[0]?.title, image: image0, tag: 0)
        // And so on or in a loop
    let items = [item0]
    // Add all items here
    tabBar.setItems(items, animated: false)
}

For more details you can read apple documentation here: https://developer.apple.com/documentation/uikit/uitabbar?language=objc

Tabbar Design is not showing properly on iPhone X

2 Answers2