I have a hard time on dealing with iOS 7 status bar.

In this example, I will set the status bar for each UIViewController

So now go to Info.plist file, and set View controller-based status bar appearance to YES

Info.plist

I just want to share few cases of dealing with status bar.

1. With UINavigationController with WHITE text color

Now create the very first (root) view controller with the following content

In JSAppDelegate.m (I’m using my own prefix JS), add the lines below

1
2
3
JSMainViewController *mainViewController = [[JSMainViewController alloc] init];
UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:mainViewController];
self.window.rootViewController = navigationController;

In JSMainViewController.m, add this to viewDidLoad

1
2
self.title = @"Light Content";
[self setNeedsStatusBarAppearanceUpdate];

and add this function

1
2
3
4
- (UIStatusBarStyle) preferredStatusBarStyle
{
    return UIStatusBarStyleLightContent; // light content means white text color
}

Run it…Opps… why it still in black text color?

Still in black color

The reason is here, since the main view controller is inside a UINavigationController, then the status bar will follow the UINavigationController style.

Now go back to JSAppDelegate, and change the UINavigationBar style.

1
2
3
...
navigationController.navigationBar.barStyle = UIBarStyleBlackTranslucent; // THIS LINE
self.window.rootViewController = navigationController;

Run it… It works

Now it works

2. UIImageView not cover up the top position

Now create another UIViewController, just name it JSTransparentBgViewController, but hide the UINavigationBar in this case

So add a function, before the view actually appear, hide the navigation bar

JSTransparentBgViewController.m

1
2
3
4
5
- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [self.navigationController setNavigationBarHidden:YES];
}

Then in viewDidLoad, add this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// set a light gray color so that you can see the text on status bar
self.view.backgroundColor = [UIColor colorWithRed:235/255.0 green:235/255.0 blue:235/255.0 alpha:1];

[self setNeedsStatusBarAppearanceUpdate];

// by using scroll view, you can scroll & see the result
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
scrollView.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleTopMargin;
scrollView.contentSize = CGSizeMake(CGRectGetWidth(scrollView.frame), 800);
[self.view addSubview:scrollView];

// this image should cover up the top portion of screen
UIImageView *coverImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(scrollView.frame), 300)];
coverImageView.image = [UIImage imageNamed:@"Cover"];
[scrollView addSubview:coverImageView];

You will get a result like this

extra 20px

so now you see that the status bar is not covered up

To fix this, just…. hack it

1
UIImageView *coverImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, -20, CGRectGetWidth(scrollView.frame), 300)];

change the position-y to -20 (as we already know that height of status bar is 20). Run it

Image cover the status bar

Yeaaaaahh…. DONE :)

You can download the souce code, or visit my GitHub repo. You’re welcome to fork it.

Any suggestions just comment below

References: