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

【问题标题】：iOS7 Side menu status bar color transition. As in the iOS7 Facebook AppiOS7 侧边菜单状态栏颜色过渡。如在 iOS7 Facebook 应用程序中
【发布时间】：2013-09-25 16:34:22
【问题描述】：

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

This image shows both status bar side-to-side

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

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

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

【问题讨论】：

标签： ios ios7 statusbar sidebar

【解决方案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 应用中看到的完全一样。

【讨论】：

我在 viewDidLoad 中使用 xib 实现了您的代码，但没有任何变化，您尝试使用 xib 了吗？谢谢

【解决方案2】：

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

高度为 64 磅的背景图像将填充两个 UINavigationBar 和 UIStatusBar。
高度为 44 磅的背景图像将填充 UINavigationBar 并离开 UIStatusBar 黑色。
您可以在当前 navigationController 的视图顶部添加一个子视图，它将位于 UIStatusBar 下方。

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

覆盖导航栏和状态栏的 640x128px 图片 (ImageA)

还有一个 640x88px 的图片来覆盖导航栏，但让状态栏保持黑色（ImageB）。

在application:didFinishLaunchingWithOptions:方法中，用ImageA和[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"ImageA.png"] forBarMetrics:UIBarMetricsDefault];设置你的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 覆盖。

让我知道这是否适合你！

【讨论】：

这是否可以在 iPad 上缩放，纵向和横向屏幕都更宽？
@Aaron 我不确定——我没有在 iPad 上测试过。我想它可以很好地缩放，但您可能必须为 iPad 提供单独的图像，或者调整图像大小以使其平铺。
你怎么知道侧边菜单被选中并且即将打开？它是 JASidePanels 中的一种方法吗？ tnx
嗨@Maziyar - 我不确定JASidePanels。我使用 MFSideMenu (github.com/mikefrederick/MFSideMenu)。只需翻看源代码，找到处理菜单打开/关闭的方法。

【解决方案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]; }

【讨论】：