How to extend bottom view colour below the home indicator in iPhone X?

ios iphone iphone-x safearealayoutguide
abhimuralidharan picture abhimuralidharan · Nov 9, 2017 · Viewed 15.7k times · Source

Please check the attached image. The Viewcontroller's view's background colour is blue. This colour extends below the status bar and below the home indicator as you can see. There is a white view at the bottom which is a button. Here the white view is inside the safe layout guide.

I want the same white colour to extend below the home indicator without adding any additional view only for iPhone-X.

How to do this?

enter image description here

Answer

Krunal picture Krunal · Nov 9, 2017

You need to set/attach bottom constraint of you white view with super view.

Follow these steps and see:

  • Check bottom/bottom alignment constraint of your view. It may be attached with bottom anchor/constraint of safe area.

enter image description here


  • (To edit it) Double click on Bottom constraint, which will show you following options.
  • Now change selection (tick mark) from safe area to super view.

enter image description here


  • set constant to 0 if not.

enter image description here


  • Here is result, that you may want.

enter image description here

Related questions

Detect if the device is iPhone X

My iOS app uses a custom height for the UINavigationBar which leads to some problems on the new iPhone X. Does someone already know how to reliable detect programmatically (in Objective-C) if an app is running on iPhone X? EDIT: …

Read More
safeAreaInsets in UIView is 0 on an iPhone X

I am updating my app to adapt it for iPhone X. All views work fine by now except one. I have a view controller that presents a custom UIView that covers the whole screen. Before I was using UIScreen.main.…

Read More
Extra bottom space/padding on iPhone X?

On the iPhone X in portrait mode, if you set a bottom constraint to safe area to 0, you will end up with an extra space at the bottom of the screen. How do you get programmatically the height of this …

Read More