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

Question

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

此图像左右显示状态栏

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

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

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

Answer 1

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

这是我的方法:

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

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

我将MMDrawerController子类化(我实际上已经有了一个子类用于将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应用程序中看到的那样.

Answer 2

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

1. 高度为64点的背景图像将填充UINavigationBar和UIStatusBar.
2. 高度为44点的背景图像将填充UINavigationBar并使UIStatusBar保持黑色.
3. 您可以将子视图添加到当前navigationController视图的顶部,它将位于UIStatusBar下方.

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

640x128px图像,用于覆盖导航栏和状态栏(ImageA)

并且640x88px图像覆盖导航栏但状态栏保持黑色(ImageB).

在该application:didFinishLaunchingWithOptions:方法中,设置您的UINavigationBar的背景与ImageA与[[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.当侧边菜单关闭时,您将要用ImageA替换UINavigationBar背景并删除UIStatusBar叠加层.

如果这对您有用,请告诉我!