jkdqra
Last Updated: February 25, 2016
·
5.09K
· mwielbut
Profile pic 02

iOS: Create a secondary status bar for displaying in-app messages

I was working on an iPhone app where we wanted to show a network status notification whenever the user lost connectivity with the service.
Originally, the idea was to set a text message within the iPhone status bar (where the time is usually displayed). Unfortunately, Apple does not provide an in-app API for manipulating the status header so several alternative implementations exist where a secondary status bar is layered on top of the existing one with a custom message.

and probably many more...

I didn't really like the idea of covering the default status bar from a design perspective because the existing status information was a key part of what we wanted to show. If we're displaying an "Network connection lost..." message, the first thing the user will do is look at their connectivity bars. If this is covered, it's just confusing. Also, blocking the time and battery life indicators is annoying.
Lastly, if you cover the status bar for more than a few minutes, Apple will certainly reject your App.

The solution I came up with was to display a secondary status bar, that would reveal underneath the current one. This affords us the full screen width for displaying a status message, and whatever icons we want to show.

A screenshot of the status bar, hidden, and revealed:

Hidden

Revealed

The final solution was designed using the IOS 5 container view controller concepts - similar to the Navigation Controller. You simply instantiate the StatusBarController within your AppDelegate and pass in your existing root controller. The StatusBarController injects your root controller as a child controller and it's view as sub view and provides the functionality to display and hide a secondary status bar. When the status bar is revealed the frame of the root controller will be updated with the new boundaries - this does not "overlay" the new status bar overtop your content. Methods are provided to animate the status bar as well, and a delegate protocol is defined to notify when the status bar is hidden or revealed.

A full working example is available on GitHub:
https://github.com/mwielbut/StatusBarMessageExample

Hope someone else finds this useful!

Note: the currently version only supports sold black status bars - feel free to play with it to enhance for IOS 7 or other status bar colors.

Say Thanks
Respond