UIActivityIndicatorView

UIActivityIndicatorView 非常简单 ,就是一个转圈圈的控件

初始化方法
– initWithActivityIndicatorStyle
控制一个Activity Indicator
– startAnimating
– stopAnimating
– isAnimating
hidesWhenStopped 属性
配置Activity Indicator 外观
activityIndicatorViewStyle 属性
color 属性  (iOS 5  引入)
常量三个
typedef enum {
UIActivityIndicatorViewStyleWhiteLarge,
UIActivityIndicatorViewStyleWhite,
UIActivityIndicatorViewStyleGray,
} UIActivityIndicatorViewStyle;
使用方式就是
  1. UIActivityIndicatorView *testActivityIndicator = [UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite]];
  2. testActivityIndicator.center = CGPointMake(100.0f, 100.0f);//只能设置中心,不能设置大小
  3. [testActivityIndicator setFrame = CGRectMack(100, 100, 100, 100)];
  4. // 不建议这样设置,因为UIActivityIndicatorView是不能改变大小只能改变位置
  5. // 这样设置得到的结果是控件的中心在(100,100)上,而不是和其他控件的frame一样左上角在(100, 100)长为100,宽为100.
  6. [self addSubview:testActivityIndicator];
  7. testActivityIndicator.color = [UIColor redColor]; // 改变圈圈的颜色为红色; iOS5引入
  8. [testActivityIndicator startAnimating]; // 开始旋转
  9. [testActivityIndicator stopAnimating]; // 结束旋转
  10. [testActivityIndicator setHidesWhenStopped:YES]; //当旋转结束时隐藏
还有一个是isAnimating方法,返回一个BOOL值,可以用这个方法来判断控件是否在旋转
initWithActivityIndicatorStyle是UIActivityIndicatorView唯一的初始化方法
属性值是一个枚举变量,只有三个值:
UIActivityIndicatorViewStyleWhite; 白色圆圈
UIActivityIndicatorViewStyleWhiteLarge; 白色圆圈 但是要大些
UIActivityIndicatorViewStyleGray; 灰色圆圈

本文出自 “KeepMoving程序媛” 博客,请务必保留此出处http://joylong.blog.51cto.com/1052131/1082952

 

UIKit 的 main thread 一次只有做一件事,如果你在 ViewController 傳輸檔案,那麼其他的動作會等傳輸完之後再接下去做,所以你要另外再生出一個 thread 去處理 UIActivityIndicatorView 的動作

 

使用 Objective-C 來處理 thread 是很簡單的,比 Java 還容易,在後面的說明裡會看到。

首先,在 .h 檔的 @interface 內加上

1
UIActivityIndicatorView *activityIndicator;

以及

1
@property (nonatomicretainIBOutlet UIActivityIndicatorView*activityIndicator;

另外,再加上兩個 method

1
2
3
-(void)actIndicatorBegin;
-(void)actIndicatorEnd;

開啓 .m 檔,在 @implementation 的下面加上

1
@synthesize activityIndicator;

在 (void)loadView 內把你的 UIActivityIndicatorView 加上去你要的 View 上面,我這裡加在 UIToolbar 工具列裡面的一個 UIBarButtonItem 按鈕

1
2
3
4
5
6
7
activityIndicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(0, 0, 24, 24)];
[activityIndicator setCenter:CGPointMake(12, 12)];
[activityIndicator setHidesWhenStopped:YES];
[activityIndicator setActivityIndicatorViewStyle:UIActivityIndicatorViewStyleWhite];
[activityIndicator startAnimating];
UIBarButtonItem *activityItem = [[[UIBarButtonItem alloc] initWithCustomView: activityIndicator] autorelease];

再把這個 UIBarButtonItem 加到 UIToolbar 內

1
2
3
NSArray *items = [NSArray arrayWithObjects:activityItem, nil];
toolbarTop.items = items;

在處理網路傳輸之前先執行這個 thread

1
2
3
4
5
6
7
[NSThread detachNewThreadSelector: @selector(actIndicatorBegin) toTarget:self withObject:nil];
//需要時間下載檔案的程式寫在這裡
url = [NSURL URLWithString:@"http://網址/圖片檔.jpg"];
img =[UIImage imageWithData:[NSData dataWithContentsOfURL:url]];

網路傳輸完之後再執行這個 thread

1
2
[NSThread detachNewThreadSelector: @selector(actIndicatorEnd) toTarget:self withObject:nil];

再加上這兩個 method 開關旋轉狀態

1
2
3
4
5
6
7
8
- (void) actIndicatorBegin {
 [activityIndicator startAnimating];
}
-(void) actIndicatorEnd {
 [activityIndicator stopAnimating];
}

就這麼簡單,做看看吧!

 

————-

 

二、UIProgressView  进度指示器

UIProgressView 与UIActivityIndicatorView 相似,只不过它提供了一个接口让你可以显示一个类似进度条的东西,这样就能让用户知道当前操作完成了多少。

1.创建

  1. UIProgressView* progressView = [ [ UIProgressView   alloc ]  
  2.  initWithFrame:CGRectMake(150.0,20.0,130.0,30.0)];  

2. 属性设置

风格:

  1. progressView .UIProgressViewStyle= UIProgressViewStyleDefault;  

系统给你提供了2种风格:

  1. UIProgressViewStyleDefault                 标准进度条  
  1. UIProgressViewStyleDefault    深灰色进度条,用于工具栏中  

3.显示

  1. [  self.toolBar addSubview:progressView ];  

