`
yidongkaifa
  • 浏览: 4065561 次
文章分类
社区版块
存档分类
最新评论

Three20研究院之自制IOS顶部状态栏详解(六)

 
阅读更多

IOS状态栏是什么地方? 它是IOS设备屏幕顶部显示信号以及电池的区域。状态栏默认的高度是20像素,状态栏在软件开发中有何作用?联网应用中可在自动帮用户下载数据时使用,推荐在状态栏中予以显示。状态栏可以通过程序来控制隐藏与显示,也可以在状态栏之上添加Loading的动画,让用户感觉目前正处于下载状态中。下面我们先学习最简单的一种,就是在状态栏之上添加下载的Loading动画。如下图所示,在屏幕顶部状态栏中,信号图标旁边已经出现动画Loading的标志,它目前正在一直转圈。另外,本篇文章适用于普通IOS软件开发与Three20软件开发。

动画显示与隐藏的代码很简单,如下所示:

1 //开启状态栏动画
2 [[UIApplication sharedApplication] setNetworkActivityIndicatorVisible:YES];
3 //关闭状态栏动画
4 [[UIApplication sharedApplication] setNetworkActivityIndicatorVisible:NO];

这样的动画确实有点局限,不能修改动画的位置,我们可以将整个状态栏利用起来。写一个新视图覆盖至原有状态栏视图之上,在新视图中写入需要的东西。在学习它之前我们先学习如何隐藏与显示状态栏。

状态栏显示与隐藏的代码很简单,如下所示:

1 //隐藏状态栏
2 [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:YES];
3
4 //显示状态栏
5 [[UIApplication sharedApplication] setStatusBarHidden:NO withAnimation:YES];

setStatusBarHidden :表示状态栏显示与隐藏。

withAnimation:表示是否播放显示与隐藏的过渡动画。

别高兴的太早,它仅仅只是隐藏状态栏,所以屏幕顶部还是会空留20像素的白条,为了让显示上更佳彻底,需要继续重新设定整个窗口的显示区域以及标题栏的位置:

1 //隐藏状态栏
2 [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:YES];
3 //重新设定窗口的显示区域
4 [[UIApplication sharedApplication].keyWindow setFrame:CGRectMake(0, 0, 320, 480)];
5 //重新设定标题栏显示的位置
6 [self.navigationController.navigationBar setFrame:CGRectMake(0, 0, 320, 44)];

如下图所示,状态条已经完全去掉,包括顶部的白条,是不是很神奇呢?

下面学习本文的重点内容,重写状态栏内容。如下图所示,状态栏顶部已经写入读取进度的百分比,为了让效果更佳好,在状态栏顶部将绘制进度条以及下载进度的百分比。在状态栏左侧将绘制读取动画,一个圆圈不停的转啊转啊的。嘎嘎~

下面开始详细的代码介绍。

ViewController.h

01 #import <Three20/Three20.h>
02
03 @interface ViewController : TTViewController
04 {
05 //下载进度显示视图
06 UITextView*textView;
07 //状态条顶部Loading动画视图
08 UIActivityIndicatorView *activity;
09 //计时器
10 NSTimer *timer;
11 //应用程序的句柄
12 UIApplication *app;
13 //计数
14 inttimeCount;
15 }
16 @end

ViewController.m

001 #import "ViewController.h"
002
003 @implementation ViewController
004
005 - (void)viewDidLoad
006 {
007 [super viewDidLoad];
008
009 //设置标题栏文字
010 self.title =@"雨松MOMO软件开发";
011 //设置视图背景显示颜色
012 [self.view setBackgroundColor:[UIColor blackColor]];
013
014 //创建图片视图
015 TTImageView *imageview = [[[TTImageView alloc] initWithFrame:
016 CGRectMake(100, 50, 120, 120)] autorelease];
017
018 //设置图片视图显示的图片资源
019 imageview.defaultImage = TTIMAGE(@"bundle://0.jpg");
020 //将图片视图加入整个视图当中
021 [self.view addSubview:imageview];
022
023 //按钮的文字信息
024 NSArray *titles = [[NSArray alloc] initWithObjects:
025 @"隐藏状态栏",
026 @"显示状态栏",
027 @"更新状态栏",
028 nil];
029
030 for(inti =0; i < [titles count]; i++)
031 {
032
033 //创建普通按钮
034 UIButton *button = [UIButton buttonWithType:1];
035 //设置按钮位置
036 button.frame = CGRectMake(0, 200 + i * 40, 320, 30);
037 //设置按钮现实文字
038 [button setTitle:[titles objectAtIndex:i] forState:UIControlStateNormal];
039 //设置按钮标记
040 button.tag = i;
041 //设置按钮点击后 绑定响应方法
042 [button addTarget:self action:@selector(ButtonPressed:) forControlEvents:UIControlEventTouchUpInside];
043 //将按钮添加入视图中
044 [self.view addSubview: button];
045 }
046
047 //得到应用程序的句柄
048 app = [UIApplication sharedApplication];
049
050 }
051
052 -(void)ButtonPressed:(id)buttonID
053 {
054 //获取点击的按钮
055 UIButton *button = (UIButton *)buttonID;
056 switch(button.tag)
057 {
058 case0:
059 //注解1
060 [app setStatusBarHidden:YES withAnimation:YES];
061 [app.keyWindow setWindowLevel:UIWindowLevelStatusBar];
062 [app.keyWindow setFrame:CGRectMake(0, 0, 320, 480)];
063 break;
064 case1:
065 //注解2
066 [app setStatusBarHidden:NO withAnimation:YES];
067 [app.keyWindow setWindowLevel:UIWindowLevelStatusBar];
068 [app.keyWindow setFrame:CGRectMake(0, 20, 320, 460)];
069 break;
070 case2:
071 //注解3
072 [app setStatusBarHidden:NO withAnimation:YES];
073 [app.keyWindow setWindowLevel:UIWindowLevelStatusBar];
074 [app.keyWindow setFrame:CGRectMake(0, 20, 320, 460)];
075 [self performSelector:@selector(startUpdate) withObject:nil afterDelay:0.4];
076 break;
077
078 }
079
080 //注解4
081 [self.navigationController.navigationBar setFrame:CGRectMake(0, 0, 320, 44)];
082
083 }
084
085 - (void)dealloc
086 {
087 //释放
088 TT_RELEASE_SAFELY(textView);
089 TT_RELEASE_SAFELY(activity);
090 TT_RELEASE_SAFELY(timer);
091 TT_RELEASE_SAFELY(app);
092 [super dealloc];
093 }
094
095 - (void) startUpdate
096 {
097 if(timer == nil)
098 {
099 //顶部文本视图
100 textView = [[UITextView alloc] initWithFrame:CGRectMake(0, -25, 320, 25)];
101 [textView setBackgroundColor:[UIColor blackColor]];
102 [textView setText:@"开始更新"];
103 [textView setTextColor:[UIColor whiteColor]];
104 [textView setTextAlignment:UITextAlignmentCenter];
105 [textView setFont:[UIFont systemFontOfSize:15]];
106 [app.keyWindow addSubview:textView];
107
108 //注解5
109 [UIView beginAnimations:@"anim1"context:nil];
110 [UIView setAnimationDuration:1.0];
111 textView.alpha = 0.0f;
112 textView.alpha = 1.0f;
113 [UIView commitAnimations];
114
115 [textView release];
116
117 //注解6
118 timer = [NSTimer scheduledTimerWithTimeInterval: 0.1
119 target: self
120 selector: @selector(handleTimer:)
121 userInfo: nil
122 repeats: YES];
123 //开始播放loading动画
124 [self addLoading];
125
126 }
127 }
128 - (void) handleTimer: (NSTimer *) t
129 {
130 //开始计数,没进该方法一次++
131 timeCount++;
132 //计数器小于100表示未下载完毕
133 if(timeCount <=100)
134 {
135 //绘制显示百分比
136 NSString *text = [NSString stringWithFormat:@"读取进度百分之:%d ",timeCount];
137 [textView setText:text];
138 }else
139 {
140
141 //计数器大于100表示下载完毕
142 [textView setText:@"读取完毕"];
143 timeCount = 0;
144 //删除时间计时器
145 [self removeTimer];
146 //删除读取动画
147 [self removeLoading];
148
149 //注解7
150 [UIView beginAnimations:@"anim"context:nil];
151 [UIView setAnimationDuration:1.0];
152 textView.alpha= 1.0f;
153 textView.alpha = 0.0f;
154 [UIView commitAnimations];
155 }
156 }
157
158 - (void)addLoading
159 {
160 //创建Loading动画视图
161 activity = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
162 //设置动画视图的风格,这里设定它位白色
163 activity.activityIndicatorViewStyle=UIActivityIndicatorViewStyleWhite;
164 //设置它显示的区域
165 activity.frame = CGRectMake(0, -18, 20, 18);
166 //将视图加入窗口中
167 [app.keyWindow addSubview:activity];
168 //开始播放动画
169 [activity startAnimating];
170 //释放
171 [activity release];
172
173 }
174
175 -(void)removeLoading
176 {
177 //结束动画
178 [activity stopAnimating];
179 //删除动画视图
180 [activity removeFromSuperview];
181 }
182
183 -(void)removeTimer
184 {
185 //停止时间计时器
186 TT_INVALIDATE_TIMER(timer);
187
188 //等价于上面的方法
189 // //停止时间计时器
190 // [timer invalidate];
191 // //让它等于nil
192 // timer = nil;
193
194 }
195
196 @end

注解1:setStatusBarHidden:YES设定状态栏的隐藏,隐藏状态栏后,为了让下方原有的视图自动向上移动,那么就需要重新设定窗口的等级与显示区域。使用setWindowLevel方法可设定窗口的等级,窗口等级可分为三种:普通窗口,警告窗口,状态栏窗口,所以这里我们设定窗口等级为UIWindowLevelStatusBar(状态栏窗口)。窗口等级设定完毕后紧接着需要重新设定窗口的显示区域,重新设定窗口的显示区域为CGRect(0,0,320,480),表示新的窗口将完整填充整个手机屏幕。

注解2:状态栏的显示与状态栏的隐藏是一个道理,setStatusBarHidden:NO 设置状态栏可见,继续设定窗口的等级与显示区域。因为状态栏的高度为20,所以现在设定窗口的显示区域为CGRect(0,20,320,460),可保持视不包含状态栏的20像素高度,视图将填充下方整个屏幕。

注解3:在这里我们需要将新的视图覆盖至状态栏之上,首先是隐藏状态栏,隐藏时由于开启了隐藏状态栏的动画,所以延迟0.4毫秒等状态按彻底隐藏后在将新的视图覆盖至状态栏之上。使用performSelector方法,参数1表示延迟一段时间后执行的方法,参数2表示附带一个对象,参数3表示延迟的时间。这里是延迟0.4毫秒后执行startUpdate方法,下载属于以及更新视图都写在该方法中。

注解4:重新设定标题栏的位置,这个一定要设定,否则由于修改窗口的显示区域后标题栏显示上会出现偏差。

注解5:实现视图切换淡入淡出的效果,beginAnimations方法表示即将开始播放一段动画,setAnimationDuration方法表示设定动画播放的长度,textView.alpha表示设定视图的透明度,这里设定了2个透明度,0.0表示完全透明,1.0表示完全不透明,当然还可继续设定更多的视图变化,这段动画的含义是在1秒内现实视图从完全透明到完全不透明。最后执行[UIView commitAnimations]方法才是真正的开始播放动画,请大家记住beginAnimations 与commitAnimations两个方法必需成对儿出现,视图的任何变化都需要写在两个方法之间。

注解6:NSTimer表示时间计数器,它的原理就是在程序中新开一个子线程,并且子线程将每隔一段时间执行一次。本节我们使用它模拟用户下载数据的时间。这段代码表示程序将每隔0.1秒执行一次handleTimer方法,在handleTimer方法中去更新状态栏视图显示的文字,下载百分比。数据下载完毕后关闭视图,播放淡入淡出动画并且恢复原有状态栏。


最后在说说Three20中3个比较常用释放对象的宏定义:

1 #define TT_RELEASE_SAFELY(__POINTER) { [__POINTER release]; __POINTER = nil; }
2 #define TT_INVALIDATE_TIMER(__TIMER) { [__TIMER invalidate]; __TIMER = nil; }
3
4 // Release a CoreFoundation object safely.
5 #define TT_RELEASE_CF_SAFELY(__REF) { if (nil != (__REF)) { CFRelease(__REF); __REF = nil; } }

TT_RELEASE_SAFELY() :表示释放对象,并且将该对象赋值为nil。

TT_INVALIDATE_TIMER():停止时间计数器,并且将该计数器赋值为nil。

TT_RELEASE_CF_SAFELY:检测对象是否为nil,如果不为nil释放对象,最后赋值为nil。

最后欢迎各位盆友可以和MOMO一起讨论Three20软件开发,如果你觉得看得不清楚,MOMO附带上本章的源码下载,希望大家可以一起学习 哈哈~。哇咔咔~ MOMO愿和 大家好好学习,大家一起进步哈~!!!



(下载后必需搭建three20环境成功后才能运行~ 因为three20为引用加载,所以程序路径都是我本机的请见谅!或者你可可以将你的Three20路径修改的和我一样就可以直接运行啦,我的路径是:User (用户) -> Share(共享)->Three20)。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics