custom iPhone statusbar
最近项目组里要求实现在iPhone的状态栏上显示自定义的图标,但是公开的书籍和论坛都没有介绍。看了一篇博客介绍了如此如何进行修改,转载如下:
用过Reeder的应该都会发现,在进行同步时,右上角会出现一个自定义的图标。而在点击它时,就会向左扩张覆盖住原状态栏,并显示同步状态。
这个设计非常巧妙,因为传统的设计在显示状态时,往往会占用掉几十像素;而在阅读时,用户非常希望主要内容能占据更多的空间。
那么这个设计是怎么实现的呢?下面就来模拟一下。
首先要说明的是,Apple并没有开放状态栏的API,所以想要改动它的话,就只能用私有API了:
@interface UIApplication () -(void)addStatusBarImageNamed:(id)named removeOnExit:(BOOL)exit; -(void)addStatusBarImageNamed:(id)named; -(void)removeStatusBarImageNamed:(id)named; @end
这里的named实际上是个NSString对象,指向/System/Library/CoreServices/SpringBoard.app中的图片,例如@"Airplain"、@"Play"等。如果你越狱了的话,可能会在这个文件夹里找到一些越狱应用的图标。
[[UIApplication sharedApplication] addStatusBarImageNamed:@"Play"];
要注意的是进入后台时,并不会自动删除图标,即使设置removeOnExit为YES也无效。所以最好的方法是自己调用removeStatusBarImageNamed:,它只能删除通过addStatusBarImageNamed:添加的图标,而不能删除系统自己显示的图标。
还要说明的是,模拟器上也是无效的。
这种方法虽然简单,但因为用到了私有API,你的应用很可能无法在App Store上架。
此外,可用的图标有限,而你又没权限在SpringBoard.app中添加图标。
更重要的是这个图标只能加在电池图标的左边,并且无法响应触摸事件。
既然缺点那么多,我们还是另寻他法吧。
事实上在Apple的View Programming Guide for iOS文档里就有提到更改Window Level这个技巧。
于是看看Window Level的可用值:
typedef CGFloat UIWindowLevel; const UIWindowLevel UIWindowLevelNormal; // 0.0 const UIWindowLevel UIWindowLevelAlert; // 2000.0 const UIWindowLevel UIWindowLevelStatusBar; // 1000.0
现在知道为什么系统弹出来的对话框肯定会比你的app高了吧,因为它的Window Level更高,你的view和layer和它根本不是一个级别的。
不过我并不是来搞对话框的,只要能覆盖状态栏就行了。于是解决办法就很简单了:创建一个UIWindow对象,将它的windowLevel设得比UIWindowLevelStatusBar更高,然后用它来模拟状态栏。
接下来就做个demo测试一下。要实现的效果也很简单,用自定义的图标挡住电池图标;点击这个图标就向左移动,覆盖整个状态栏,并用文本显示点击次数;再次点击就向右移动,只显示那个图标。主窗口也实现一个按钮,用于切换显示和隐藏自定义状态栏。
于是先实现一个StatusBarWindow类:
#import <Foundation/Foundation.h> @interface StatusBarWindow : UIWindow { UIImageView *iconImage; UILabel *textLabel; NSUInteger clickCount; } @property (nonatomic, assign) UIImageView *iconImage; @property (nonatomic, assign) UILabel *textLabel; @property (nonatomic) NSUInteger clickCount; + (StatusBarWindow *)newStatusBarWindow; @end @implementation StatusBarWindow @synthesize iconImage, textLabel, clickCount; static const CGRect windowFrame0 = {{296, 0}, {320, 20}}; static const CGRect windowFrame1 = {{0, 0}, {320, 20}}; static const CGRect imageFrame0 = {{6, 1}, {16, 16}}; static const CGRect imageFrame1 = {{2, 1}, {16, 16}}; static const CGRect textFrame = {{60, 0}, {200, 20}}; + (StatusBarWindow *)newStatusBarWindow { StatusBarWindow *statusBar = [[StatusBarWindow alloc] initWithFrame:windowFrame0]; if (statusBar) { statusBar.windowLevel = UIWindowLevelStatusBar + 1; UIImageView *background = [[UIImageView alloc] initWithFrame:windowFrame1]; background.image = [UIImage imageNamed:@"background.png"]; [statusBar addSubview:background]; [background release]; UIImageView *icon = [[UIImageView alloc] initWithFrame:imageFrame0]; icon.image = [UIImage imageNamed:@"clock.png"]; statusBar.iconImage = icon; [statusBar addSubview:icon]; [icon release]; UILabel *text = [[UILabel alloc] initWithFrame:textFrame]; text.backgroundColor = [UIColor clearColor]; text.textAlignment = UITextAlignmentCenter; statusBar.textLabel = text; [statusBar addSubview:text]; [text release]; } return statusBar; } - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:1]; textLabel.text = [NSString stringWithFormat:@"已点击%d次状态栏", ++clickCount]; if (clickCount % 2) { self.frame = windowFrame1; iconImage.frame = imageFrame1; } else { self.frame = windowFrame0; iconImage.frame = imageFrame0; } [UIView commitAnimations]; } @end
这里的难点主要是坐标的计算。需要知道的是状态栏高20 points,长320 points,电池图标约占用了右侧24 points的宽度。
我找了张时钟的图片,然后缩小到了16像素(高清为32像素)。图片不能太大,上下左右都得留2 points左右的空间,否则就显得很挤。
背景图片很容易搞定,截图后取没有图标的部分,然后拉伸到320像素(高清为640像素)长即可。
现在用newStatusBarWindow创建一个StatusBarWindow对象,你会发现什么效果都没有。原来UIWindow默认就是隐藏的,需要把hidden属性设为NO才能显示。
于是继续实现controller:
#import <UIKit/UIKit.h> #import "StatusBarWindow.h" @interface StatusBarDemoViewController : UIViewController { StatusBarWindow *statusBar; UIButton *switchButton; BOOL showStatusBar; } @property (nonatomic, retain) StatusBarWindow *statusBar; @property (nonatomic, retain) UIButton *switchButton; @property (nonatomic) BOOL showStatusBar; - (IBAction)click; @end @implementation StatusBarDemoViewController @synthesize statusBar, switchButton, showStatusBar; - (IBAction)click { showStatusBar = !showStatusBar; if (showStatusBar) { statusBar.hidden = NO; [switchButton setTitle: @"隐藏自定义状态栏" forState:UIControlStateNormal]; } else { statusBar.hidden = YES; [switchButton setTitle: @"显示自定义状态栏" forState:UIControlStateNormal]; } } - (void)viewDidLoad { [super viewDidLoad]; StatusBarWindow *statusBarWindow = [StatusBarWindow newStatusBarWindow]; self.statusBar = statusBarWindow; [statusBarWindow release]; CGRect frame = {{80, 200}, {160, 30}}; UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect]; button.frame = frame; [button addTarget:self action:@selector(click) forControlEvents:UIControlEventTouchUpInside]; [button setTitle:@"显示自定义状态栏" forState:UIControlStateNormal]; self.switchButton = button; [self.view addSubview:button]; } - (void)viewDidUnload { self.statusBar = nil; self.switchButton = nil; } - (void)dealloc { [super dealloc]; [statusBar release]; [switchButton release]; } @end
这边就更简单了,只是创建StatusBarWindow对象,然后切换它的hidden属性而已。
OK搞定,不知道你有没有发现这种方式的缺点呢?
很显然,自定义的状态栏必须是不透明的,否则无法挡住原生状态栏。这也就意味着你不能在应用中使用半透明样式的原生状态栏,否则看上去就很不协调了。
另一个缺点就是触摸事件不能传递给原生状态栏了,所以滚动到顶部的效果就得自己处理了,而越狱后关于状态栏的自定义手势也失效了。