Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get safe area inset top and bottom heights

People also ask

What is the height of safe area?

TLDR — Safe area is 44pt from the top and 34pt from the bottom in portrait mode on new iPhone devices, treat them as the edge of the screen in your design.

What is safe area layout guide?

The safe area layout guide is a property of the UIView class and it inherits from the UILayoutGuide class. It was introduced in iOS 11 and tvOS 11. It helps you correctly position views in a layout. The safe area layout guide replaces the top and bottom layout guides of the UIViewController class.

What is Safeareainsets?

Fresh out of WWDC21, safeAreaInset() is a brand new SwiftUI view modifier, which lets us define views that become part of the observed safe area.


Try this :

In Objective C

if (@available(iOS 11.0, *)) {
    UIWindow *window = UIApplication.sharedApplication.windows.firstObject;
    CGFloat topPadding = window.safeAreaInsets.top;
    CGFloat bottomPadding = window.safeAreaInsets.bottom;
}

In Swift

if #available(iOS 11.0, *) {
    let window = UIApplication.shared.keyWindow
    let topPadding = window?.safeAreaInsets.top
    let bottomPadding = window?.safeAreaInsets.bottom
}

In Swift - iOS 13.0 and above

// Use the first element from windows array as KeyWindow deprecated

if #available(iOS 13.0, *) {
    let window = UIApplication.shared.windows.first
    let topPadding = window.safeAreaInsets.top
    let bottomPadding = window.safeAreaInsets.bottom
}

To get the height between the layout guides you just do

let guide = view.safeAreaLayoutGuide
let height = guide.layoutFrame.size.height

So full frame height = 812.0, safe area height = 734.0

Below is the example where the green view has frame of guide.layoutFrame

enter image description here


Swift 4, 5

To pin a view to a safe area anchor using constraints can be done anywhere in the view controller's lifecycle because they're queued by the API and handled after the view has been loaded into memory. However, getting safe-area values requires waiting toward the end of a view controller's lifecycle, like viewDidLayoutSubviews().

This plugs into any view controller:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    let topSafeArea: CGFloat
    let bottomSafeArea: CGFloat

    if #available(iOS 11.0, *) {
        topSafeArea = view.safeAreaInsets.top
        bottomSafeArea = view.safeAreaInsets.bottom
    } else {
        topSafeArea = topLayoutGuide.length
        bottomSafeArea = bottomLayoutGuide.length
    }

    // safe area values are now available to use
}

I prefer this method to getting it off of the window (when possible) because it’s how the API was designed and, more importantly, the values are updated during all view changes, like device orientation changes.

However, some custom presented view controllers cannot use the above method (I suspect because they are in transient container views). In such cases, you can get the values off of the root view controller, which will always be available anywhere in the current view controller's lifecycle.

anyLifecycleMethod()
    guard let root = UIApplication.shared.keyWindow?.rootViewController else {
        return
    }
    let topSafeArea: CGFloat
    let bottomSafeArea: CGFloat

    if #available(iOS 11.0, *) {
        topSafeArea = root.view.safeAreaInsets.top
        bottomSafeArea = root.view.safeAreaInsets.bottom
    } else {
        topSafeArea = root.topLayoutGuide.length
        bottomSafeArea = root.bottomLayoutGuide.length
    }

    // safe area values are now available to use
}

None of the other answers here worked for me, but this did.

var topSafeAreaHeight: CGFloat = 0
var bottomSafeAreaHeight: CGFloat = 0

  if #available(iOS 11.0, *) {
    let window = UIApplication.shared.windows[0]
    let safeFrame = window.safeAreaLayoutGuide.layoutFrame
    topSafeAreaHeight = safeFrame.minY
    bottomSafeAreaHeight = window.frame.maxY - safeFrame.maxY
  }

All of the answers here are helpful, Thanks to everyone who offered help.

However as i see that that the safe area topic is a little bit confused which won’t appear to be well documented.

So i will summarize it here as mush as possible to make it easy to understand safeAreaInsets, safeAreaLayoutGuide and LayoutGuide.

In iOS 7, Apple introduced the topLayoutGuide and bottomLayoutGuide properties in UIViewController, They allowed you to create constraints to keep your content from being hidden by UIKit bars like the status, navigation or tab bar It was possible with these layout guides to specify constraints on content, avoiding it to be hidden by top or bottom navigation elements (UIKit bars, status bar, nav or tab bar…).

So for example if you wanna make a tableView starts from the top screen you have done something like that:

self.tableView.contentInset = UIEdgeInsets(top: -self.topLayoutGuide.length, left: 0, bottom: 0, right: 0)

In iOS 11 Apple has deprecated these properties replacing them with a single safe area layout guide

Safe area according to Apple

Safe areas help you place your views within the visible portion of the overall interface. UIKit-defined view controllers may position special views on top of your content. For example, a navigation controller displays a navigation bar on top of the underlying view controller’s content. Even when such views are partially transparent, they still occlude the content that is underneath them. In tvOS, the safe area also includes the screen’s overscan insets, which represent the area covered by the screen’s bezel.

Below, a safe area highlighted in iPhone 8 and iPhone X-series:

enter image description here

The safeAreaLayoutGuide is a property of UIView

To get the height of safeAreaLayoutGuide:

extension UIView {
   var safeAreaHeight: CGFloat {
       if #available(iOS 11, *) {
        return safeAreaLayoutGuide.layoutFrame.size.height
       }
       return bounds.height
  }
}

That will return the height of the Arrow in your picture.

Now, what about getting the top "notch" and bottom home screen indicator heights?

Here we will use the safeAreaInsets

The safe area of a view reflects the area not covered by navigation bars, tab bars, toolbars, and other ancestors that obscure a view controller's view. (In tvOS, the safe area reflects the area not covered by the screen's bezel.) You obtain the safe area for a view by applying the insets in this property to the view's bounds rectangle. If the view is not currently installed in a view hierarchy, or is not yet visible onscreen, the edge insets in this property are 0.

The following will show the unsafe area and there distance from edges on iPhone 8 and one of iPhone X-Series.

enter image description here

enter image description here

Now, if navigation bar added

enter image description here

enter image description here

So, now how to get the unsafe area height? we will use the safeAreaInset

Here are to solutions however they differ in an important thing,

First One:

self.view.safeAreaInsets

That will return the EdgeInsets, you can now access the top and the bottom to know the insets,

Second One:

UIApplication.shared.windows.first{$0.isKeyWindow }?.safeAreaInsets

The first one you are taking the view insets, so if there a navigation bar it will be considered , however the second one you are accessing the window's safeAreaInsets so the navigation bar will not be considered