UISearchBar to UISearchDisplayController transition is off by 20px

Question

I'm implementing a UISearchBar on the top of a UITableView.

In my ViewDidLoad I've set self.edgesForExtendedLayout = UIRectEdgeNone.

Here's how I'm adding my UISearchBar. I'm just adding a UISearchBar to the header of my UITableView and adjusting the content offset:

// Table View
self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.screenWidth, self.screenHeight)];

self.tableView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

// Customize table appearance
[self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
self.tableView.backgroundColor = [UIColor tableBackgroundColor];

// Define the table's datasource
self.tableView.dataSource = self;
self.tableView.delegate = self;

[self.view addSubview:self.tableView];


// Add a search bar to the header
self.searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, self.screenWidth, 44)];
self.searchBar.tintColor = [UIColor primaryBrandedColor];
self.searchBar.placeholder = NSLocalizedString(@"Search", "Search placeholder");
self.searchBar.backgroundImage = [UIImage imageNamed:@"searchBarBackground"];
[self.searchBar setBackgroundImage:[UIImage imageNamed:@"searchBarBackground"] forBarPosition:UIBarPositionTopAttached barMetrics:UIBarMetricsDefault];
self.searchBar.barTintColor = [UIColor clearColor];
self.searchBar.delegate = self;

[[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setFont:[UIFont fontWithName:@"Whitney-Light" size:15]];

//Setup search display controller
self.searchController = [[HUMSearchDisplayController alloc] initWithSearchBar:self.searchBar contentsController:self];
self.searchController.delegate = self;
self.searchController.searchResultsDataSource = self;
self.searchController.searchResultsDelegate = self;
self.searchController.searchResultsTableView.separatorStyle = UITableViewCellSeparatorStyleNone;

// Add the searchBar and offset the table view so it's hidden by default.
self.tableView.tableHeaderView = self.searchBar;
self.tableView.contentOffset = CGPointMake(0.0, self.searchBar.frame.size.height);

It doesn't seem like anything is out of the ordinary here, but there's a 20px gap on the original tableview when the SearchDisplayController is displayed. In this example I've subclassed SearchDisplayController to not hide the NavigationBar to make it more clear what's happening.

A video capture of the transition: http://cl.ly/0y3L0Z1R1I0c/20pixels.mov

The things I've tried:

1. Change the frame of my UITableView on searchDisplayControllerWillBeginSearch to move it up 20px. This breaks the transition. http://cl.ly/033q0L3G0p1T/origin.mov
2. Change the scroll offsets on UITableView on searchDisplayControllerWillBegin. Similarly, this breaks the transition.
3. Tried to manually animate the UISearchBar but I couldn't get that to work either.

Any ideas?

Answer 1

After several trial and error sessions finally I achieved the desired behaviour. Note in my case when the search bar is clicked I want the navigation bar pushed up. The following solution fixes the 20px gap problem.

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    ...        
    self.edgesForExtendedLayout = UIRectEdgeTop;
    self.searchBar.clipsToBounds = YES;
    self.navigationController.navigationBar.translucent = YES;
}

On viewWillDisappear the translucent property needs to be set to NO, otherwise in the segue view controllers navigation bar remains pushed along with view content.

- (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
    [self resignFirstResponder];
    self.navigationController.navigationBar.translucent = NO;
}

Hope this helps.