A tab bar shows people where they are in your app and helps them navigate elsewhere or perform an action, such as a search. When the Library tab is open, the tab bar stays pinned near the top of the screen. For all other tabs, the tab bar scrolls with the content and can be scrolled offscreen.
In general, use a tab bar to organize information at the app level. A tab bar is a good way to flatten your information hierarchy and provide access to several peer information categories or modes at once.
In a live-viewing app, organize tabs in a consistent way. For the best experience, live-streaming apps should use tabs to organize content in the following order:
- Live content
- Cloud DVR or other recorded content
- Other content
For additional guidance, see Live-Viewing Apps.
Avoid having too many tabs. Each additional tab increases the complexity of your app, making it harder for people to locate information. Aim for a few tabs with short titles or glyphs to avoid crowding and causing tabs to truncate. For more guidance, see Tab Bar Items.
Don’t remove or disable a tab when its function is unavailable. If tabs are available in some cases but not in others, your app’s interface becomes unstable and unpredictable. Ensure that all tabs are always enabled, and explain why a tab’s content is unavailable. For example, the Music tab in iTunes shows a screen explaining how to download songs if there are no songs to list.
Tab Bar Customization
A tab bar is highly customizable. For example, you can:
- Specify a tint, color, or image for the tab bar background
- Choose a font for tab items, including a different font for the selected item
- Specify tints for selected and unselected items and for the selection indicator
- Add button images, such as play and search
In addition, you can display a logo or other information when the tab bar is visible by supplying accessory views that appear near the leading and trailing ends of the tab bar.
By default, a tab bar is translucent, and only the selection indicator is opaque. When the tab bar is focused, the selection indicator includes a drop shadow that emphasizes its selected state. The height of a tab bar is 68 points and its top edge is 46 points from the top of the screen.
Create an accessory view that fits with your tab bar. Place an accessory view against the left or right edges of the safe margin to ensure that there's enough room between it and the end of the tab bar. Use the following values for guidance:
|Maximum width||Maximum height|
|200 pt||68 pt|
Use badging to communicate unobtrusively. You can display a badge—a red oval containing a white number or exclamation point—on a tab to indicate that new information is associated with that view or mode.
Use badging judiciously. Don’t overwhelm people by presenting huge amounts of new or important information.
For developer guidance, see UITabBarController.
Tab Bar Items
If there are more items than can fit in the tab bar, the system truncates the rightmost item by applying a fade effect that begins at the right side of the tab bar. If there are enough items to cause scrolling, the system also applies a truncating fade effect that starts from the left side.
Prefer short, text-based tab titles. Short titles help you avoid crowding and truncation. You can also avoid crowding by using glyphs with short titles, but this works only for universally recognized symbols like search, settings, or play. Using an unfamiliar symbol without a descriptive title can confuse people.
Don't use glyphs to let you pack more items into the tab bar. Even though glyphs generally take less space than text, you don't want to overwhelm people with too many choices in the tab bar.
Use meaningful nouns or verbs as tab titles. A title clearly identifies the type of content to expect when a tab is selected. In general, titles should be nouns (such as Music, Movies, and Sports), but in some cases, verbs or verb phrases may be more appropriate (such as Watch Now).