UISearchBar overlaps status bar in iOS

Question

I (just like everyone else here) am running into the same Status Bar overlap issue that everyone else is, with a little twist, and that is why I opening a new question about this.

There seems to be some mechanism that lets the UISearchBar know where to position it self, which is totally out of whack.

jaredsinclair answer here (iOS 7 status bar back to iOS 6 default style in iPhone app?) , explains in great detail how the Apple Engineers allow us to introduce logic to our application in order to blend in as much as possible with the user's environment.

I went through the process of carefully examining each UIViewController in my application and making the slightest modification possible.

In most cases I was able to resolve the problem using the code below which I found accross several SO answers

// Do any additional setup after loading the view.
if ([self respondsToSelector:@selector(edgesForExtendedLayout)]){
    self.edgesForExtendedLayout = UIRectEdgeNone;
}

This however would not work no matter what I do in a particular view where the UINavigationBar is hidden.

Based on the solution found across SO I was able to solve this issue by adding the following piece of logic to this particular UIViewController

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0) {
    CGRect statusBarFrame =  [[UIApplication sharedApplication] statusBarFrame];
    viewFrame.origin.y = viewFrame.origin.y+statusBarFrame.size.height;
}

This pushes the UIViewController n pixels down "depending" on the height of the status bar.

The effect of this is show here

The problem is that when I enter the search field the UISearchBar adds by itself a 20px padding on the top, which offsets the entire UI.

This leads me to the conclusion that the UISearchBar tries to adjust itself, and by coincidence it adjust itself the exact same amount as the status bar's height.

If I don't hack the position, once I enter the search field then this auto adjustment aligns the UISearchBar neatly underneath the status bar.

I hope I have detailed my confusion, I am wondering if anybody has any ideas towards a solution.

Answer 1

If the navigationBar is visible do the following in ViewDidLoad :

self.edgesForExtendedLayout = UIRectEdgeNone;

If the navigationBar is hidden do the following in ViewDidLoad :

Adjust all the UIView elements by shifting them 20pt

Answer 2

Struggled around with this issue too. You need to put this into your ViewControllers viewDidLoad method.

if (floor(NSFoundationVersionNumber) > NSFoundationVersionNumber_iOS_6_1) {
    self.edgesForExtendedLayout = UIRectEdgeNone;
}

This should fix it. It's stated in the iOS 7 Transition Guide, too. https://developer.apple.com/library/ios/documentation/userexperience/conceptual/TransitionGuide/AppearanceCustomization.html#//apple_ref/doc/uid/TP40013174-CH15-SW1

Answer 3

UISearchBar has a delegate method for what you want. Just place it 20px from top.

- (UIBarPosition)positionForBar:(id <UIBarPositioning>)bar
{
    return UIBarPositionTopAttached;
}

Unfortunately it doesn't work together with a UISearchDisplayController.

Answer 4

I got the exact same problem and based on suggestions like @Ben's and here I ended up adding the following code which helped me:

- (void) viewDidLayoutSubviews

    {
        if(floor(NSFoundationVersionNumber) > NSFoundationVersionNumber_iOS_6_1)
        {
            CGRect viewBounds = self.view.bounds;
            CGFloat topBarOffset = self.topLayoutGuide.length;
            viewBounds.origin.y = topBarOffset * -1;
            self.view.bounds = viewBounds;

            self.edgesForExtendedLayout = UIRectEdgeNone;
        }
    }

alternatively this code also works

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {

        self.automaticallyAdjustsScrollViewInsets=YES;
        self.edgesForExtendedLayout = UIRectEdgeNone;
        self.navigationController.view.backgroundColor = [UIColor whiteColor];
        self.navigationController.navigationBar.translucent = YES;
    }

Answer 5

If anyone wants to solve this problem via AutoLayout, instead of adding a constraint searchBar.top = self.view.top add a constraint to the topLayoutGuide, like so:

searchBar.top = topLayoutGuide.bottom

Answer 6

I'm not really clear on the bit about the search bar adjusting its own height - my search bars don't do that? But.

You can add a constraint to the Top Layout Guide in IB, for the search bar. This will cause it to stick to the bottom of the status bar in both ios 6 and ios 7. If you then remove the code where you manually adjust the height of the status bar. That should take care of it. You can see an example of how to do that here: https://developer.apple.com/library/ios/qa/qa1797/_index.html