How do I Configure the Status Bar in iOS?

This lesson describes how to control the style and visibility of the iOS status bar from within an iPhone application.

Sample code is provided.

Note: In most recent versions of iOS, the status bar might display differently compared to these screenshots.

Introduction

The iOS status bar usually runs along the top of the iPhone window and provides useful information on the status of the device. This can include the current time, the remaining battery life and the carrier strength

For many applications this is a desirable feature, but other applications provide a better user experience when the status bar is hidden or takes on a different form, for example when watching a movie.

As the user interacts with an application and the displayed information changes, for example when switching between a movie mode and a control mode, it man be necessary to toggle the status bar.

Status Bar Visibility and Styles

The status bar is either visible or invisible. When the status bar is visible, it can have one of three styles, either default, opaque or translucent. When the status bar is visible and is either default or opaque, the status bar lies above the content of the application and pushes the application down the screen to make space for the status bar. The application needs to take this behavior into account when controlling the status bar. If the status bar is translucent, the application is allowed to take up the entire display area and the status bar is displayed on top of the application. Parts of the application appear to shine through the status bar.

The Default Status Bar

The Default Status Bar

The status bar in this example is visible and uses the default style.

The Opaque Status Bar

The Opaque Status Bar

The status bar in this example is visible and uses the opaque style.

The Hidden Status Bar

The Hidden Status Bar

The status bar in this example is hidden and the application uses the entire display area. Notice the exposed light gray area at the bottom of the screen. This area was not visible in the previous examples as the status bar pushed the application down the screen in order to display the status bar.

The Translucent Status Bar

The Translucent Status Bar

The status bar in this example is visible and uses the translucent style. You can see how the status bar and the application lie on top of each other. Notice in this example that the application also takes up the entire display area and exposes the light gray area at the bottom of the screen.

Controlling the Status Bar Visibility

The status bar is toggled using the commands iphoneShowStatusBar and iphoneHideStatusBar. To test this feature, you may want to place these commands in a check box with the name StatusBarDisplayed and the following code:

on mouseUp
	if the hilite of button "StatusBarDisplayed" is true then
		iphoneShowStatusBar
	else
		iphoneHideStatusBar
	end if
end mouseUp

Setting the Status Bar Style

The status bar style is set by the command iphoneSetStatusBarStyle, which uses an argument to specify the display style of the status bar. Supported display style arguments are: default, opaque and translucent.

In order to test this feature, you may want to set up three radio buttons in a group and provide the following code for the buttons:

In the first button script write:

on mouseUp
	iphoneSetStatusBarStyle ("default")
end mouseUp

In the second button script write:

on mouseUp
	iphoneSetStatusBarStyle ("opaque")
end mouseUp

In the third button script write:

on mouseUp
	iphoneSetStatusBarStyle ("translucent")
end mouseUp

Catching the Resize Event

An application needs to be aware of resize events as a result of manipulating the status bar. The following example code shows you how to capture resize events and determine the new size of the display area. The display dimensions are written to a text field with the name cardSize. This code can be added to the card script with the name Status Bar Configuration:

on resizeStack pNewWidth, pNewHeigh
	set the text of field "cardSize" to "Card Size:" && \
		the width of card "Status Bar Configuration" & \
		"X" & the height of card "Status Bar Configuration"
end resizeStack

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.