iOS7 Side menu status bar color transition. As in the iOS7 Facebook App

Question

The iOS7 Facebook App has a right side menu that can be shown by swiping right to left or clicking on the upper right button. When this menu is opened the there is a color trans

Answer 1

I've been trying to accomplish the same thing. The method I am using to do this is based on the following concepts:

1. A background image with a height of 64 points will fill both the UINavigationBar and the UIStatusBar.
2. A background image with a height of 44 points will fill the UINavigationBar and leave the UIStatusBar black.
3. You can add an subview to the top of the current navigationController's view and it will sit underneath the UIStatusBar.

So, first, you need to create two images with your desired UINavigationBar look:

A 640x128px image to cover navigation bar and status bar (ImageA)

And a 640x88px image to cover the navigation bar but leave the status bar black (ImageB).

In the application:didFinishLaunchingWithOptions: method, set the background of your UINavigationBar with ImageA with [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"ImageA.png"] forBarMetrics:UIBarMetricsDefault];

When the side menu starts to open, you are going to want switch the UINavigationBar so it uses ImageB and create a view which you will add underneath the UIStatusBar. Here is some sample code for doing just that:

// Add a property for your "temporary status bar" view
@property (nonatomic, strong) UIView *temporaryStatusBar;

And in the code where the side menu starts to open:

// Create a temporary status bar overlay
self.temporaryStatusBar = [[UIView alloc] initWithFrame:[[UIApplication sharedApplication] statusBarFrame]];
self.temporaryStatusBar.backgroundColor = [UIColor yourColor];
[self.navigationController.view addSubview:self.temporaryStatusBar];

// Update both the current display of the navigationBar and the default appearance values
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"imageB.png"] forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"imageB.png"] forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setNeedsDisplay];

As the side menu animates open, or as the user pans the menu, all you need to do then is adjust the alpha level of the UIStatusBar overlay. When the side menu is fully open, the UINavigationBar should have ImageB as its background image and the UIStatusBar overlay should have an alpha of 0. When the side menu closes, you'll want to replace the UINavigationBar background with ImageA and remove the UIStatusBar overlay.

Let me know if this works for you!