Developer’s Guide to the iOS 7 Status Bar

Written by: on September 18

Among the many visual changes in iOS 7, one of the most noticeable as a developer is the new status bar.

In previous versions of iOS, the status bar was untouchable other than color adjustments. iOS 7 makes the status bar transparent, and, if your view doesn’t make use of a UINavigationController, then the 20 points of space at the top of the screen that the status bar sits on top of becomes usable space. This change makes the UINavigationController a major factor in the development of your app.

UINavigationController and the iOS 7 Status Bar

If your app uses a UINavigationController with every view, then, as far as the status bar is concerned, there will be little for you to worry about when developing for or transitioning to iOS 7. When a UINavigationController is present, the UINavigationBar will automatically be placed below the status bar (the standard 20 point offset from the top of the screen that we are accustomed to from previous iOS versions). The background of the status bar will be modified to match the UINavigationBar below it. The status bar will inherit the color and transparency of the UINavigationBar. Additionally, the color of the text and content in the status bar will be adjusted based on the UIBarStyle (UIBarStyleDefault or UIBarStyleBlack) of the UINavigationBar below it. In this case, the only way to make changes in how the status bar looks is to make changes to the UINavigationBar.

The iOS 7 Status Bar without a UINavigationController

If views within your app don’t make use of a UINavigationController, then the iOS 7 status bar becomes a design and development task, since you now have control over what appears behind the content of the status bar. If your app only targets iOS 7 and greater, then handling the new status bar is very straight forward. You can place a 20 point tall view behind the status bar if you want direct control over what appears behind the status bar, or you can leave it be if it does not interfere visually with the content at the top of your view. The one adjustment you may want to make in this case is the color of the text and content within the status bar. The default color of the content in the status bar is black and this can cause the status bar to become unreadable if the content behind the status bar is dark. In order to remedy this issue you can set the UIStatusBarStyle of your application and/or views. UIStatusBarStyleLightContent changes the color of the content in the status bar to white; alternately, UIStatusBarStyleDefault sets the color of the status bar content to black as demonstrated below. Black and white are currently the only available status bar content colors.

Status-Bar-iOS-7-Light-Dark

If you want the to set the color of the text and content in the status bar throughout the entire app you have two options. First, you can set the UIStatusBarStyle key in your Info.plist to UIStatusBarStyleLightContent or UIStatusBarStyleDefault. Second, you can use the UIApplication method setStatusBarStyle:animated:. In order to use this method you must set the UIViewControllerBasedStatusBarAppearance key in your Info.plist to NO. It is worth noting that this method of changing the UIStatusBarStyle app-wide can be done while the app is running. Below is an example of how to use this method.

[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent animated:NO];

If you want to change the color of the text and content in the status bar on a view-by-view basis you can take advantage of a new UIViewController method. To use this method you must set the previously mentioned UIViewControllerBasedStatusBarAppearance key in your Info.plist to YES. Below, I have demonstrated how this new method, preferredStatusBarStyle, can be overridden to adjust the color of the content in the status bar.

- (UIStatusBarStyle)preferredStatusBarStyle
{
     return UIStatusBarStyleLightContent;
}

Supporting Older Versions of iOS Alongside iOS 7

Handling the iOS 7 status bar can become a greater task when your app must support older versions of iOS alongside iOS 7. The extra 20 points of window size that is gained with the new status bar (when not using a UINavigationController) can alter view layouts, since the window height is 20 points taller in iOS 7. The particular issues that the 20 point discrepancy can create seem to be numerous and widely varying based on many factors, including the content of your views, how they function, and how they are built. These issues usually need to be solved on a case by case basis due to their diversity. Apple provides a couple of tools designed to help you solve these problems.

iOS-7-Status-BarThe most robust way to handle the 20 point size difference is Auto Layout. Having your views laid out relative to each other and the top level superview can make the 20 point shift a non-issue, as your views will shift appropriately. If you aren’t using Auto Layout, Interface Builder provides you with tools to handle the screen size difference between iOS 7 and the older versions. When Auto Layout is turned off, you will notice an area in the sizing tab of the utility area (right pane) of Interface Builder that allows you to set iOS 6/7 Deltas. Deltas can be set individually for each view and work as you would expect. If your storyboard or nib is set to view as iOS 6, then setting the deltas will cause that view to be shifted and/or resized by the set delta amount when run in iOS 7. Alternately, if your storyboard or nib is set to view in iOS 7, then the deltas will be applied when run in iOS 6. Both of these tools help you to support older versions of iOS alongside iOS 7. The last option is to programmatically account for the 20 point difference by setting frame sizes or origins. This approach is much less advisable because it can cause your code to be riddled with iOS version checks, but the code tends to get very complicated when supporting multiple device orientations.

iOS 7 presents designers and developers with new found freedom over the appearance of the status bar, but that freedom brings new challenges along with it. Hopefully, this guide will help you tackle these new challenges and take full advantage of the new freedom to incorporate the status bar into your apps.

This is the fifth part in an 11-part Developer’s Guide to iOS 7. You can find the full guide here. For more information on how Double Encore can help you prepare your company for the changes in iOS 7, please email us.

Taylor Case

Taylor Case is a Software Engineer at Double Encore specializing in iOS Development. Taylor also enjoys cycling, pina coladas, and getting caught in the rain.

Article


Add your voice to the discussion: