Where would Batman be without his utility belt, Martha Stewart without her glue guns, or MacGyver without his paperclips and chewing gum? Getting stuff done requires tools, and the toolbar is the onscreen toolbox for providing gadgets for editing, manipulating, or sharing content. If you need to give people controls for working the current view, give 'em a toolbar. The toolbar anchors the bottom edge of the screen, displaying a collection of text buttons or unlabeled icons. Don't confuse the roles of the toolbar and the tab bar (page 106). Tab-bar buttons are for navigation, for moving about your app's main features, but toolbar buttons work on the current screen of content. Put another way, tab bars think globally, and toolbars act locally. The toolbar's gadgets and gizmos are for doing stuff with what you're looking at right now, providing the commands to manage the immediate content.
Figure 5-9. The toolbar glues itself to screen bottom, as shown here in Mail (left) and Calendar. In portrait orientation, the toolbar is 44 pixels tall as labeled above, but it compresses to 32 pixels when you flip to landscape. (See Chapter 9 for more about managing landscape layouts.)
When viewing a message in Mail, for example, the toolbar offers options to check for new mail, move the message to a folder, delete the message, reply or forward, or create a new message. Safari's toolbar provides similarly action-oriented options to work with the content in the main browser view. In many cases, a toolbar button triggers the display of a modal view (page 117) or action sheet (page 169), but you can use them to kick off a background process (refresh your email list in Mail), filter the displayed content (direct messages in Twitter), or display the content in a new way (event list versus calendar view in Calendar).
Figure 5-10. Database app Bento (left) stacks a toolbar on top of a tab bar. Add the navigation bar to the mix, and you've got three stripes of controls, lots of real estate dedicated to interface chrome. Cocktails+ (below) has a better solution. The app provides a tab bar to navigate its collection of cocktail recipes, but hides the tab bar on the actual recipe page to make room for the toolbar.
Load up your toolbars with any combination of controls, icons, and text. You can design your own icons, or dip into the collection supplied by Apple, which you'll explore in "So an Icon Goes into a Bar . . .". Just don't let too many controls elbow their way into the toolbar. An app's main controls need breathing room for both visual clarity and easy tap targets. Apple recommends limiting the number of icons to five. You can adjust the toolbar's transparency, or choose any color for it, just like the navigation bar. Be sure to coordinate the toolbar's appearance with the navigation bar so that the two are a matched pair. (For more about treating colors and transparency of these controls, see Gussying Up Familiar Pixels.)
Avoid stacking a toolbar and tab bar on the same screen. Jamming so many controls in such close proximity at the screen's bottom edge is a recipe for tap mistakes, and all that stacked interface chrome also squeezes available space for the main event—your app's content. If you have a tab-bar app, and you'd like to include a toolbar on detail views, consider hiding the tab bar on that screen.