进度条控件 (UIProgressView)

进度条控件 (UIProgressView)

 

1. UIProgressView 控件属性

 

 

UIProgressView 属性截图 : 

 

 

(1) Style 属性

 

Style 属性 : 

-- Default : 使用默认风格的进度条;

-- Bar : 工具条风格;

 

 

 

(2) progress 属性

 

 

Progress 属性 : 设置已进行的进度的比例值, 取值范围 0.0 ~ 1.0;

 

 

 

(3) Progress Tint 属性

 

 

Progress Tint 属性 : 已完成的颜色;

 

 

 

(4) Track Tint 属性

 

 

Track Tint 属性 : 进度条轨道颜色;

 

 

 

(5) progressImage 属性

 

 

ProgressImage 属性 : 设置进度条完成的图片;

-- 注意 : 该属性在 Interface Builder 中没有体现出来;

 

 

 

(6) trackImage 属性

 

 

trackImage 属性 : 设置进度条轨道图片;

-- 注意 : 代码中设置, 界面设计文件中无该属性;

 

 

 

 

2. 可拉伸图片

 

 

 

 

(1) 可拉伸图片用法

 

 

可拉伸图片作用 : 在上述进度条中, 设置的 progressImage 和 trackImage 必须是可拉伸图片;

 

 

 

(2) 可拉伸图片创建

 

 

创建可拉伸图片 : 使用 UIImage 创建 可拉伸图片, 通过 UIEdgeInsets 结构体定义图片拉伸区域;

-- UIEdgeInsets 结构体 : 包括 left, top, right, bottom 四个值;

-- 缩放主体 : 图片缩放只在 UIEdgeInsets 定义的 四个属性值 区域缩放, 图片的中心部分是不进行缩放的;

 

 

 

 

3. 定制进度条示例

 

 

 

(1) 相关 API 简介 

 

 

相关 API 简介 : 

-- 创建可拉伸的 UIImage : 

 

UIImage * trackImage = [[UIImage imageNamed:@"Snip20151210_139.png"] resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeTile];

 

 

-- 为进度条设置可拉伸图片 : 

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

-- 创建定时器 : 

 

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

 

 

(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;
- (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)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

 

-- 运行展示 : 可拉伸图片效果没有出现, 待调试;