iOS 11 safe area layout guide backwards compatibility

Ted picture Ted · Sep 12, 2017 · Viewed 68.4k times · Source

Is enabling Safe Area Layout Guides compatible to iOS below 11?

enter image description here

Answer

thijsonline picture thijsonline · Oct 17, 2017

I managed to work with the new Safe Area layout guides and maintain backwards compatibility with iOS 9 and iOS 10: (EDIT: as pointed out in the comments by @NickEntin, this implementation will presume there is a status bar present, which won't be true in landscape on the iPhone X. Resulting in to much space to the top (20 points). It will run perfectly fine however.

E.g. if you want a view to be 10 points below the status bar (and 10 points below the sensor housing on iPhone X):

  1. In your XIB, go to File Inspector and enable the safe are by checking Use Safe Area Layout Guides.
  2. Create a constraint from the view's top to the main view's top, with >= (greater than or equal) constraint, constant 30 (30 because we want 10 points spacing to the status bar which is 20 points high) and priority High (750).
  3. Create a constraint from the view's top to the Safe Area's top, with = (equal) constraint, constant 10 and priority Low (250).

The same can be done for a view at the bottom (and for leading/trailing or left/right to the Safe Area):

  1. In your XIB, go to File Inspector and enable the safe are by checking Use Safe Area Layout Guides.
  2. Create a constraint from the view's bottom to the main view's bottom, with >= (greater than or equal) constraint, constant 10 and priority High (750).
  3. Create a constraint from the view's bottom to the Safe Area's bottom, with = (equal) constraint, constant 10 and priority Low (250).