先上效果图，很简单不喜勿喷，有错的地方，还请指正
ZRProgress1.gif
半透明的圆按百分比消失
ZRUploadProgressView.h文件
#import
typedef void(^ZRCompletionBlock)(void);
@interface ZRUploadProgressView : UIView
@property (nonatomic, strong) UIColor *progressColor;
// 0~1 小数
@property (nonatomic, assign) CGFloat progress;
@property (nonatomic, strong) NSString *imageName;
@property (nonatomic, copy) ZRCompletionBlock completionBlock;
@end
ZRUploadProgressView.m文件
#import "ZRUploadProgressView.h"
@interface ZRUploadProgressView ()
@property (nonatomic, strong) CAShapeLayer *trackLayer;
@property (nonatomic, strong) CAShapeLayer *imageLayer;
@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, strong) UIBezierPath *progressPath;
@end
@implementation ZRUploadProgressView
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self drawArcProgressView];
}
return self;
}
- (instancetype)initWithCoder:(NSCoder *)coder {
self = [super initWithCoder:coder];
if (self) {
[self drawArcProgressView];
}
return self;
}
- (void)drawArcProgressView {
CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height;
self.layer.masksToBounds = YES;
self.layer.cornerRadius = width/2.0;
self.imageLayer = [CAShapeLayer layer];
self.imageLayer.frame = self.bounds;
[self.layer addSublayer:self.imageLayer];
CGPoint center = CGPointMake(width/2, height/2);
UIBezierPath *progressPath = [UIBezierPath bezierPathWithArcCenter:center radius:(width)/ 2 startAngle:- M_PI_2 endAngle: -M_PI*5/2 clockwise:NO];
self.trackLayer = [CAShapeLayer layer];
self.trackLayer.frame = CGRectMake(0, 0, width, height);
self.trackLayer.fillColor = [UIColor clearColor].CGColor;
self.trackLayer.strokeColor = [UIColor orangeColor].CGColor;
self.trackLayer.lineWidth = width;
self.trackLayer.path = progressPath.CGPath;
self.trackLayer.strokeEnd = 1;
[self.layer addSublayer:self.trackLayer];
self.titleLabel = [[UILabel alloc] initWithFrame:self.bounds];
self.titleLabel.center = center;
self.titleLabel.hidden = YES;
self.titleLabel.textColor = [UIColor yellowColor];
self.titleLabel.font = [UIFont systemFontOfSize:16];
self.titleLabel.textAlignment = NSTextAlignmentCenter;
[self addSubview:self.titleLabel];
}
- (void)setProgressColor:(UIColor *)progressColor {
self.trackLayer.strokeColor = progressColor.CGColor;
}
- (void)setTitleColor:(UIColor *)titleColor {
self.titleLabel.textColor = titleColor;
}
- (void)setImageName:(NSString *)imageName {
[self.imageLayer setContents:(id)[UIImage imageNamed:imageName].CGImage];
}
- (void)setProgress:(CGFloat)progress {
_progress = MIN(1, MAX(0, progress));
_progress = 1.0 - progress;
self.trackLayer.strokeEnd = _progress;
NSString *progressStr = [NSString stringWithFormat:@"%.1f%%",100.0-_progress * 100];
self.titleLabel.text = progressStr;
if (_progress <= 0) {
if (self.completionBlock) {
self.completionBlock();
self.completionBlock = nil;
}
} else {
self.titleLabel.hidden = NO;
}
}
圆环按百分比加载
ZRCircleProgressView.h
#import
typedef void(^ZRCompletionBlock)(void);
@interface ZRCircleProgressView : UIView
@property (nonatomic, strong) UIColor *progressColor;
@property (nonatomic, strong) UIColor *titleColor;
@property (nonatomic, assign) CGFloat progressWidth;
@property (nonatomic, assign) CGFloat progress;
@property (nonatomic, copy) ZRCompletionBlock completionBlock;
@end
ZRCircleProgressView.m
#import "ZRCircleProgressView.h"
@interface ZRCircleProgressView()
@property (nonatomic, strong) CAShapeLayer *circleLayer;
@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, strong) UIBezierPath *path;
@end
@implementation ZRCircleProgressView
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self setupSubviews];
}
return self;
}
- (instancetype)initWithCoder:(NSCoder *)coder {
self = [super initWithCoder:coder];
if (self) {
[self setupSubviews];
}
return self;
}
- (void)setupSubviews {
CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height;
self.layer.masksToBounds = YES;
self.layer.cornerRadius = width/2.0;
self.circleLayer = [CAShapeLayer layer];
self.circleLayer.frame = self.bounds;
self.circleLayer.strokeEnd = 0;
self.circleLayer.lineWidth = 3;
self.circleLayer.strokeColor = [UIColor orangeColor].CGColor;
self.circleLayer.fillColor = [UIColor clearColor].CGColor;
CGPoint center = CGPointMake(width/2, height/2);
[self.layer addSublayer:self.circleLayer];
self.titleLabel = [[UILabel alloc] initWithFrame:self.bounds];
self.titleLabel.center = center;
self.titleLabel.hidden = YES;
self.titleLabel.textColor = [UIColor yellowColor];
self.titleLabel.font = [UIFont systemFontOfSize:16];
self.titleLabel.textAlignment = NSTextAlignmentCenter;
[self addSubview:self.titleLabel];
}
- (void)setTitleColor:(UIColor *)titleColor {
self.titleLabel.textColor = titleColor;
}
- (void)setProgressColor:(UIColor *)progressColor {
self.circleLayer.strokeColor = progressColor.CGColor;
}
- (void)setProgress:(CGFloat)progress {
_progress = MIN(1, MAX(0, progress));
self.circleLayer.strokeEnd = _progress;
NSString *progressStr = [NSString stringWithFormat:@"%.1f%%",_progress * 100];
self.titleLabel.text = progressStr;
if (_progress >= 1) {
if (self.completionBlock) {
self.completionBlock();
self.completionBlock = nil;
}
} else {
self.titleLabel.hidden = NO;
}
}
- (void)setProgressWidth:(CGFloat)progressWidth {
if (!_path) {
CGFloat width = self.frame.size.width;
CGPoint center = CGPointMake(width/2, width/2);
_path = [UIBezierPath bezierPathWithArcCenter:center radius:(width/2 - progressWidth/2) startAngle:-M_PI_2 endAngle:3*M_PI/2 clockwise:YES];
self.circleLayer.path = _path.CGPath;
}
self.circleLayer.lineWidth = progressWidth;
}
使用
#import "ViewController.h"
#import "ZRUploadProgressView.h"
#import "ZRCircleProgressView.h"
@interface ViewController ()
@property (nonatomic, strong) NSTimer *timer;
@property (nonatomic, assign) CGFloat progress;
@property (nonatomic, strong) ZRUploadProgressView *uploadView;
@property (nonatomic, strong) ZRCircleProgressView *circleView;
@property (nonatomic, strong) ZRCircleProgressView *circleView1;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.progress = 0.0f;
CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
CGFloat width = (screenWidth-80)/3;
CGFloat orgY = [UIScreen mainScreen].bounds.size.height/2 - width/2;
self.uploadView = [[ZRUploadProgressView alloc] initWithFrame:CGRectMake(20, orgY, width, width)];
self.uploadView.progressColor = [[UIColor blackColor] colorWithAlphaComponent:0.4];
self.uploadView.imageName = @"1.jpeg";
self.uploadView.backgroundColor = [UIColor clearColor];
self.uploadView.completionBlock = ^{
NSLog(@"uploadView - completion");
};
[self.view addSubview:self.uploadView];
self.circleView = [[ZRCircleProgressView alloc] initWithFrame:CGRectMake(CGRectGetMaxX(self.uploadView.frame) + 20, orgY, width, width)];
self.circleView.backgroundColor = [UIColor cyanColor];
self.circleView.progressWidth = width/2;
self.circleView.completionBlock = ^{
NSLog(@"circleView - completion");
};
[self.view addSubview:self.circleView];
self.circleView1 = [[ZRCircleProgressView alloc] initWithFrame:CGRectMake(CGRectGetMaxX(self.circleView.frame) + 20, orgY, width, width)];
self.circleView1.backgroundColor = [UIColor blueColor];
self.circleView1.progressWidth = 10;
self.circleView1.completionBlock = ^{
NSLog(@"circleView1 - completion");
};
[self.view addSubview:self.circleView1];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)makeTimer {
if (!_timer) {
_timer = [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(startTimer) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}
}
- (void)startTimer {
CGFloat progressRandom = (arc4random()%100)/10000.0;
self.progress += progressRandom;
if (self.progress >= 1) {
[self.timer invalidate];
self.timer = nil;
}
self.uploadView.progress = self.progress;
self.circleView.progress = self.progress;
self.circleView1.progress = self.progress;
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
// 模拟下载动作
[self makeTimer];
}
github传送门ZRProgress记得留下你的Star，Star是我更新的动力