Categories
ios iphone-x safearealayoutguide statusbar swift

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

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

enter image description here

But I would like to achieve this:

enter image description here

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:

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.