IOS7 Color transition status bar menu sidebar. Like iOS7 Facebook application

Question

The iOS7 Facebook application has a right side menu, which can be shown by scrolling right to left or pressing the top right button. When this menu is open, the color transition in the entire status bar is from blue to black and vice versa when closed.

This image shows the status bar between the parties.

This seems like a very good solution for sidebar iOS apps.

Any ideas or ways to achieve them?

I am currently using JASidePanels . Thanks!

Answer 1

I tried to do the same. The method I use for this is based on the following concepts:

• A background image with a height of 64 points will fill both the UINavigationBar and UIStatusBar.
• A 44-pixel-high background image will fill the UINavigationBar and leave the UIStatusBar black.
• You can add a subview to the top of the current navigationController view, and it will be under the UIStatusBar.

So, firstly, you need to create two images with the desired visibility of the UINavigationBar:

640x128px image to display the 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: set the background of your UINavigationBar using ImageA using [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"ImageA.png"] forBarMetrics:UIBarMetricsDefault];

When the side menu starts to open, you need to switch the UINavigationBar so that it uses ImageB and creates a view that you add under the UIStatusBar. Here is a sample code for this:

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

And in the code where the side menu opens:

 // 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]; 

When the side menu animates open or when the user clicks the menu, all you have to do is adjust the alpha level of the UIStatusBar overlay. When the side menu is fully open, the UINavigationBar should have ImageB as the background image, and the UIStatusBar overlay should have alpha 0. If the side menu closes, you will want to replace the UINavigationBar with ImageA and remove the UIStatusBar overlay.

Let me know if this works for you!

Answer 2

I managed to find a very simple and elegant way to do this, which perfectly simulates the functionality of the Facebook application.

Here is my approach:

• Create view with status bar
• Set the background color of the background image to black, opacity 0
• Add a subview view to any root view (you need a view that will cover both the central view and the menu so that it will not be limited to any view - a good option for this is the container view controller used to implement your menu controller)
• Set opacity transparency in the animation menu of the menu control menu.

Here is my specific implementation using MMDrawerController :

I subclassed MMDrawerController (I actually already had a subclass for using MMDrawerController with drop-down versions ) and added this code to the init class method

 // Setup view behind status bar for fading during menu drawer animations if (OSVersionIsAtLeastiOS7()) { self.statusBarView = [[UIView alloc] initWithFrame:[[UIApplication sharedApplication] statusBarFrame]]; [self.statusBarView setBackgroundColor:[UIColor blackColor]]; [self.statusBarView setAlpha:0.0]; [self.view addSubview:self.statusBarView]; } // Setup drawer animations __weak __typeof(&*self) weakSelf = self; // Capture self weakly [self setDrawerVisualStateBlock:^(MMDrawerController *drawerController, MMDrawerSide drawerSide, CGFloat percentVisible) { MMDrawerControllerDrawerVisualStateBlock block; block = (drawerSide == MMDrawerSideLeft) ? [MMDrawerVisualState parallaxVisualStateBlockWithParallaxFactor:15.0] : nil; // Right side animation : Left side animation if(block){ block(drawerController, drawerSide, percentVisible); } [weakSelf.statusBarView setAlpha:percentVisible]; // THIS IS THE RELEVANT CODE }]; 

I also added self.statusBarView as a private property.

• The first section of code creates a view, configures it, and adds a subclass of the MMDrawerController as a view subzone. The OSVersionIsAtLeastiOS7() method is a custom method that simplifies checking to see if it works on an iOS 7 device (if it isn't, your custom view will appear below the status bar that you don't need).

• The second section of code is the MMDrawerController setDrawerVisualStateBlock method, which sets the animation code that runs when the menu opens and setDrawerVisualStateBlock . The first few lines of code is a template code that sets one of the pre-prepared animation blocks to each menu (I need parallax on the left, but there was nothing on the right). The corresponding code is the last line of the block: [weakSelf.statusBarView setAlpha:percentVisible]; , which sets the opacity of the transparency in the status bar to match the percentage that is currently open in the menu. This allows you to use the smooth cross-animation that you see in the Facebook application. You will also notice that I assigned self to the weakSelf variable to avoid the compiler warning "save loop".

This is my specific approach using MMDrawerController and a subclass, which I did more for convenience, because I already had a subclass in place than because it was necessarily the best approach or the only way to do this. This can probably be implemented in several other ways, using the MMDrawerController without a subclass, or using any other side-box menu implementation.

The end result is a smooth fade to black animation behind the status bar, just like you see in the new Facebook application.

Answer 3

You can use this amazing slide menu library.

https://github.com/arturdev/AMSlideMenu

In this demo project, you can see how to do this by writing 4 lines of code.

  - (void) viewWillAppear: (BOOL) animated
 {
     [super viewWillAppear: animated];

     // Setting navigation bar tint color
     self.navigationController.navigationBar.barTintColor = [UIColor colorWithHex: @ "# 365491" alpha: 1];

     // Making view with same color that navigation bar
     UIView * statusBarView = [[UIView alloc] initWithFrame: CGRectMake (0, 0, self.view.bounds.size.width, 20)];
     statusBarView.backgroundColor = [UIColor colorWithHex: @ "# 365491" alpha: 1];

     // Replace status bar view with created view and do magic :)
     [[self mainSlideMenu] fixStatusBarWithView: statusBarView];
 }