iOS7侧边菜单状态栏颜色转换。就像iOS7 Facebook应用程序中的那样。

Question

iOS7的Facebook应用程序有一个右侧菜单，可以通过向右滑动或点击右上方按钮来显示。当打开此菜单时，整个状态栏会发生颜色过渡，从蓝色变为黑色，反之亦然，关闭后会恢复原来颜色。 此图显示了两个状态栏并排 这对于带有侧边菜单的iOS应用程序似乎是一个非常好的解决方案。

有任何想法或方法如何实现这一点吗？
我目前正在使用JASidePanels。谢谢！

- eddie

Answer 1

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

以下是我的做法:

- 创建一个带有状态栏框架的视图。 - 将视图的背景颜色设置为黑色，不透明度设置为0。 - 将视图作为子视图添加到任何根视图中(你需要一个视图来覆盖中心视图和菜单，以便它不会被限制在任何单一视图中 - 一个很好的选择是你的菜单控制器实现所使用的容器视图控制器)。 - 在你的菜单控制器实现的菜单动画方法中设置视图的不透明度。

以下是我使用MMDrawerController进行特定实现的代码：

我创建了一个MMDrawerController的子类(实际上我已经有一个子类用于在storyboards中使用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作为私有属性。

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

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

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

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

- Fateh Khalsa

---

我在viewDidLoad中使用了你的xib代码，但是没有任何变化，你试过使用xib吗？谢谢。 - Nam Vu

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];将UINavigationBar的背景设置为ImageA。

当侧边菜单开始打开时，您需要切换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。当侧边菜单关闭时，您将希望用 ImageA 替换UINavigationBar背景并删除UIStatusBar叠加层。

如果这对您有用，请告诉我！

- Scott Lieberman

---

这个程序在iPad上能否适应更宽的横向和纵向屏幕？ - Aaron

@Aaron 我不确定 - 我还没有在iPad上测试过。我想它应该可以很好地缩放，但你可能需要为iPad提供单独的图像，或者调整图像大小以使其平铺。 - Scott Lieberman

你怎么知道侧边菜单被选中并即将打开？在JASidePanels中有相应的方法吗？谢谢。 - Maziyar

嗨@Maziyar - 我不确定JASidePanels。我使用MFSideMenu（https://github.com/mikefrederick/MFSideMenu）。只需查看源代码并找到处理菜单打开/关闭的方法即可。 - Scott Lieberman

Answer 3

你可以使用这个很棒的侧边菜单库

https://github.com/arturdev/AMSlideMenu

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

- (void)viewWillAppear:(BOOL)animated
{
    [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];
// 用创建的视图替换状态栏视图并进行魔法 :)
    [[self mainSlideMenu] fixStatusBarWithView:statusBarView];
}

- arturdev