iosswiftconstraintsnslayoutconstraintsafearealayoutguide

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


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.

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:

SafeArea

Without SafeArea:

Without SafeArea

Constraints of Red Circle: Red Circle Constraints


Solution

  • You may want to try this approach...

    Constrain the "dark" view:

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

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

    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:

    enter image description here

    and on iPhone 11 Pro:

    enter image description here

    and how it looks in Storyboard:

    enter image description here