How to mimic UISearchBar's behaviours of Safari in iOS

Question

I have an UISearchBar in the titleView of navigation bar (it looks like the picture below) and I want make it works like the one in Safari browser.

I don't have enough reputation to post images, here's the link

First picture

Second picture

What I want to achieve are:

• In normal state, the Navigation Bar contains 2 left and right buttons, an UISearchBar and a clear button inside that search bar (looks like first picture with 2 addition buttons).
• In search state, the view is replaced by another view and when it dismissed, the view back to original state.
• Works both in iOS 6 and 7

I know this can be done by using UISearchDisplayController but it doesn't work. Here's my code:

.h : implement TableView's DataSource/Delegate, UISearchDisplayDelegate, UISearchBarDelegate

.m

-(void) viewDidload
{
    //Add left, right buttons
    self.leftButton = [[UIBarButtonItem alloc] init];
    [self.leftButton setStyle:UIBarButtonItemStylePlain];
    [self.leftButton setTitle:@"Button"];
    self.navigationItem.leftBarButtonItem = self.leftButton;

    self.rightButton = [[UIBarButtonItem alloc] init];
    [self.rightButton setStyle:UIBarButtonItemStylePlain];
    [self.rightButton setTitle:@"Button"];

    self.navigationItem.rightBarButtonItem = self.rightButton;
    self.searchBar = [[UISearchBar alloc] initWithFrame:self.navigationController.navigationBar.bounds];
    if (DEVICE_IS_IOS7) {
        self.searchBar.searchBarStyle = UISearchBarStyleMinimal;
    }
    self.navigationItem.titleView = self.searchBar;
    self.searchBar.delegate = self;
    //----------------

    self.searchController = [[UISearchDisplayController alloc] initWithSearchBar:self.searchBar contentsController:self];
    self.searchController.delegate = self;
    self.searchController.searchResultsDataSource = self;
    self.searchController.searchResultsDelegate = self;
}

    /*
    table implementation
    */

In iOS 7, the view of UISearchDisplayController (the grey one) didn't cover the main view and resultTable did not reload data, even it was able to filter the search string. (I had to use KVO to display it)

In iOS 6, the grey thing covers all the screen and keyboard didn't show up (it disappeared immediately).

Can anybody help ? Thank you.

Answer 1

I've twice had to do a very similar UI to what you're describing, the recent one being closer to Twitter for iOS 7's UISearchBar behavior. If you want to display a UISearchBar inside a UINavigationBar, forget that setup altogether because you will likely encounter roadblocks, like this (although it seems fixed by Apple).

Fake it instead. Hide the navigation bar in your UIViewController and use a UIView with a height of 64 for iOS 7 or 44 for iOS 6 and put it on top, so that it looks like a navigation bar. Add the UISearchBar inside it like a normal subview, then animate it as you wish in the UISearchBarDelegate methods.