Another area where I find iPhone development to be a bit convoluted was with toolbars and action sheets. The sheets are conceptually tied to the toolbar, yet there is no glue to combine UIActionSheet with UIToolbar. It’s also fairly difficult to represent your application state in the toolbar—an example is the refresh button in Twitterrific that turns into a cancel button while the refresh is taking place.
And then one day it dawned on me: an iPhone toolbar with an action sheet is like a menubar with menus on the Mac desktop (turn your phone upside down and there is even some visual similarity.)
After investigating some of the design patterns for NSMenu and NSMenuItem, it was clear that this would work well on a mobile interface as well. My implementation is a subclass of UIToolbar named IFActionToolbar.
In it’s simplest form, you attach a list of items to one of the toolbar’s bar button items:
@interface MyViewController : UIViewController
{
IBOutlet IFActionToolbar *toolbar;
IBOutlet UIBarButtonItem *barButtonItem;
}
...
@implementation MyViewController
...
- (void)viewDidLoad
{
[super viewDidLoad];
IFActionToolbarActionItem *actionItem = nil;
NSMutableArray *actionItems = [NSMutableArray arrayWithCapacity:3];
actionItem = [[[IFActionToolbarActionItem alloc] initWithTitle:@"One" target:self action:@selector(firstAction:)] autorelease];
[actionItems addObject:actionItem];
actionItem = [[[IFActionToolbarActionItem alloc] initWithTitle:@"Two" target:self action:@selector(secondAction:)] autorelease];
[actionItems addObject:actionItem];
actionItem = [[[IFActionToolbarActionItem alloc] initWithTitle:@"Cancel" target:nil action:NULL] autorelease];
[actionItems addObject:actionItem];
[toolbar attachActionItems:actionItems toItem:barButtonItem];
[toolbar update];
}
The IFActionToolbarActionItem is just a simple wrapper object that associates a title with a target and action. These action items are used to automatically construct the action sheet when the user taps on barButtonItem. If you’ve ever constructed an NSMenu using NSMenuItems, this will feel quite familiar.
Additionally, the toolbar supports an -update method. This method calls the assigned delegate to enable or disable toolbar buttons, set the image for the toolbar item, change the title of the action sheet, hide or show items in the action sheet, and define the cancel or destructive buttons in the sheet. Again, similar in pattern to how NSMenuItems are maintained.
Any time you call this update method, the UIToolbar is configured automatically. It makes it much easier to reflect the state of your controller in the view.
I’m not going to spend too much time discussing the inner workings of this class: the picture of a sample project is worth a thousand words.
One thing I would like to caution you about: don’t get too carried away with enabling and disabling items in the action menu. In our UI testing, we found that changing the list too much was confusing for users. It’s like the “adaptive menus” used in Microsoft Office: it’s very difficult for a user to adapt to your interface if it’s constantly changing. Just because you can doesn’t mean you should.
Again, I hope this code is useful in your own iPhone projects. Enjoy!