Navigation bar, label bar, toolbar, and status bar

Status Bar, navigation bar, label bar and toolbar for iPhone applicationsProgramHas a specially defined view of appearance and behavior. They do not need to appear in every application (often none in those amazing applications), but once you decide to make them appear in the application, you must use these views correctly. The reason is that users who use iPhone OS devices are familiar with the features they provide, and are familiar with the information they display and the type of features they execute.

Status Bar

The status bar displays important information related to your device, including phone signal strength, current network connection, and power usage. Figure 6-1 shows an example of the status bar.

Figure 6-1 A status bar containing important information required by the user

Although a full screen application can hide the status bar, you should carefully consider this design. People always want to see the power of the current device. Hiding this information will force users to exit your application to obtain power information, which is not an ideal user experience.

For example, when the photo application displays all the photos in the camera in a full screen view, the status bar, navigation bar, and toolbar gradually become invisible after a few seconds. This approach is appropriate because in the photo application, users only focus on the content of the photo and do not interact with the application. However, you can click the screen to display the status bar, navigation bar, and toolbar again.

If you want to hide the status bar from time to time in the application, you should be able to regain the status bar by clicking the screen. Unless you have a very convincing reason, it is best to avoid re-displaying the status bar in a custom way, because the user may not find or remember this way.

Although it is difficult for you to control the content of the status bar, you can customize its appearance and behavior to a certain extent. Specifically, you can:

Set whether the network activity indicator should be visible. If a network operation that your application is performing lasts for more than a few seconds, the network activity indicator should be displayed. If the network operation is completed within a few seconds, the network activity indicator is not displayed, because it may disappear before the user realizes its existence. (IN YOURCode, You can use
Uiapplication
Method
Networkactivityindicatorvisible
To control the visibility of the indicator .)

Specifies the color of the status bar. You can select gray (default color), opaque black or translucent black (that is, the Alpha value is 0.5 black ). Figure 6-2 shows these styles. (Please note that you should
Info. plist
Set a value in the file to specify the style of the status bar. For more information, see the iPhone application programming guide .)

Set whether the status bar color should be changed in Animation Mode. (Please note that the animation effect will cause the old status bar to slide out of the screen until it disappears, and the new status bar will slide to the corresponding position .)

Figure 6-2 three styles of the status bar

Make sure that the appearance of the status bar matches the rest of your application. For example, if the navigation bar is not transparent, avoid using a translucent status bar.

Navigation Bar

The navigation bar is located at the top of the application screen, under the status bar. The navigation bar usually displays the title of the current view, including the navigation control, and can also include the control acting on the View content as appropriate. The navigation bar is useful for efficiency-type applications (see "Efficiency-type applications" for details) because these applications usually display information in a hierarchy.

The navigation bar has two purposes:

Activate navigation between different views in the Application

Provides some controls for managing entries in the view.

Figure 6-3 shows examples of these two uses.

Figure 6-3 Navigation Pane with navigation controls and content management controls

 

 

 

 

Content in the navigation bar

You can center the title based on the width of the current view title, as shown in 6-4. The initial view in the efficiency-type application should contain a navigation bar, where only the title of the first view is displayed, because the user has not switched to another location.

Figure 6-4 display the navigation bar of the current view title

Once you switch to another view, the navigation bar should change its title to the new view title, and provide a return button marked as the title of the previous view. For example, figure 6-5 shows the navigation bar in the "Date and Time" setting. This setting is part of the "General" setting view.

Figure 6-5 Navigation Pane with navigation controls

The standard return button provides a reliable way for users to return to the previous screen, so do not change the button behavior. In particular, you should avoid creating multiple return buttons, such as the buttons shown in 6-6.

Figure 6-6 multi-part return buttons are not recommended

Multiple Return buttons may cause the following column problems:

The increasing width of Multiple Return buttons occupies the space for displaying the title of the current view.

The status of a specified segment cannot be specified.

The more segments, the smaller the clickable area of each segment, which makes it difficult for users to accurately click a specific segment.

When the browsing layers are deep, you cannot determine which layers of content to display.

