How to get a black statusbar on iPhone X on iOS 11

Question

By default the statusbar on an iPhone X looks like this:

But I would like to achieve this:

I tried setting the preferredStatusBarStyle to lightContent but it only worked after setting the background behind the statusbar to black.

To fix the rounded corners I ended up adding another subview with rounded corners.

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .black

        let roundedView = UIView(
            frame: CGRect(
                x: 0,
                y: UIApplication.shared.statusBarFrame.height,
                width: view.frame.width,
                height: view.frame.height
            )
        )
        roundedView.layer.cornerRadius = 10
        roundedView.layer.masksToBounds = true
        roundedView.backgroundColor = .white
        view.addSubview(roundedView)

        let label = UILabel(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 60))
        label.text = "Black statusbar!"
        label.textAlignment = .center
        roundedView.addSubview(label)
    }

    override var preferredStatusBarStyle: UIStatusBarStyle {
        return .lightContent
    }
}

I'm wondering if this is the best approach.. there must be a better way to achieve this.

---

UPDATE

This is a terrible idea because:

• As @Moritz points out, the Apple's guidelines explicitly forbids this:

Don't mask or call special attention to key display features. Don't attempt to hide the device's rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don't use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas either.

• The rounded corners at the top of the view might look nice, but you will have to add exceptions in the code to make sure the rounded corners are not shown on other iPhones. You will need to put this in all your ViewControllers / Storyboards.. That is not so great.

• The rounded corners at the bottom of the view will appear straight in screenshots, but the corners at the top (set manually) won't. This will be ugly when users share your app.

Answer 1

Safe Area Layout is a solution to your problem.

I tried following the solution in my existing projects and it works fine.

• Set black background color (or what ever you want) to main view of your view controller.
• Now add child view (with white background) and set its constraints relative to Safe Area Layout (or follow Top and bottom layout guide if Xcode version is below 9).
• Consider this child view (with white background) as a main view and process further design with it.

Here is sample snapshot with result, By enabling or disabling Safe Area layout, I tested and implemented.

FYI: In these snapshots, main view has red background and child view has blue background color.

Safe Area Layout:

AutoLayout