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:

So if you don't want either of these, what kind of layout _do_ you want? — Sweeper, Oct 20 '20 at 06:53
@Sweeper `without SafeArea` but it cuts view red circle. How can I fix it? — Tekhe, Oct 20 '20 at 06:56
Hey there! Actually, that space at the bottom is reserved for iOS-related navigation gestures and it is not advised that you include your views/layout there. That is precisely why the concept of "Safe Area" was introduced. Why does it work alright on other devices? Because the navigation stuff happens based on home-button without relying on any of screen's real estate and hence the concept of 'safe area' technically does not exist on those devices — Lokesh SN, Oct 20 '20 at 07:18

score 1 · Accepted Answer · answered Oct 20 '20 at 19:24

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:

I have followed your mentioned steps. Thank you. Accepted and ticked. — Tekhe, Oct 22 '20 at 07:31

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

1 Answers1