iPhone X custom tab bar issue

Question

We have custom tab bar in our app. The height of the custom tab bar is fixed. It was working fine for all devices except iPhone X. The problem is the height of custom tab bar is 45 but in iPhone X it will collide with the home indicator. So we had changed the bottom of the custom tab bar to the safe area. But the problem will be I will see the background view below my custom Tab bar. My question how can we give constraints to Custom tab bar that will be same height all devices except iPhone X and also hides the bottom space in iPhone X? but I want to increase the height of tab bar in iPhone X but I shouldn't affect other devices. Btw I don't want to write a code to separate iPhone X and other devices. All I want to do it in storyboard itself.

It would help others helping you if you would explain what you have tried to fix your problem, and how it failed meeting your requirements. — Gwendal Roué, Oct 30 '17 at 07:29
Did you implement safe area layout https://stackoverflow.com/questions/46317061/use-safe-area-layout-programmatically/46318300#46318300 — Krunal, Oct 30 '17 at 08:11

score 4 · Answer 1 · edited Oct 30 '17 at 08:15

4

How about this?

set your view to be within safe area
set fixed height to your custom tab bar
put a view and set margin between safe area bottom and superview bottom

refer to the picture below

Constraints

How it looks like on iPhone X

How it looks like on other iPhone

edited Oct 30 '17 at 08:15

Jean-François Corbett

37,420
30
139
188

answered Oct 30 '17 at 07:59

Tc Pun

41
3

@venky You did not mention this in your question. To show and hide the custom tab bar, set a height for custom tab bar as a constraint, then link that to IBOutlet. You will need to programmatically change it during runtime. – Tc Pun Oct 30 '17 at 09:43

score 1 · Accepted Answer · answered Nov 07 '17 at 05:35

1

How about making a view effect view at the bottom, which is larger than 44pt? I have tried it in my application and it works well.

refer: https://novemberfive.co/blog/apple-september-event-iphonex-apps/

answered Nov 07 '17 at 05:35

rudeigerc

46
2
5

score 0 · Answer 3 · answered Mar 14 '19 at 15:26

Hope this helps you with programmatically

self.tabBar.layer.masksToBounds = true 
self.tabBar.isTranslucent = true 
self.tabBar.barStyle = .blackOpaque 
self.tabBar.layer.cornerRadius = 20 
self.tabBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]

iPhone X custom tab bar issue

3 Answers3