Playing it safe with ‘Safe Area Layout Guide’
From iOS 11 onwards, the top and bottom layout guide properties have been deprecated and Apple introduced the safe area layout guide. Top and bottom layout guides were introduced in iOS 7 and their main intention was to guide us in aligning our views with top or bottom of our root view so that our views are not obscured from top or bottom bars.
Top and bottom layout guides are replaced by a single property ‘safeAreaLayoutGuide’ defined on a UIView (as compared to top and bottom layout guides that were the properties of UIViewController).
It is an instance of UILayoutGuide class which makes it very easy to use especially with layout anchors. If you are unfamiliar with UILayoutGuides, you can find a detailed discussion on it in my article ‘The Ultimate Guide to UILayoutGuide’. Or if you have never used the NSLayoutAnchors, I also wrote an extensive article about it.
Safe Area Layout Guide
Safe area layout guide gives an area of the view that will remain unobscured and you can align views with it for maximum visibility. The area is adjusted according to the availability of top and bottom bars. It is an instance of UILayoutGuide which provides several properties to bind your view with. Here is an extensive guide on UILayoutGuide.
Unlike top and bottom layout guides which were only available in a view controller, safe area layout guide is also available in a standalone view.
Adding Constraints with Safe Area Layout Guide
In Xcode:
You can bind your view with safe area layout guide just like you bound it with top or bottom layout guides previously.
Programatically:
Adding with safe area layout guide is vary easy.
Enabling/Disabling Safe Area Layout Guide
Safe area layout guide is enabled for your main storyboard by default. If you are creating a new xib or an storyboard in Xcode 9, safe area layout guide option is already enabled. You can disable this option explicitly by going into file inspector menu of Interface Builder and unchecking the option Use Safe Area Layout Guide.
Disabling the ‘Use Safe Area Layout Guide’ in the file inspector menu replaces the constraints attached to safe area layout guide with top and bottom layout guides or if it was a view, the constraints are replaced with top and bottom constraints of the view.
Changing Safe Area
You can override the additionalSafeAreaInsets property of UIViewController to specify your own safe area.
Changing the safe area also results in the new safe area for the subviews too. In the above image, the safe area of the grey subview changes and aligns itself with the safe area of the super view. The green and red rectangles show safe area and layout margins guides of our root view respectively. Blue and yellow rectangles represent safe area and layout margins of our subview.
Conclusion
Safe area layout guide leverages the advantages of UILayoutGuide API. Its easy to implement both in IB or programmatically. So its time to say good bye to our old friends top and bottom layout guides.
If you liked this article, please show your support by clapping. You can also look in to my related articles:
