Make Navigation Bar stretch behind status bar in xCode 5 / iOS7

Question

I have followed the following tutorial to move my navigation bar down so it is not covered by the status bar in xcode 5/ios7:

Status bar and navigation bar issue in IOS7

But now in iOS7 there is a blank space at the top where the status bar would be and I would like the navigation bar to fill this area too

For instance, Facebook/twittter/Instagram iOS7 apps have the navigation bar background behind the status bar too. How do I achieve this?

Sorry if I'm not being clear but really eager to get this sorted

Thank you!

Answer 1

You do want to set the barPosition of the UINavigationBar .

You can do this in code:

Let your ViewController conform to protocol UINavigationBarDelegate and implement positionBar: metod. (The protocol that you really need is UIBarPositioningDelegate but UINavigationBarDelegate does extend it.)

@interface SampleViewController () <UINavigationBarDelegate>
@property (weak, nonatomic) IBOutlet UINavigationBar *navigationBar;
@end

@implementation SampleViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    _navigationBar.delegate = self;
}

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

OR in Storyboard:

In the Identity Inspector of UINavigationBar , add a User Defined runtime Attribute with KeyPath = barPosition, Type = Number, and Value = 3:

Answer 2

If you want to stretch a UINavigationBar with a custom background-image behind the UIStatusBar in iOS 7 consider the following:

1. The UIStatusBar is transparent as it is.
2. Set the barPosition property of the UINavigationBar to UIBarPositionTopAttached
3. The UINavigationBar background-images in iOS 7 (if UIBarPositionTopAttached) have different dimensions than previous to iOS 7 and you have to use them: now the height is 64 points

In code ( iPhone ONLY ):

// Image needs 64 points height
NSString* navBarPortraitBackgroundPath = [[NSBundle mainBundle] pathForResource:@"navBarPortraitBackground" ofType:@"png"];
NSString* navBarLandscapeBackgroundPath;


if(UIScreen.mainScreen.bounds.size.height == 568){

    // Image needs 64 points height
    navBarLandscapeBackgroundPath = [[NSBundle mainBundle] pathForResource:@"navBarWideLandscapeBackground" ofType:@"png"];

} else {

    // Image needs 64 points height
    navBarLandscapeBackgroundPath = [[NSBundle mainBundle] pathForResource:@"navBarLandscapeBackground" ofType:@"png"];

}


[[UINavigationBar appearance] setBackgroundImage:[UIImage imageWithContentsOfFile:navBarPortraitBackgroundPath] forBarPosition:UIBarPositionTopAttached barMetrics:UIBarMetricsDefault];   
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageWithContentsOfFile:navBarLandscapeBackgroundPath] forBarPosition:UIBarPositionTopAttached barMetrics:UIBarMetricsLandscapePhone];

If you just want to change to background colour of the UINavigationBar it will automatically extend behind the UIStatusBar.

In Code:

    [UINavigationBar appearance].barTintColor = [UIColor redColor];