While exploring Xcode9 Beta Found Safe Area on Interface builders View hierarchy viewer. Got curious and tried to know about Safe Area on Apples documentation, in gist the doc says "The the view area which directly interacts with Auto layout" But it did not satisfy me, I want to know Practical use of this new thing.
Do any one have some clue?
Conclusion paragraph from Apple doc for Safe area.
The UILayoutGuide class is designed to perform all the tasks previously performed by dummy views, but to do it in a safer, more efficient manner. Layout guides do not define a new view. They do not participate in the view hierarchy. Instead, they simply define a rectangular region in their owning view’s coordinate system that can interact with Auto Layout.
This question is related to
ios
swift
ios11
xcode9
safearealayoutguide
The Safe Area Layout Guide helps avoid underlapping System UI elements when positioning content and controls.
The Safe Area is the area in between System UI elements which are Status Bar, Navigation Bar and Tool Bar or Tab Bar. So when you add a Status bar to your app, the Safe Area shrink. When you add a Navigation Bar to your app, the Safe Area shrinks again.
On the iPhone X, the Safe Area provides additional inset from the top and bottom screen edges in portrait even when no bar is shown. In landscape, the Safe Area is inset from the sides of the screens and the home indicator.
This is taken from Apple's video Designing for iPhone X where they also visualize how different elements affect the Safe Area.
Apple introduced the topLayoutGuide and bottomLayoutGuide as properties of UIViewController way back in iOS 7. They allowed you to create constraints to keep your content from being hidden by UIKit bars like the status, navigation or tab bar. These layout guides are deprecated in iOS 11 and replaced by a single safe area layout guide.
Refer link for more information.
I want to mention something that caught me first when I was trying to adapt a SpriteKit-based app to avoid the round edges and "notch" of the new iPhone X, as suggested by the latest Human Interface Guidelines: The new property safeAreaLayoutGuide
of UIView
needs to be queried after the view has been added to the hierarchy (for example, on -viewDidAppear:
) in order to report a meaningful layout frame (otherwise, it just returns the full screen size).
From the property's documentation:
The layout guide representing the portion of your view that is unobscured by bars and other content. When the view is visible onscreen, this guide reflects the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. (In tvOS, the safe area reflects the area not covered the screen's bezel.) If the view is not currently installed in a view hierarchy, or is not yet visible onscreen, the layout guide edges are equal to the edges of the view.
(emphasis mine)
If you read it as early as -viewDidLoad:
, the layoutFrame
of the guide will be {{0, 0}, {375, 812}}
instead of the expected {{0, 44}, {375, 734}}
UIKit
uses the topLayoutGuide & bottomLayoutGuide which is UIView
propertyiOS11+ uses safeAreaLayoutGuide which is also UIView
property
Enable Safe Area Layout Guide check box from file inspector.
Safe areas help you place your views within the visible portion of the overall interface.
In tvOS, the safe area also includes the screen’s overscan insets, which represent the area covered by the screen’s bezel.
Use safe areas as an aid to laying out your content like UIButton
etc.
When designing for iPhone X, you must ensure that layouts fill the screen and aren't obscured by the device's rounded corners, sensor housing, or the indicator for accessing the Home screen.
Make sure backgrounds extend to the edges of the display, and that vertically scrollable layouts, like tables and collections, continue all the way to the bottom.
The status bar is taller on iPhone X than on other iPhones. If your app assumes a fixed status bar height for positioning content below the status bar, you must update your app to dynamically position content based on the user's device. Note that the status bar on iPhone X doesn't change height when background tasks like voice recording and location tracking are active
print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones
Height of home indicator container is 34 points.
Once you enable Safe Area Layout Guide you can see safe area constraints property listed in the interface builder.
You can set constraints with respective of self.view.safeAreaLayoutGuide
as-
ObjC:
self.demoView.translatesAutoresizingMaskIntoConstraints = NO;
UILayoutGuide * guide = self.view.safeAreaLayoutGuide;
[self.demoView.leadingAnchor constraintEqualToAnchor:guide.leadingAnchor].active = YES;
[self.demoView.trailingAnchor constraintEqualToAnchor:guide.trailingAnchor].active = YES;
[self.demoView.topAnchor constraintEqualToAnchor:guide.topAnchor].active = YES;
[self.demoView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor].active = YES;
Swift:
demoView.translatesAutoresizingMaskIntoConstraints = false
if #available(iOS 11.0, *) {
let guide = self.view.safeAreaLayoutGuide
demoView.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
demoView.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
demoView.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true
demoView.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true
} else {
NSLayoutConstraint(item: demoView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
NSLayoutConstraint(item: demoView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
NSLayoutConstraint(item: demoView, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true
NSLayoutConstraint(item: demoView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
}
Source: Stackoverflow.com