进度环控件 (UIActivityIndicatorView)

进度环控件 (UIActivityIndicatorView)

 

1. 进度环控件 (UIActivityIndicatorView) 属性

  

UIActivityIndicatorView 属性截图 : 

(1) Style 属性

Style 属性 : 

-- Large White : 大的 白色 风格;

-- White : 白色风格;

-- Gray : 灰色风格;

(2) Color 属性

Color 属性 : 

-- 作用 : 设置进度条的颜色, 设置该属性会覆盖之前选中的风格中的颜色;

(3) Behavior 属性

Behavior 属性 : 

-- Animating : 显示出来后立即转动;

-- Hides When Stopped : 停止时自动隐藏;

(4) UIActivityIndicatorView 大小

两种大小 : 

-- 标准风格 : 像素值 20 x 20;

-- 大风格 : 像素值 37 x 37;

(5) 控制方法

UIActivityIndicatorView 控制方法 : 

-- 开始转动 : startAnimating 方法;

-- 停止转动 : stopAnimating 方法;

2. UIActivityIndicatorView 代码示例

(1) 创建 IBOutletConnection

创建 IBOutletConnection : 

-- 按住 Option 键 将一个元素拖动到 OCViewController.h 中 : 其中的 Connection 属性, 不要选择 IBOutlet 属性, 选择 IBOutletConnection 属性;

-- 将想要添加到 IBOutletConnection 中的控件拖动到 OCViewController.h 中的 IBOutletConnection 属性变量上 : 

(2) 代码示例

代码示例 : 

-- 界面设计文件 : 

-- OCViewController.h : 

//
//  OCViewController.h
//  UIProgressView
//
//  Created by octopus on 15-12-10.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface OCViewController : UIViewController

@property (strong, nonatomic) IBOutlet UIProgressView *progress1;
@property (strong, nonatomic) IBOutlet UIProgressView *progress2;
@property (strong, nonatomic) IBOutlet UIProgressView *progress3;


@property (strong, nonatomic) IBOutletCollection(UIActivityIndicatorView) NSArray *IndicatorCollection;
- (IBAction)start:(id)sender;
- (IBAction)end:(id)sender;


- (IBAction)click:(id)sender;
@end

-- OCViewController.m : 

//
//  OCViewController.m
//  UIProgressView
//
//  Created by octopus on 15-12-10.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import "OCViewController.h"

@interface OCViewController ()

@end

@implementation OCViewController

//定时器
NSTimer * timer;
//进度条进度
CGFloat progress;

/*
    CGFloat : 是 float 类型, 在 IOS 中定义了下面的类型
    -- 32 位 : typedef float CGFloat;// 32-bit
    -- 64 位 : typedef double CGFloat;// 64-bit

    CGPoint : 二维坐标点;
    -- 定义代码 :
        struct CGPoint {
            CGFloat x;
            CGFloat y;
        };
        typedef struct CGPoint CGPoint;

    CGSize : 矩形的宽度和高度;
    -- 定义代码 :
        struct CGSize {
            CGFloat width;
            CGFloat height;
        };
        typedef struct CGSize CGSize;

    CGRect : 矩形的位置和大小;
    -- 定义代码 :
        struct CGRect {
            CGPoint origin;
            CGSize size;
        };
        typedef struct CGRect CGRect;
 */

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    //创建 可拉伸的图片, 平铺样式
    UIImage * trackImage = [[UIImage imageNamed:@"Snip20151210_139.png"] resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeTile];
    UIImage * progressImage = [[UIImage imageNamed:@"Snip20151210_140.png"] resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeTile];

    //将可拉伸图片设置给进度条
    self.progress3.progressImage = progressImage;
    self.progress3.trackImage = trackImage;

}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction)start:(id)sender {
    for(int i = 0; i < 4; i ++){
        //从集合中获取 UIActivityIndicatorView 控件并开启动画
        [[self.IndicatorCollection objectAtIndex:i] startAnimating];
    }
}

- (IBAction)end:(id)sender {
    for(int i = 0; i < 4; i ++){
        //从集合中获取 UIActivityIndicatorView 控件并结束动画
        [[self.IndicatorCollection objectAtIndex:i] stopAnimating];
    }
}

- (IBAction)click:(id)sender {
    //进度条
    progress = 0;

    //定时器
    timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(doProgress) userInfo:nil repeats:YES];

}

- (void) doProgress{
    progress += 0.1;
    if(progress > 1.0){
        [timer invalidate];
    }else{
        [self.progress1 setProgress:progress animated:YES];
        [self.progress2 setProgress:progress animated:YES];
        [self.progress3 setProgress:progress animated:YES];
    }


}

@end

-- 页面展示效果 :