How to set Safe Area Layout for new IPhone Devices in swift

Question

I have created a simple view.Xib file, if internet connection interrupts or disconnects for any reason my view will be displayed at the bottom.

For this I have set programmatically NSLayoutConstraint.

• If I use SafeAreaLayout it gives spaces at the bottom of every new iPhone devices like (iPhone XR, 11, Pro or Pro max).
• If I don't use SafeAreaLayout then view at bottom not properly displayed.

In all other devices (iPhone 7, 8 or plus) with SafeAreaLayout it works properly.

How can I set view properly at the bottom without space?

My Code:

let viewW = offlineView.fromNib()
view.addSubview(viewW)
viewW.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([

viewW.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
viewW.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
viewW.topAnchor.constraint(equalTo: self.view.bottomAnchor,constant: -25),
viewW.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
])

let viewW = offlineView.fromNib()
view.addSubview(viewW)
viewW.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([

viewW.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor),
viewW.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor),
viewW.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor,constant: -25),
viewW.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor),
])

Screenshots attached:

SafeArea:

Without SafeArea:

Constraints of Red Circle:

Answer 1

You may want to try this approach...

Constrain the "dark" view:

• Leading to superview Leading
• Trailing to superview Trailing
• Bottom to superview Bottom
• no Height constraint

Then, add your "circle" view as a subview of darkView, and constrain:

• Trailing to darkView Trailing: 4-pts
• Top to darkView Top: 4-pts
• Bottom to the root-view safe-area Bottom: 4-pts

and the label, also a subview of darkView, constrained:

• Trailing to circle Trailing: 8-pts
• CenterY to circle CenterY

Now...

Auto-layout will keep darkView's Bottom at the bottom of the screen, and darkView's Top 4-pts from Top of circle view.

Auto-layout will keep circle view's Bottom 4-pts from the Bottom of the view (when there's no soft-home-button) and 4-pts from the Bottom of the safe-area (when there is a soft-home-button).

Here's the results -- the yellow dashed line is the Safe-Area bounds.

on iPhone 8:

and on iPhone 11 Pro:

and how it looks in Storyboard: