iOS 7 status bar back to iOS 6 default style in iPhone app?

Question

In iOS 7 the UIStatusBar has been designed in a way that it merges with the view like this:

Answer 1

Here another approach for projects that make extensive use of the Storyboard:

GOAL:

Goal of this approach is to recreate the same status bar style in iOS7 as there was in iOS6 (see question title "iOS 7 Status Bar Back to iOS 6 style?").

SUMMARY:

To achieve this we use the Storyboard as much as possible by shifting UI elements that are overlapped by the status bar (under iOS 7) downwards, whilst using deltas to revert the downwards layout change for iOS 6.1 or earlier. The resulting extra space in iOS 7 is then occupied by a UIView with the backgroundColor set to a color of our choosing. The latter can be created in code or using the Storyboard (see ALTERNATIVES below)

ASSUMPTIONS:

To get the desired result when following the steps below, it is assumed that View controller-based status bar appearance is set to NO and that your Status bar style is either set to "Transparent black style (alpha of 0.5)" or "Opaque black style". Both settings can be found/or added under "Info" in your project settings.

STEPS:

• Add a subview to the UIWindow to serve as your status bar background. To achieve this, add the following to your AppDelegate's application: didFinishLaunchingWithOptions: after makeKeyAndVisible

  if (NSFoundationVersionNumber > NSFoundationVersionNumber_iOS_6_1) {
      UIView *statusBarBackgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, yourAppsUIWindow.frame.size.width, 20)];
      statusBarBackgroundView.backgroundColor = [UIColor blackColor];
      [yourAppsUIWindow addSubview:statusBarBackgroundView];
  }
  

• Since you programmatically added a background for iOS 7 ONLY, you will have to adjust the layout of your UI elements that are overlapped by the status bar accordingly whilst preserving their layout for iOS6. To achieve this, do the following:

  • Ensure that Use Autolayout is unchecked for your Storyboard (this is because otherwise "iOS 6/7 Deltas" is not shown in the Size Inspector). To do this:
    • select your Storyboard file
    • show Utilities
    • select "Show the File Inspector"
    • Under "Interface Builder Document" uncheck "Use Autolayout"
  • Optionally, to help you monitor the layout changes for both iOS 7 AND 6 as you apply them, select the "Assistant Editor", select "Preview" and "iOS 6.1 or earlier":
  • Now select the UI element you want to adjust so it isn't overlapped by the status bar anymore
  • Select "Show the Size Inspector" in the Utilities column
  • Reposition your UI element along the Y-axis by the same amount as the statusbar bg height:
  • And change the iOS6/7 Deltas value for Y by the same NEGATIVE amount as the statusbar bg height (Note the change in the iOS 6 preview if you're using it):

ALTERNATIVES:

To add even less code in storyboard-heavy projects and to have the statusbar background autorotate, instead of programmatically adding a background for your statusbar, you could add a colored view to each view controller that sits at the very top of said viewcontroller's main view. You would then change the height delta of this new view to the same negative amount as your view's height (to make it disappear under iOS 6).

The downside of this alternative (although maybe negligible considering the autorotate compatibility) is the fact that this extra view is not immediately visible if you are viewing your Storyboard for iOS 6. You would only know that it's there if you had a look at the "Document Outline" of the Storyboard.