iOS7侧面菜单状态栏颜色过渡。与iOS7 Facebook App一样

Question

iOS7 Facebook App有一个右侧菜单，可以通过从右向左滑动或点击右上角按钮来显示。打开此菜单时，整个状态栏中的颜色过渡从蓝色变为黑色，反之亦然。

This image shows both status bar side-to-side

对于带有侧边菜单的iOS应用程序来说，这看起来非常好。

关于如何实现这一目标的任何想法或方法？

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

Answer 1

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

这是我的方法：

• 使用状态栏框架
创建视图
• 将视图背景颜色设置为黑色，不透明度设置为0
• 将视图作为子视图添加到任何根视图（您需要一个涵盖中心视图和菜单的视图，以便它不会局限于任何单个视图 - 这是一个很好的选择菜单控制器实现使用的容器视图控制器
• 在菜单控制器实现的菜单动画方法
中设置视图的不透明度

以下是我的具体实施，使用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添加为私人财产。

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

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

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

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

Answer 2

我一直在努力完成同样的事情。我用来执行此操作的方法基于以下概念：

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

因此，首先，您需要使用所需的UINavigationBar外观创建两个图像：

640x128px图像，用于覆盖导航栏和状态栏（ ImageA ）



640x88px图像覆盖导航栏但状态栏保持黑色（ ImageB ）。



在application:didFinishLaunchingWithOptions:方法中，使用[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"ImageA.png"] forBarMetrics:UIBarMetricsDefault];

将 ImageA 设置为UINavigationBar的背景

当侧面菜单开始打开时，您需要切换UINavigationBar，以便使用 ImageB 并创建一个您将在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];

当侧面菜单打开动画时，或者当用户平移菜单时，您需要做的就是调整UIStatusBar叠加层的alpha级别。当侧面菜单完全打开时，UINavigationBar应该有 ImageB 作为其背景图像，而UIStatusBar叠加层的alpha值应为0.当侧边菜单关闭时，您将要替换UINavigationBar背景使用 ImageA 并删除UIStatusBar叠加层。

请告诉我这是否适合您！

Answer 3

您可以使用这个很棒的幻灯片菜单库

https://github.com/arturdev/AMSlideMenu

在这个演示项目中，您可以通过编写4行代码来了解如何执行此操作。

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

    // Setting navigation's 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];
}