Why UISearchBar and its scope buttons are shown in one line?

Question

Hi,

I have seen Apple's example "TableSearch" that when touched its scope buttons come below the search bar. http://developer.apple.com/iphone/library/samplecode/TableSearch/Introduction/Intro.html

But when I make my own it looks good at first but when I touch it looks like ugly, scope buttons and search bar are shown in the same line like this: http://cl.ly/BN9

What do I have to do make it like "TableSearch" example in the iPad?

I am doing everything in IB and tried to modify the search bar programatically from the controller:

    - (void)viewDidLoad {

        [super viewDidLoad];
        self.tableView.rowHeight = 88.0f;
        self.tableView.contentOffset = CGPointMake(0, self.searchDisplayController.searchBar.frame.size.height);
self.searchDisplayController.searchResultsTableView.rowHeight = self.tableView.rowHeight;


    //BELOW DID NOT WORK:
    CGRect b = self.searchDisplayController.searchBar.bounds;
    self.searchDisplayController.searchBar.bounds = CGRectMake(b.origin.x, b.origin.y, b.size.width, self.tableView.rowHeight);
    b = self.searchDisplayController.searchBar.frame;
    self.searchDisplayController.searchBar.frame = CGRectMake(b.origin.x, b.origin.y, b.size.width, self.tableView.rowHeight);

    //BELOW WORKS PERFECT BUT IS A PRIVATE METHOD, HENCE I AM NOT SUPPOSED TO USE IT
    //[self.searchDisplayController.searchBar setCombinesLandscapeBars:NO];

     }

Thanks in advance.

Answer 1

I've encountered this bug as well, and I've both filed a report with Apple and requested technical assistance. I'll let you know how it goes. In the meantime I'll give you a brief bit of background on this bug.

On the iPhone, to preserve precious vertical screen real estate in Landscape mode, the UISearchDisplayController sets the UISearchBar to combine its search bar and search field in a single horizontal layout. This works pretty well because of the increased horizontal size of the screen (480 points in Landscape). Unfortunately, it works not so well on the iPad, where in Landscape mode the UI change really isn't necessary in the first place because you have plenty of vertical real estate. You also still only have 320 pixels of horizontal display space in the master view of the UISplitViewController, not the increased 480 of the iPhone. The result is an iSore.

Presumably the problem is that UISearchDisplayController is behaving badly in its willRotateToInterfaceOrientation:duration‎: method. Specifically, it's not bothering to check whether it's on an iPhone or not before it sets the combinesLandscapeBars property on its UISearchBar. The private API kludge in your code works because it fixes that oversight in the UISearchDisplayController. But of course Apple will rain down the fury of the ancients on you for using undocumented APIs, so you can't. Really we're at the mercy of Apple on this one.

If you're willing to give up the eye-candy and convenience of UISearchDisplayController, you can use a UISearchBar sans UISearchDisplayController and manage aspects of presentation yourself. Obviously this requires a lot more code and would be pointless if Apple's API engineers did their jobs, but it will at least resolve the display bug.

If you're Apple you can use your own undocumented APIs, which is why Mail.app doesn't have this problem.

UPDATE

The bug report I've filed with Apple is #8344719.

Answer 2

When you set the bounds and frame for the searchBar, like for the frame here:

blabla.searchBar.frame = CGRectMake(b.origin.x, 
                                    b.origin.y, 
                                    b.size.width, 
                                    self.tableView.rowHeight);

it seems like there is a problem with height. Scope buttons require some space under the search bar, so you should increase the height of both bounds and the frame.

If you show and hide scope buttons on some event you need to adjust the frame size each time.