Get Safe Area Inset Top and Bottom Heights

Get safe area inset top and bottom heights

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
}

How to get safe area top and bottom insets in Swift 5

After iOS13 keyWindow concept in iOS anymore as a single app can have multiple windows. So just take the first one :

    let window = UIApplication.shared.windows.filter {$0.isKeyWindow}.first
    let topPadding = window?.safeAreaInsets.top
    let bottomPadding = window?.safeAreaInsets.bottom

How can I add the safe area to the view height?

The problem is here:

let shadowView = UIView( frame: CGRect( x: -10, y: -20, width: (view.frame.width+20), height: 90 ) )

You are hardcoding the frame - don't do this! Well, a height of 90 is fine. But the x: -10, y: -20, width: (view.frame.width+20) is terrible. Not all phones are the same size.

Technically, you could calculate the safe area inset height as NoeOnJupiter commented, but this is still pretty bad. What happens when the user rotates their device, and the notch moves? It sounds like a lot of work.

What you want is Auto Layout and the Safe Area. With Auto Layout, simply define some constraints, then watch your UIViews look great on all screen sizes. Then, the Safe Area defines what parts of the screen are "safe," meaning "not covered by notches or rounded screen corners."

So, you can pin shadowView to the edges of the screen (beyond the notch/safe area), and add the .systemGreen background color. Then, make titleView 90 points high, pinning it vertically to shadowView. Just note how titleView.topAnchor is pinned to shadowView.safeAreaLayoutGuide.topAnchor — this makes it stay clear of the notch.

let shadowView = UIView() /// green background with shadow and corner radius
shadowView.translatesAutoresizingMaskIntoConstraints = false
shadowView.backgroundColor = .systemGreen /// put the background color here instead of on `titleView`, because this view stretches beyond the notch
shadowView.layer.shadowColor = UIColor.black.cgColor
shadowView.layer.shadowOpacity = 0.3
shadowView.layer.shadowOffset = CGSize(width: 5, height: 3)
shadowView.layer.shadowRadius = 4.0
shadowView.layer.cornerRadius = 45
shadowView.layer.maskedCorners = [.layerMinXMaxYCorner, .layerMaxXMaxYCorner] /// only round the bottom corners
view.addSubview(shadowView)

let titleView = UIView() /// container for title label.
titleView.translatesAutoresizingMaskIntoConstraints = false
shadowView.addSubview(titleView)

let titleLabel = UILabel() /// the title label itself
titleLabel.translatesAutoresizingMaskIntoConstraints = false
titleView.addSubview(titleLabel)
titleLabel.text = "Catalogues"
titleLabel.font = UIFont.systemFont(ofSize: 36, weight: .medium)

NSLayoutConstraint.activate([
    
    /// constrain `shadowView`
    shadowView.topAnchor.constraint(equalTo: view.topAnchor),
    shadowView.rightAnchor.constraint(equalTo: view.rightAnchor),
    shadowView.leftAnchor.constraint(equalTo: view.leftAnchor),
    
    
    /// constrain `titleView`
    titleView.topAnchor.constraint(equalTo: shadowView.safeAreaLayoutGuide.topAnchor), /// most important part!
    titleView.heightAnchor.constraint(equalToConstant: 90), /// will also stretch `shadowView` vertically
    titleView.rightAnchor.constraint(equalTo: shadowView.rightAnchor),
    titleView.leftAnchor.constraint(equalTo: shadowView.leftAnchor),
    titleView.bottomAnchor.constraint(equalTo: shadowView.bottomAnchor),
    
    /// constrain `titleLabel`
    titleLabel.centerXAnchor.constraint(equalTo: titleView.centerXAnchor),
    titleLabel.centerYAnchor.constraint(equalTo: titleView.centerYAnchor)
])

Result:

iPhone 8	iPhone 12

Get height of the safe area bottom inset from a keyboard extension

Apple has confirmed that it is currently not possible to know the safe area insets from a keyboard extension.

iOS SwiftUI - get the height of top safe area

Use GeometryReader

struct ContentView: View {
    var body: some View {
        GeometryReader { proxy in
            Text("Something")
                .onAppear {
                    print(proxy.safeAreaInsets)
                }
        }
    }
}

How to get Height of Safe Area Programmatically Prior to IOS 11?

In a UIViewController you can use the top and bottom layout guides like this:

let safeAreHeight = self.view.frame.height - self.topLayoutGuide.length - self.bottomLayoutGuide.length

For UIView you can use the safeAreaLayoutGuide with a conditional check:

let verticalSafeAreaInset: CGFloat
if #available(iOS 11.0, *) {
  verticalSafeAreaInset = self.view.safeAreaInsets.bottom + self.view.safeAreaInsets.top
} else {
  verticalSafeAreaInset = 0.0
}
let safeAreaHeight = self.view.frame.height - verticalSafeAreaInset

As devices running iOS 9 and 10 have no safe area, it is safe to default to 0.0.

safe-area-inset-bottom not working on ios 15 safari

I think I made it work using -webkit-fill-available the other day which respects safe area.

body {
    min-height: -webkit-fill-available;
}

How to get safe area top,bottom,right,left value in iOS?

The safe area insets is a UIEdgeInsets struct. You can access the components like this:

 view.safeAreaInsets.left
 view.safeAreaInsets.right
 view.safeAreaInsets.top
 view.safeAreaInsets.bottom

etc

Get Safe Area Inset Top and Bottom Heights