CODEWITHSUNDEEP
iosswiftuistatusbariphone-x
Ivan Cantarino
Ivan Cantarino

Reputation: 3246

Add UIView behind iPhone X status bar

I have an App, that doesn't have a UINavigationController and it has a UICollectionView with some cells as its feed.

To avoid the cells appearing behind the status bar, I added a UIView behind it.

Before iPhone X it was pretty simple to do this, as the following:

let v = UIView()
v.backgroundColor = .white
view.addSubview(v)
v.anchor(top: view.topAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 0, paddinfLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 20)

By doing so, a tiny white layer would appear behind it as expected.

(this anchor method is from an extension, not language-default).

How can I achieve this for iPhone X ?

So far I tried the following code:

if #available(iOS 11, *) {
    v.anchor(top: view.safeAreaLayoutGuide.topAnchor, left: view.safeAreaLayoutGuide.leftAnchor, bottom: nil, right: view.safeAreaLayoutGuide.rightAnchor, paddingTop: 0, paddinfLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 20)

    let window = UIWindow(frame: UIScreen.main.bounds)
    print("window.safeAreaInsets.top:", window.safeAreaInsets.top)
    if window.safeAreaInsets.top > CGFloat(0.0) {
        print("iPhone X")
        v.anchor(top:  view.safeAreaLayoutGuide.topAnchor, left: view.safeAreaLayoutGuide.leftAnchor, bottom: nil, right: view.safeAreaLayoutGuide.rightAnchor, paddingTop:-44, paddinfLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: window.safeAreaInsets.top)
    } else {
        v.anchor(top: view.topAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 0, paddinfLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 20)
    }

}

but it doesn't work.

What's the best approach in this case?

Thank you

Upvotes: 2

Views: 668

Answers (1)

Au Ris
Au Ris

Reputation: 4659

You have to tell your collectionView to adjust the insets:

if #available(iOS 11, *) {
    collectionView.contentInsetAdjustmentBehavior = .scrollableAxes
}

This will make sure your content will be inset enough so it's not overlapped by the iPhone X's status bar.

Upvotes: 3

Related Questions