Multi-row UINavigationBar / UIToolbar like in the Maps app

Question

In the iPhone Maps app (for iOS 5) in Directions mode the toolbar is located right below the navigation bar, and the toolbar gradient perfectly matches the navigation bar background.

I wonder if there is some simple way to achieve similar behavior? (Preferably without using custom images)

score 0 · Accepted Answer · answered Sep 14 '12 at 11:02

I think it's an ordinary toolbar with 2 textfields inside UIView(which added as UIBarButtonItem to toolbar) to the top of the screen under the navigaionbar.

This is how I implemented it:

    UIToolbar *bar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 100)];

    UITextField *field1 = [[UITextField alloc] initWithFrame:CGRectMake(15, 5, 280, 30)];
    UITextField *field2 = [[UITextField alloc] initWithFrame:CGRectMake(15, 50, 280, 30)];
    [field1 setBorderStyle:UITextBorderStyleRoundedRect];
    [field2 setBorderStyle:UITextBorderStyleRoundedRect];

    UIView *viewForTextFields = [[UIView alloc] initWithFrame:bar.frame];

    [viewForTextFields addSubview:field1];
    [viewForTextFields addSubview:field2];

    UIBarButtonItem *viewForTextFieldsBarItem = [[UIBarButtonItem alloc] initWithCustomView:viewForTextFields];

    NSArray *items = [NSArray arrayWithObjects:viewForTextFieldsBarItem, nil];

    [bar setItems:items];
    [bar setContentMode:UIViewContentModeTopLeft];

    [self.view addSubview:bar];

Multi-row UINavigationBar / UIToolbar like in the Maps app

1 Answers1