iOS7 侧边菜单状态栏颜色过渡。如在 iOS7 Facebook 应用程序中

Question

iOS7 Facebook 应用程序有一个右侧菜单，可以通过从右向左滑动或单击右上角的按钮来显示。当此菜单打开时，在整个状态栏中有一个颜色过渡，从蓝色到黑色，关闭时反之亦然。

This image shows both status bar side-to-side

对于带有侧边菜单的 iOS 应用程序，这看起来是一个非常好的解决方案。

关于如何实现这一点有什么想法或方法吗？

我目前正在使用 JASidePanels .谢谢!

Answer 1

我设法找到了一种非常简单、优雅的方式来做到这一点，它完美地模仿了 Facebook 应用程序的功能。

这是我的方法:

• 创建带有状态栏框架的 View
• 将 View 背景色设置为黑色，不透明度为 0
• 将 View 作为 subview 添加到任何 Root View (您需要一个既能覆盖中心 View 又能覆盖菜单的 View ，这样它就不会局限于任何单个 View - 一个不错的选择是菜单 Controller 实现使用的容器 View Controller )
• 在菜单 Controller 实现的菜单动画方法中设置 View 的不透明度

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

我对 MMDrawerController 进行了子类化(实际上我已经有了一个使用 MMDrawerController with storyboards 的子类)，并将这段代码添加到该类的 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 作为私有(private)属性。

• 代码的第一部分创建一个 View ，对其进行配置，并将其添加为 MMDrawerController 子类 View 的 subview 。 OSVersionIsAtLeastiOS7() 方法是一种自定义方法，可简化检查设备是否运行 iOS 7(如果不是，您的自定义 View 将显示在状态栏下方，而您没有不想)。

• 第二段代码是MMDrawerController 的setDrawerVisualStateBlock 方法，它设置了菜单打开和关闭时要执行的动画代码。前几行代码是为每个菜单设置一个预建动画 block 的样板代码(我想要左侧的视差，但右侧没有)。相关代码是该 block 的最后一行:[weakSelf.statusBarView setAlpha:percentVisible];，它设置状态栏 View 的不透明度以匹配菜单当前打开的百分比。这允许您在 Facebook 应用程序中看到流畅的十字动画。您还会注意到我已将 self 分配给变量 weakSelf，以避免出现“保留循环”编译器警告。

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

最终结果是在状态栏后面平滑地淡入黑色动画，就像您在新的 Facebook 应用中看到的一样。