iOS7侧面菜单状态栏颜色过渡。与iOS7 Facebook App一样 [英] iOS7 Side menu status bar color transition. As in the iOS7 Facebook App

问题描述

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

The iOS7 Facebook App has a right side menu that can be shown by swiping right to left or clicking on the upper right button. When this menu is opened the there is a color transition in the entire status bar from blue to black and vice-versa when closed.

此图像左右显示两个状态栏

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

This looks like a very good solution for iOS Apps with side menus.

任何想法或方法怎么做到这一点？

Any ideas or ways about how to accomplish this?

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

I am currently using JASidePanels. Thanks!

推荐答案

我一直在努力完成同样的事情。我用来做这个的方法基于以下概念：

I've been trying to accomplish the same thing. The method I am using to do this is based on the following concepts:

1. 高度为64点的背景图像将同时填充
   UINavigationBar和UIStatusBar。


2. 高度为44点的背景图片将填充UINavigationBar并将
   UIStatusBar留空。


3. 您可以将子视图添加到当前navigationController视图的顶部，它将位于UIStatusBar下方。

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

So, first, you need to create two images with your desired UINavigationBar look:

640x128px图像以覆盖导航栏和状态栏（ ImageA ）

A 640x128px image to cover navigation bar and status bar (ImageA)

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

And a 640x88px image to cover the navigation bar but leave the status bar black (ImageB).

在应用程序：didFinishLaunchingWithOptions：方法中，使用 ImageA 和设置UINavigationBar的背景[[UINavigationBar外观] setBackgroundImage：[UIImage imageNamed：@ImageA.png] forBarMetrics：UIBarMetricsDefault ];

当侧边菜单开始打开时，您将需要切换UINavigationBar，因此它使用 ImageB 并创建一个您将在UIStatusBar下添加的视图。以下是一些示例代码：

When the side menu starts to open, you are going to want switch the UINavigationBar so it uses ImageB and create a view which you will add underneath the UIStatusBar. Here is some sample code for doing just that:

// Add a property for your "temporary status bar" view
@property (nonatomic, strong) UIView *temporaryStatusBar;

在侧边菜单开始打开的代码中：

And in the code where the side menu starts to open:

// 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叠加层。

As the side menu animates open, or as the user pans the menu, all you need to do then is adjust the alpha level of the UIStatusBar overlay. When the side menu is fully open, the UINavigationBar should have ImageB as its background image and the UIStatusBar overlay should have an alpha of 0. When the side menu closes, you'll want to replace the UINavigationBar background with ImageA and remove the UIStatusBar overlay.

请告诉我这是否适用于您！

Let me know if this works for you!

这篇关于iOS7侧面菜单状态栏颜色过渡。与iOS7 Facebook App一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！