如何在iOS 11上的iPhone X上获得黑色状态栏 [英] How to get a black statusbar on iPhone X on iOS 11

问题描述

默认情况下，iPhone X上的状态栏如下所示：

但我想实现这个目标：

我尝试将 preferredStatusBarStyle 设置为 lightContent ，但只有在将状态栏后面的背景设置为黑色。

为了修复圆角我最后添加了另一个圆角的子视图。

  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 =黑色状态栏！ 
 label.textAlignment = .center 
 roundedView.addSubview（label）
} 
 
覆盖var preferredStatusBarStyle：UIStatusBarStyle {
 return .lightContent 
 } 
} 
  

我想知道这是否是最佳方法..必须有实现这一目标的更好方法。

---

更新

这是一个可怕的想法，因为：

• 作为
  
  
  

  AutoLayout

  
  
  
  
  

  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.

  解决方案

  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

  这篇关于如何在iOS 11上的iPhone X上获得黑色状态栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！