iOS7侧面菜单状态栏颜色转换。 就像在iOS7的Facebook应用程序

iOS7的Facebook应用程序有一个右侧菜单，可以通过从右向左滑动或单击右上angularbutton来显示。 打开此菜单时，整个状态栏中的颜色从蓝色转换为黑色，closures时反之亦然。

此图像显示两个状态栏一侧

这看起来像一个非常好的iOS应用程序与侧边菜单的解决scheme。

任何想法或如何完成这个方法？

我目前正在使用JASidePanels 。 谢谢！

我一直在努力完成同样的事情。 我正在使用的方法是基于以下概念：

  1. 高64点的背景图像将填充UINavigationBar和UIStatusBar。
  2. 高度为44的背景图像将填充UINavigationBar并将UIStatusBar保留为黑色。
  3. 您可以将子视图添加到当前navigationController视图的顶部，它将位于UIStatusBar的下方。

所以，首先，您需要使用您所需的UINavigationBar外观创build两个图像：

包含导航栏和状态栏的640x128px图像（ ImageA ）

包含UINavigationBar和UIStatusBar的图像

和一个640x88px的图像覆盖导航栏，但离开状态栏黑色（ ImageB ）。

在这里输入图像说明

在application:didFinishLaunchingWithOptions:方法，用[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"ImageA.png"] forBarMetrics:UIBarMetricsDefault];用ImageA设置UINavigationBar的背景[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"ImageA.png"] forBarMetrics:UIBarMetricsDefault];

当侧面菜单开始打开时，您将要切换UINavigationBar，以使用ImageB并创build一个视图，您将在UIStatusBar下添加视图。 以下是一些示例代码： 

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

在侧面菜单开始打开的代码中： 

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

当侧面菜单animation打开，或者当用户拖动菜单时，您所需要做的就是调整UIStatusBar覆盖层的alpha级别。 当侧面菜单完全打开时，UINavigationBar应该有ImageB作为它的背景图像，UIStatusBar覆盖层应该有一个0的alpha。当侧面菜单closures时，你会想用ImageA代替UINavigationBar背景并且移除UIStatusBar覆盖层。

让我知道这是否适合你！

我设法find一个非常简单，优雅的方式来完成这个function，它完美地模仿了Facebook应用程序的function。

这是我的方法：

  • 使用状态栏框创build视图
  • 将背景颜色设置为黑色，不透明度为0
  • 将视图作为子视图添加到任何根视图（您需要一个包含中心视图和菜单的视图，以便它不会局限于任何单个视图 – 对此的一个好的select是您的容器视图控制器菜单控制器实现）
  • 在菜单控制器实现的菜单animation方法中设置视图的不透明度

这是我的具体实现，使用MMDrawerController ：

我分类MMDrawerController（我实际上已经有一个使用MMDrawerController与故事板的子类），并将此代码添加到类的init方法： 

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

我也添加self.statusBarView作为一个私人财产。

  • 代码的第一部分创build一个视图，对其进行configuration，并将其添加为MMDrawerController子视图的子视图。 OSVersionIsAtLeastiOS7()方法是一种自定义方法，可以简化检查以查看设备是否运行iOS 7（如果不是，您的自定义视图将显示在状态栏下方，而您不想要）。

  • 代码的第二部分是MMDrawerController的setDrawerVisualStateBlock方法，它设置当菜单打开和closures时要执行的animation代码。 前几行代码是样板代码，它为每个菜单设置了一个预build的animation块（我想要左边的视差，但是右边没有）。 相关代码是块的最后一行： [weakSelf.statusBarView setAlpha:percentVisible]; ，它将状态栏视图的不透明度设置为与菜单当前打开的百分比相匹配。 这允许您在Facebook应用程序中看到的平滑交叉animation。 你还会注意到我已经把self赋值给一个variablesweakSelf ，以避免“保留周期”的编译器警告。

这是我使用MMDrawerController和一个子类的具体方法，为了方便，我已经做了更多的工作，因为我已经有了子类，而不是因为它是最好的方法或唯一的方法。 它可能可以用其他几种方法实现，使用MMDrawerController而不需要子类，或者使用任何其他的抽屉菜单实现。

最后的结果是状态栏后面的黑色animation平滑淡化，就像你在新的Facebook应用程序中看到的一样。

你可以使用这个真棒滑动菜单库

https://github.com/arturdev/AMSlideMenu

在这个演示项目中，您可以看到如何通过编写4行代码来实现这一点。 

 - （void）viewWillAppear：（BOOL）animation
 {
     [super viewWillAppear：animated];

     //设置导航条的颜色
     self.navigationController.navigationBar.barTintColor = [UIColor colorWithHex：@“＃365491”alpha：1];

     //使用与导航栏相同的颜色进行视图
     UIView * statusBarView = [[UIView alloc] initWithFrame：CGRectMake（0，0，self.view.bounds.size.width，20）];
     statusBarView.backgroundColor = [UIColor colorWithHex：@“＃365491”alpha：1];

     //用创build的视图replace状态栏视图，并做魔术:)
     [self mainSlideMenu] fixStatusBarWithView：statusBarView];
 }
Interesting Posts