Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Apple > iPhone

  • Print
  • + Share This
This chapter is from the book

Toolbars

You can create toolbars in iPhone applications using the UIToolbar class. A toolbar usually spans the entire width of the display and is aligned to either the top or the bottom of the screen (Figure 4.26).

Figure 4.26

Figure 4.26 Most of the controls sit on the toolbar in Safari.

To create a toolbar:

  1. As with many other views, you can create a toolbar with the initWithFrame: method. Use the size of the main view to calculate the y position of the toolbar. This is important since you may not know the orientation of the iPhone and want the toolbar to sit at the bottom of the screen.
    CGSize viewSize = self.view.frame.size;
    float toolbarHeight = 44.0;
    CGRect toolbarFrame = CGRectMake (0,viewSize.height-toolbarHeight,viewSize.width,toolbarHeight);
    UIToolbar *myToolbar = [[UIToolbar alloc] initWithFrame:toolbarFrame];
    
  2. Set the autoresizingMask property of the toolbar to ensure that it stays in the same position (in this case, aligned to the bottom of the screen) even if the user rotates their iPhone.
    myToolbar.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizing FlexibleLeftMargin |
    UIViewAutoresizingFlexibleRight Margin | UIViewAutoresizing FlexibleTopMargin;
    
  3. You can change the color and translucency of the toolbar using the tintColor and translucent properties:
    myToolbar.tintColor = [UIColor redColor];
    myToolbar.translucent = YES;
    

Toolbar items

Buttons you add to a toolbar are known as toolbar items and are created using the UIBarButtonItem class. Several types of buttons are available, and you can create them in several ways:

  • The simplest way to create a button with some title text is by using the initWithTitle:style:target:action: method (Figure 4.27). Use the target and action parameters to indicate which method to call when the button is pressed.
    Figure 4.27

    Figure 4.27 A toolbar showing the three toolbar item styles available for the initWithTitle:style:target:action: method.

  • Similarly, the initWithImage:style:target:action: method lets you create a button with an image instead of text. The button will automatically resize its width to that of the image.
  • You can create a button from your own custom UIView subclass using the initWithCustomView: method. However, you must set the target and action properties manually.
  • The final way is to use the initWithBarButtonSystemItem:target:action: method.

The iPhone SDK offers a set of predefined buttons, known as system items, to ensure your application adheres to the iPhone interface guidelines. Use them whenever possible.

There are system items for play, pause, and stop buttons, as well as for search, trash, and camera (Figure 4.28). For a complete list of system items available, refer to the UIBarButtonSystemItem type in the developer documentation.

Figure 4.28

Figure 4.28 Some of the available system item styles.

You will often use two particular system item types: UIBarButtonSystemItemFlexibleSpace and UIBarButtonSystemItemFixedSpace. Both are not visible and represent spaces on a toolbar. The flexible-space item lets you force a button to the other side of the toolbar, while the fixed-space item simply lets you add a space between buttons. You can set the width property of a fixed-space item to determine how wide you want the space to be.

Once you've created these buttons, add them to an NSArray and then use the setItems: method of the UIToolbar to add them to the toolbar itself. The optional animated: parameter allows you to have buttons fade in as they are added to the toolbar.

Code Listing 4.22 shows the updated code, with buttons of various types and a flexible-space item being used to push a button to the right side of the toolbar. If you try rotating the phone, you will notice that the toolbar and buttons correctly align themselves regardless of orientation (Figure 4.29).

Figure 4.29

Figure 4.29 The toolbar has correctly sized itself with the iPhone in landscape mode. The trash toolbar item is aligned to the right.

figure_04_37.jpg

Code Listing 4.22 Creating several different types of toolbar items.

  • + Share This
  • 🔖 Save To Your Account