UISearchBar with UISearchDisplayController animates outside screen

Question

I have standard iPad view controller which has a custom navigation bar at the top. In the xib-file I've added a UISearchBar aligned to the right edge of the view. The search bar is 320px in width. I init a searchdisplaycontroller like this:

// Search display controller
self.mySearchDisplayController = [[UISearchDisplayController alloc] initWithSearchBar:_searchBar 
                                                                                contentsController:self];
_mySearchDisplayController.delegate = self;
_mySearchDisplayController.searchResultsDataSource = self;
_mySearchDisplayController.searchResultsDelegate = self;

The problem is that when I press the search bar, the bar resizes to be the full width of the entire view, but keeps its x-position. This means that it stretches far outside the screen. I'm guessing it has something to do with the "Cancel" button that slides in next to a search bar. If I place the search bar to the far left in the screen, it animates to the full width of the screen and the cancel button is visible.

Anyone has a solution for this?

Answer 1

You can animate the frame of your UISearchBar in the searchDisplayControllerWillBeginSearch method to correct its position like this:

- (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 if you need to
    [self.toolbar setItems:nil animated:YES];
}

and the animate it back again when finished 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 arrayWithObjects: /* put your bar button items here */] animated:YES];
                     }];
}

I have answered a similar question, you can check it here, I've put some images too.

The only thing you have to do is to adapt the code for the iPad.