Question

I am using UISearchBar provided by the UISearchBar+SearchDisplayController in the Interface Builder, the search bar is positioned on right of a view, and I need to to expand towards the left when it is activated, but the system seems to expand it towards the right(in my case, it is going beyond the screen), I tried to animate it when it is activated, but the system’s animation still happens and there is some odd looking animation.

Is there any way to solve this?

Thanks a lot!

Answer 1

Here is my answer to a similar question posted:here and here

The key to a correct animation is to specify UIViewAnimationOptionLayoutSubviews as an option for the animation.

Here is a my full answer to those similar questions:

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 🙂