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.

Dodger

Any luck on this problem? I'm having the exact same issue. I noticed in your screenshots you're using some sort of Slide Out Nav. Controller. I am too, maybe that is part of the problem? – Parapet

Hello @Parapet no solution yet unfortunately, but next week, we are starting another iteration of the UI and I will look more into this issue, for the moment being we released with that nuisance, I will keep you posed – Dodger

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

Intrust

Spot on. If you use Interface builder, you can use iOS6/7 deltas: First, "view as iOS 6.0", then set a delta of "20" to achieve the +20 offset in iOS 7 (have to set on all views that need bumping down). – Tarantass

My search bar is hidden, and I put a toggle in the navigation bar. In iOS 6 it worked fine, and now it works ok in iOS with the self.edgesforExtendedLayout setting. Thanks! – Doubleteam

Please help me out how to shift all the UIView Elements – Propaganda

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

Coagulum

Thanks Ben, if you read my question, I already tried that. And even if it worked it does not solve the auto adjust of the UISearchBar by 20px – Dodger

Sorry that I could not help you. Anyway in my app it worked and when I set the edgesForExtendedLayout the search field frame stays as it was when it's not active. No 20px offset. – Coagulum

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.

Bus

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;
    }

Pahoehoe

I put it in my table viewer's implementing class, I hope that is useful. – Pahoehoe

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

Hannah

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

Gherlein