Question

Has anyone tried using a UISearchDisplayController with a UISearchBar that is a UIBarButtonItem in a UIToolbar?

I would appreciate tips on how to do this successfully.

Currently whenever the search controller pops up it redraws the UISearchBar and I’m struggling to maintain a similar look to the UIToolbar

Answer 1

Usually you don’t want to put a search bar inside a toolbar, however, it seems you want to do something similar to what I did.

So here is how I did it, it may be called a hack, but it works like a charm 🙂

First you have to set it up in interface builder like this:

Notice that the search is not a child of toolbar, instead it is above.

The search bar should have “clear color” background and flexible left, right and width autoresizing masks.

You put a 1-pixel label with black background below the toolbar, ie. [x=0, y=44, width=320 or frame width, height=1], also flexible left, right and width autoresizing masks.This is to hide the one visible pixel you get, after the search display controller shows the table view. Try it without it to understand what I mean.

You setup any tool bar items and be sure to have outlets for them, since you will be needing those.

and now for the code …

when you start searching:

- (void)searchDisplayControllerWillBeginSearch:(UISearchDisplayController *)controller
{
    // animate the search bar to the left ie. x=0
    [UIView animateWithDuration:0.25f animations:^{
        CGRect frame = controller.searchBar.frame;
        frame.origin.x = 0;
        controller.searchBar.frame = frame;
    }];
    // remove all toolbar items
    [self.toolbar setItems:nil animated:YES];
}

when you end searching

- (void)searchDisplayControllerDidEndSearch:(UISearchDisplayController *)controller
{
    // animate search bar back to its previous position and size
    // in my case it was x=55, y=1
    // and reduce its width by the amount moved, again 55px
    [UIView animateWithDuration:0.25f 
                          delay:0.0f
                        // the UIViewAnimationOptionLayoutSubviews is IMPORTANT,
                        // otherwise you get no animation
                        // but some kind of snap-back movement 
                        options:UIViewAnimationOptionLayoutSubviews 
                     animations:^{
                         CGRect frame = self.toolbar.frame;
                         frame.origin.y = 1;
                         frame.origin.x = 55;
                         frame.size.width -= 55;
                         controller.searchBar.frame = frame;
                     } 
                     completion:^(BOOL finished){
                         // when finished, insert any tool bar items you had
                         [self.toolbar setItems:[NSArray arrayWithObject:self.currentLocationButton] animated:YES];
                     }];
}

With this I get the following with a nice animation 🙂