Bars and Bar Buttons
In iOS 7, the status bar is transparent, and other bars—that is, navigation bars, tab bars, toolbars, search bars, and scope bars—are translucent. As a general rule, you want to make sure that content fills the area behind the bars in your app.
Most bars also draw a blur behind them, unless you provide a custom background image for the bar.
iOS 7 introduces the barPosition
property for identifying bar position, which helps you specify when a custom background image should extend behind the status bar. The UIBarPositionTopAttached
value means that a bar is at the top of the screen and its background extends upward into the status bar area. In contrast, the UIBarPositionTop
value means that a bar is at the top of its local context—for example, at the top of a popover—and that it doesn’t provide a background for the status bar.
By default, all bar buttons are borderless. For details, see Bar Buttons.
The Status Bar
Because the status bar is transparent, the view behind it shows through. The style of the status bar refers to the appearance of its content, which includes items such as time, battery charge, and Wi-Fi signal. Use a UIStatusBarStyle
constant to specify whether the status bar content should be dark (UIStatusBarStyleDefault
) or light (UIStatusBarStyleLightContent
):
UIStatusBarStyleDefault
displays dark content. Use when light content is behind the status bar.
UIStatusBarStyleLightContent
displays light content. Use when dark content is behind the status bar.
In some cases, the background image for a navigation bar or a search bar can extend up behind the status bar (for details, see Navigation Bar and Search Bar and Scope Bar). If there are no bars below the status bar, the content view should use the full height of the screen. To learn how to ensure that a view controller lays out its views properly, see Using View Controllers.
In iOS 7, you can control the style of the status bar from an individual view controller and change it while the app runs. If you prefer to opt out of this behavior and set the status bar style by using the UIApplication
statusBarStyle
method, add the UIViewControllerBasedStatusBarAppearance
key to an app’s Info.plist
file and give it the value NO
false
.
Navigation Bar
A navigation bar helps users navigate through an information hierarchy and, optionally, manage screen contents.
iOS 7
iOS 6
|
iOS 7 |
iOS 6 |
---|---|---|
Bar style |
Translucent light (default) or translucent dark.
By default, the |
Opaque gradient blue (default) or opaque black.
By default, the |
Appearance |
A one-pixel hairline appears at the bottom edge. |
A drop shadow appears at the bottom edge. |
Tinting |
Use
Use |
Use |
Back button |
The Back control is a chevron plus the title of the previous screen. * |
The Back button is a bordered button that contains the title of the previous screen. |
* If you want to use a custom image to replace the default chevron, you also need to create a custom mask image. iOS 7 uses the mask to make the previous screen’s title appear to emerge from—or disappear into—the chevron during navigation transitions. To learn about the properties that control the Back button and mask image, see UINavigationBar Class Reference.
iOS 7 makes it easy to add a search bar to a navigation bar. For details, see Search Bar and Scope Bar.
If you create a background image for a navigation bar that uses the UIBarPositionTopAttached
bar position—or for a navigation bar within a navigation controller—make sure the image includes the status bar area. Specifically, create a background image that has a height of 64 points.
The following table describes how iOS 7 treats resizable navigation bar background images of various heights. (To learn how to specify a resizing mode for an image, see UIImage Class Reference.)
Height |
Resizing treatment |
Status bar background appearance |
---|---|---|
44 points |
Horizontally resized as appropriate (the image is not vertically tiled or stretched). |
Black, if using
Provided by the window background, if using |
Less than 44 points |
Vertically resized to 64 points if using Horizontally resized as appropriate. |
Provided by the bar background. |
64 points |
Horizontally resized as appropriate. |
Provided by the bar background. |
1 point |
Vertically resized to 64 points if using Horizontally resized as appropriate. |
Provided by the bar background. |
Avoid using an extra-tall background image to display a custom drop shadow below the navigation bar. This technique won’t work in iOS 7, because the extra height extends into the status bar area instead of below the navigation bar. If you want to add a drop shadow to your navigation bar, create a custom background image and use the shadowImage
property to specify a custom shadow image.
Search Bar and Scope Bar
A search bar accepts users’ text, which can be used as input for a search. A search bar can have a scope bar attached below it.
iOS 7
iOS 6
|
iOS 7 |
iOS 6 |
---|---|---|
Bar style |
Translucent light (default) or translucent dark.
By default, the |
Opaque gradient blue (default) or opaque black.
By default, the |
Search bar style |
Prominent (default) or minimal. A prominent search bar has a translucent background and an opaque search field. A minimal search bar has no background and a translucent search field. |
– |
Appearance |
A one-pixel hairline appears at the bottom edge. |
A drop shadow appears at the bottom edge. |
Tinting |
Use
Use |
Use |
If you create a background image for a search bar that uses the UIBarPositionTopAttached
bar position, make sure the image height includes the height of the status bar. If you create a resizable background image, see Table 5-1 for details on how iOS 7 resizes images of various sizes.
In iOS 7, UISearchDisplayController
includes the displaysSearchBarInNavigationBar
property, which you can use to put a search bar in a navigation bar, similar to the one in Calendar on iPhone:
A scope bar lets users define the scope of a search.
iOS 7
iOS 6
|
iOS 7 |
iOS 6 |
---|---|---|
Bar style |
Translucent light (default) or translucent dark.
By default, the |
Opaque gradient blue (default) or opaque black.
By default, the |
Appearance |
A one-pixel hairline appears at the bottom edge. |
A drop shadow appears at the bottom edge. |
Tinting |
Use
Use |
Use |
Tab Bar
A tab bar gives people the ability to switch between different subtasks, views, and modes.
iOS 7
iOS 6
|
iOS 7 |
iOS 6 |
---|---|---|
Bar style |
Translucent light (default) or translucent dark.
By default, the |
Opaque gradient black (default). In iOS 6, the tab bar doesn’t include the |
Appearance |
If provided, a custom selection indicator image is used. |
A selection indicator image is drawn behind the tab icon. |
Item positioning |
Use
In a centered-item bar, you can use |
In iOS 6, the tab bar doesn’t include the |
Tinting |
Use
Use |
Use |
If you create a custom icon for a tab bar item, you should also use the selectedImage
property of UITabBarItem
to specify a second icon that represents the selected state of the item. If you don’t provide a selected version of a custom icon, the same icon is used in both states. For some design guidance on creating a custom tab bar icon, see Bar Button Icons.
Toolbar
A toolbar contains controls that perform actions related to objects in the current screen or view.
iOS 7
iOS 6
|
iOS 7 |
iOS 6 |
---|---|---|
Bar style |
Translucent light (default) or translucent dark.
By default, the |
Opaque gradient blue (default) or opaque black.
By default, the |
Appearance |
A one-pixel hairline appears at the top edge. |
A drop shadow appears at the top edge. |
Tinting |
Use
Use |
Use |
Related information |
|
– |
If you create a resizable background image, see Table 5-1 for details on how iOS 7 resizes images of various sizes.
Bar Buttons
In iOS 6, bar buttons are either bordered or borderless. In iOS 7, all bar buttons are borderless.
For clarity, iOS 7 apps sometimes use titles in bar buttons instead of icons. For example, Calendar in iOS 7 uses Inbox instead of a custom icon:
iOS 7
iOS 6
In earlier versions of iOS, custom bar button art was automatically treated as a template image. (A template image is used as a mask to create the final image.) In iOS 7, you can use the following UIImage
properties to specify whether custom art should be treated as a template image or be fully rendered:
UIImageRenderingModeAlwaysTemplate
. The image should be treated as a template image.UIImageRenderingModeAlwaysOriginal
. The image should be rendered as is.
If you don’t specify a treatment for your image—or you opt out of a treatment in a particular situation—the image receives the default treatment defined by the enclosing view. For example, by default bars use the template treatment, whereas by default a slider uses the fully rendered treatment.
Copyright © 2018 Apple Inc. All rights reserved. Terms of Use | Privacy Policy | Updated: 2016-03-22