Search code examples
iosswiftios11iphone-xsafearealayoutguide

How do you set the status bar or safe area to remove white space on iPhone X?

I have added the option to use safe area guidelines yet when I view the app it appears to respect the safe area but theres some white space that I cant get rid of. I dont know what is causing it nor do I know how to change the color from white.

I've set the background color to what you see below. 

view.backgroundColor = UIColor(red:0.227, green:0.251, blue:0.294, alpha:1)

I've also set the white status bar style

UIApplication.shared.statusBarStyle = UIStatusBarStyle.lightContent

enter image description here

My main Storyboard

enter image description here

enter image description here enter image description here

Solution

  • When the view is visible onscreen, this guide reflects the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. (In tvOS, the safe area reflects the area not covered the screen's bezel.) If the view is not currently installed in a view hierarchy, or is not yet visible onscreen, the layout guide edges are equal to the edges of the view.

    You need to set constraints with safeArea Set top, bottom, leading, trailing constraints of webView with safeArea with constant 0, Hence your objects will not clip. enter image description here

    Programmatically as: 

     webView.translatesAutoresizingMaskIntoConstraints = false
        if #available(iOS 11.0, *) {
            let guide = self.view.safeAreaLayoutGuide
            webView.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
            webView.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
            webView.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true
            webView.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true
        }

    SafeAreaGuide