ios - iOS7 侧边菜单状态栏颜色过渡。在 iOS7 Facebook 应用中

Question

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

此图像并排显示两个状态栏

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

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

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

Answer 1

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

这是我的方法：

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

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

我对 MMDrawerController 进行了子类化（实际上我已经有了一个使用MMDrawerController 和 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方法，它设置在打开和关闭菜单时执行的动画代码。前几行代码是样板代码，它为每个菜单设置一个预构建的动画块（我想要左边的视差，但右边没有）。相关代码是 block: 的最后一行[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:方法中，使用ImageA设置 UINavigationBar的背景[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"ImageA.png"] forBarMetrics:UIBarMetricsDefault];

当侧边菜单开始打开时，您将需要切换 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)动画
{
    [超级viewWillAppear：动画]；

    // 设置导航栏的颜色
    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];

    // 用创建的视图替换状态栏视图并做魔术:)
    [[self mainSlideMenu] fixStatusBarWithView:statusBarView];
}