4.进度

  1. 当它显示出来时你的程序可以更新它的进度,属性progre是一个0.0到1.0之间的浮点数:  
  1. progressView.progress = 0. 5;  

三、网络活动指示器

  1. 当你的应用程序使用网络时,应当在iPhone的状态条上放置一个网络指示器,警告用户正在使用网络。这时你可以用UIApplication的一个名为networkActivityIndicatorVisible的属性。通过设置这个可以启用或禁用网络指示器:UIApplication* app = [ UIApplication  sharedApplication ];  
  2. pp.networkActivityIndicatorVisible = YES;  

UIActivityIndicatorView和UIProgressView都继承自UIView,所以他们可以附属在其他视图上。UIActivityIndicatorView是一个进度提示器,显示一个小圆圈在转动,主要用在一些耗时操作的提示上,比如网络请求;UIProgressView是一个进度提示条,不过它可以显示一个进度,可以告知用户操作已经进行了多少,这二者的目的都是为了在应用程序有耗时操作时在UI上进行显示,提高用户体验。

下面分别来创建这个两个控件:

首先在ViewController.h中声明代码:

  1. #import <UIKit/UIKit.h>  
  2.   
  3. @interface ViewController : UIViewController  
  4.   
  5. @property(retain,nonatomic) UIActivityIndicatorView *activityIndicator;  
  6. @property(retain,nonatomic) UIProgressView *progressView;  
  7.   
  8. – (IBAction)startIndicator:(id)sender;  
  9. – (IBAction)startProgress:(id)sender;  
  10. – (IBAction)startNetWork:(id)sender;  
  11.   
  12. @end  

然后修改ViewController.m文件,具体的解释都在注释里面

  1. #import “ViewController.h”  
  2.   
  3. @interfaceViewController ()  
  4.   
  5. @end  
  6.   
  7. @implementation ViewController  
  8. @synthesize activityIndicator = _activityIndicator;  
  9. @synthesize progressView = _progressView;  
  10.   
  11. – (void)viewDidLoad  
  12. {  
  13.     [superviewDidLoad];  
  14.           
  15. }  
  16.   
  17. – (IBAction)startIndicator:(id)sender {  
  18.     //初始化指示器  
  19.     self.activityIndicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(140, 200, 30, 30)];  
  20.       
  21.       
  22.     self.activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyleWhite;  
  23.       
  24.     //停止后是否隐藏(默认为YES)  
  25.     self.activityIndicator.hidesWhenStopped = YES;  
  26.       
  27.     //将Indicator添加到视图中  
  28.     [self.viewaddSubview:self.activityIndicator];  
  29.       
  30.     //开始转动  
  31.     [self.activityIndicator startAnimating];  
  32.       
  33.     //操作队列  
  34.     NSOperationQueue *operationQueue = [[NSOperationQueue alloc] init];  
  35.       
  36.     //设置最大的操作数  
  37.     [operationQueue setMaxConcurrentOperationCount:1];  
  38.   
  39.     //构建一个操作对象,selector指定的方法是在另外一个线程中运行的  
  40.     NSInvocationOperation *operation = [[NSInvocationOperation alloc] initWithTarget:self   
  41.                                                                             selector:@selector(runIndicator) object:nil];  
  42.     //将操作加入队列,此时后台线程开始执行  
  43.     [operationQueue addOperation:operation];  
  44.   
  45. }  
  46.   
  47. – (IBAction)startProgress:(id)sender {  
  48.     self.progressView = [[UIProgressView alloc] initWithFrame:CGRectMake(70, 260, 180, 20)];  
  49.       
  50.     self.progressView.progressViewStyle = UIProgressViewStyleDefault;  
  51.       
  52.     //设置进度,值为0——1.0的浮点数  
  53. //    self.progressView.progress = .5;  
  54.     [self.viewaddSubview:self.progressView];  
  55.       
  56.     //设定计时器,每隔1s调用一次runProgress方法  
  57.     [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(runProgress)   userInfo:nil repeats:YES];  
  58. }  
  59.   
  60. //在状态栏显示有网络请求的提示器  
  61. – (IBAction)startNetWork:(id)sender {  
  62.     UIApplication *app = [UIApplication sharedApplication];  
  63.     if (app.isNetworkActivityIndicatorVisible) {  
  64.         app.networkActivityIndicatorVisible = NO;  
  65.     }else {  
  66.         app.networkActivityIndicatorVisible = YES;  
  67.     }  
  68. }  
  69.   
  70. -(void)runIndicator  
  71. {  
  72.     //开启线程并睡眠三秒钟  
  73.     [NSThread sleepForTimeInterval:3];  
  74.     //停止UIActivityIndicatorView  
  75.     [self.activityIndicator stopAnimating];  
  76. }  
  77.   
  78. //增加progressView的进度  
  79. -(void)runProgress  
  80. {  
  81.     self.progressView.progress += .1;  
  82. }  
  83.   
  84. – (void)viewDidUnload  
  85. {  
  86.     [superviewDidUnload];  
  87.     // Release any retained subviews of the main view.  
  88.     [self.activityIndicator release];  
  89.     [self.progressView release];  
  90. }  
  91.   
  92. @end  

编译运行后效果如下:

四、拓展

  1. 是不是觉得又学了点新东西呢?确实。不过我还有个更好的东西推荐:MBProgressHUD   https://github.com/jdg/MBProgressHUD 一个更NB的第三方进度指示器,你可以按照它提供的例子去使用它,很强大的。不过有一点我要提醒你的是它是异步的,所以并不能阻塞你当前的程序,如果你想阻塞你的程序还要在逻辑控

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s