If you think that the path is displayed without the help of Multiple Return buttons, the user may be confused. This means that the user must browse a deep information level to find the content they need. To solve this problem, you should try to flatten the information layer.

In addition to the return button, the navigation bar can contain another button on the right of the title. If you do not need to display the return button (because your application does not support hierarchical navigation), you can also choose to display a button on the left of the title for the View content, for example, the "edit" button. Figure 6-7 shows an example.

Figure 6-7 Navigation Pane containing controls for managing View content

To learn how to implement the navigation bar in your application, see "navigation controller ".

As you can see in the preceding example, the buttons in the navigation bar are surrounded by a circle with edges. In iPhone OS, this style is called a border style. Border styles must be used for all controls in the navigation bar. In fact, even if you place a non-formatted (no border) control on the navigation bar, it will be automatically converted to a border style.

You can design your own icons as buttons in the navigation bar, or use the predefined buttons provided by iPhone OS. For more information about the buttons you can use, see "standard buttons for the toolbar and navigation bar ".

 

 

Although you can specify a font for all text displayed in the navigation bar, we recommend that you use a system font for readability. When you use an appropriate uikit programming interface to create a navigation bar, its title is automatically displayed in the system font.

Navigation bar size and color

When the orientation of a device changes from portrait to landscape, the height of the navigation bar automatically changes (you should not specify its height by programming ). When the device is in the horizontal direction, a narrower navigation bar can leave more space for the content on the screen. When designing the icons of the navigation bar control and the layout on the design screen, you must calculate the difference in the height.

You can specify the color and translucent effect of the navigation bar, which are consistent with the overall appearance of your application and other columns (toolbar, label bar, and status bar. You can use a custom color or select one of the following standard colors:

Blue (default color)

Black

If it helps the appearance of your application, you can also add translucent effects to the navigation bar. When you use a translucent navigation bar, the screen will give you a larger visible area, which is ideal for horizontal placement of devices. Be sure to avoid mixing the translucent navigation bar with the black and opaque Status Bar (however, the translucent navigation bar can be displayed together with the gray and opaque status bar ).

The appearance of the navigation bar should be consistent with that of other columns in the application. For example, if you use a translucent navigation bar, do not use it with an opaque toolbar. In addition, avoid changing the color or translucent effect of the navigation bar on different screens in the same direction.

 

Toolbar

If your application provides you with a series of actions that can be performed in the current context, you can provide you with a toolbar. The toolbar is located at the bottom edge of the screen and contains buttons used to perform actions related to objects in the current view. The toolbar is not used to switch between different modes of the application. If you need to do this, you should use the label bar instead of the toolbar (for more information, see "label bar ").

For example, when a user views a message in the mail application, the application provides a tool bar, in addition to checking new emails and writing new emails, the tool bar also contains the tool for deleting, items for replying and moving messages. In this way, even if you stay in the context of message display, you can still use the commands they need to manage their emails. Figure 6-8 shows the scenario.

Figure 6-8 toolbar with functions provided in the current context

Toolbar content

The toolbar displays items on the toolbar at an equal distance within its width range. It is best to limit the number of items displayed on the toolbar so that users can easily click on the items they need. We recommend that you use 44x44 pixels in the click area of the user interface elements. Therefore, it is reasonable to provide you with the following five toolbar items. The example in Figure 6-9 shows a toolbar example with moderate spacing.

Figure 6-9 Toolbar with proper spacing

Items in Figure 6-8 and figure 6-9 do not have borders. In iPhone OS, this style is called the unformatted style. (For the border style example, see Figure 6-7 .) Although you can use a button with a border style in the toolbar or a button without a format, do not mix the two styles in the same toolbar.

You can design your own icons for the toolbar buttons, or make full use of the predefined buttons provided by iPhone OS. (For more information about available buttons, see "standard buttons for the toolbar and navigation bar ".) If you select the create custom toolbar button, keep them in the same size as possible to get a uniform and attractive appearance.

Toolbar size and color

When the orientation of a device changes from portrait to landscape, the height of the toolbar automatically changes (you should not specify the height of the device in the program ). When the device is in the horizontal direction, a narrower toolbar can leave more space for the content on the screen. When designing the toolbar button icon and the layout on the design screen, you must calculate the difference in height.

You can specify the color and translucent effect of the toolbar to be consistent with the overall appearance of the application and other columns (that is, the navigation bar, label bar, and status bar. You can use a custom color or select one of the following standard colors:

Blue (default color)

Black

If it helps the appearance of your application, you can also add a translucent effect to the toolbar. When you use a translucent toolbar, the screen will give you a larger visible area, which is ideal for horizontal placement of devices.

The appearance of the toolbar must be consistent with that of other columns in the application. For example, if you use a translucent toolbar, do not use it with an opaque navigation bar. In addition, do not change the color or translucent effect of the toolbar on different screens in the same direction.

 

Label bar

If your application provides different views for the same group of data or different subtasks related to the overall functions of the application, you may want to use the tab bar. The tab bar appears at the bottom of the screen.

The tab bar enables users to switch between different modes or views of the application, and users should be able to enter these modes from anywhere in the application. However, the label bar should never be used as a toolbar, the difference is that the buttons on the toolbar work for the elements in the current mode (for more information about the toolbar, see "toolbar ").

For example, on the iPhone, iPod uses tabs such as podcasts, artists, videos, and playlists, allowing users to select the parts they are interested in their media favorites. In addition, the clock application also uses the tab bar to allow users to access the four features of the program, namely "World Clock", "Alarm Clock", "Stopwatch" and "timer ". Figure 6-10 shows how tags are selected in the tab bar to change the view of the clock program. Note the label bar in Figure 6-10, how to keep the labels visible in different clock application modes. This allows users to easily see which mode they are in and access all the modes of the clock application no matter which mode they are currently in.

Figure 6-10 use the label bar to switch the application view

The label bar uses the Label display icon and text. These labels have the same width and are both black backgrounds. When a tag is selected, its background is highlighted, and the image in the tag is highlighted. Figure 6-11 shows this scenario.

Figure 6-11 selected tags

Note: The label bar does not change the opacity and height regardless of the device direction.

 

The iPhone OS provides a series of icons for tags, such as icons like "functions" and "bookmarks" tab items in Figure 6-11. If you choose to use these icons, make sure that they are used in accordance with the meaning of the icon. For more information about the label bar icons that you can use, see "Standard icons for the label bar ".

Provide additional labels

If the tag bar of your application contains only five or less tags, the iPhone OS can display them all at a distance from the tag bar, as shown in 6-12.

Figure 6-12 up to five tags can be displayed in the tag bar of the iPhone OS

If the tag bar of your application contains more than five tags, iPhone OS displays four tags in the tag bar and adds a "more" tag, as shown in Figure 6-11.

After you click "more", you can view the list of additional tags on a single screen, as shown in 6-13.

Figure 6-13 when a user clicks the "more" tag, the additional tag is displayed.

The "more" screen can also contain an "edit" button. You can click this button to configure the tab bar to display the most commonly used tags. For example, when a user clicks the edit button on the "more" screen of the iPod program, they will see the "configuration" screen from 6 to 14.

Figure 6-14 when an application has more than five labels, you can select to display their favorite labels on the tab bar.

Note that the iPod uses the same tag icon in the above three tabs ("more" screen and "configuration" screen. This helps you determine that the icon represents the same meaning wherever it appears.

Mark tags in the tab bar

You can display a label on the label to communicate with the user in a low-profile, inconspicuous way. Some information may not be indispensable in a user's task or context, but they are very helpful to the user. Therefore, the tagged feedback method is suitable for transmitting this information.

By marking a specific tag, you can associate the information indicated by the tag with a specific pattern in your application-or even non-current pattern. Figure 6-15 shows an example of tag.

Figure 6-15 Mark uploaded in the tag bar

Note that if you have registered the apple notification PUSH Service and you are allowed to display tags, you can also display tags on the application's main screen. Please refer to "enable push notification" to learn more about how this content is implemented.