环形下载进度条 简单使用

先直接上效果图（可用于文件下载进度简单显示）：

代码部分也很简单，写成一个工具类 .h文件属性部分均可自定义

.h 文件
@interface FTCycleView : UIView

@property (nonatomic, strong) UILabel *progresslabel;     /**< 显示进度的Label */
@property (nonatomic, strong) UIColor *fillColor;         /**< 填充颜色 */
@property (nonatomic, strong) UIColor *strokeColor;       /**< 边框路径颜色 */
@property (nonatomic, assign) CGFloat lineWidth;          /**< 线的宽度 */

/** 绘制环形进度条 
    progress:进度值 0~1.0
 */
- (void)drawCycleProgress:(CGFloat)progress;

@end

.m 文件
@interface FTCycleView () {
    CGFloat preProgress;       /**< 先前进度 */
}
@implementation FTCycleView

#pragma mark - get
- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame: frame]) {
       /* 设置默认颜色和环形进度条宽度 */
        preProgress = 0;
        _fillColor = [UIColor  clearColor];
        _strokeColor = [UIColor greenColor];
        _lineWidth = 10;
    }
    return self;
}

 /** 显示进度的Label */
- (UILabel *)progresslabel {
    if (_progresslabel == nil) {
        _progresslabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width*0.8, self.frame.size.height*0.4)];
        _progresslabel.textAlignment = NSTextAlignmentCenter;
        _progresslabel.center = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);
        [_progresslabel setFont:[UIFont systemFontOfSize:10.0*(self.frame.size.width/35.0)]];
        [self addSubview:_progresslabel];
    }
    return _progresslabel;
}

/** 绘制环形进度条
 progress:进度值 0~1.0
 */
- (void)drawCycleProgress:(CGFloat)progress {
    self.progresslabel.text = [NSString stringWithFormat:@"%.0f%%",progress*100];
    
    // 获取环形路径 （画一个圆 填充色透明 设置线框宽度为10，获得环形）
    CAShapeLayer *progressLayer = [CAShapeLayer layer];
    progressLayer.frame = self.bounds;
    progressLayer.fillColor = self.fillColor.CGColor;              // 填充颜色
    progressLayer.strokeColor = self.strokeColor.CGColor;          // 边框路径颜色
    //    _progressLayer.opacity = 1;                              // 背景颜色的透明度
    progressLayer.lineCap = kCALineCapRound;                       // 线的边缘是圆的
    progressLayer.lineWidth = self.lineWidth;                      // 线的宽度
    
    CGPoint center = CGPointMake(self.frame.size.width/2, self.frame.size.width/2);
    CGFloat radius = self.frame.size.width/2;
    CGFloat startA = - M_PI_2 + M_PI*2*preProgress;         // 起始点
    CGFloat endA = - M_PI_2 + M_PI*2*progress;              // 终点 
    preProgress = progress;
    
    // 绘制
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius
                                                    startAngle:startA endAngle:endA clockwise:YES];
    progressLayer.path = path.CGPath;
    [self.layer addSublayer: progressLayer];
    
    // 动画效果
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.fromValue = @(0.0);
    animation.toValue = @(1.0);
    animation.duration = 0.1;
    [progressLayer addAnimation:animation forKey:nil];
}

在其他ViewController中调用

#import "ViewController.h"
#import "FTCycleView.h"

@implementation ViewController

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

/** 
     模拟下载显示 环形进度条 
     实际应用中只需调用下面方法 传入当前下载进度值即可
     [cycleView drawCycleProgress:(当前下载进度值)];  
*/
- (void)cycleProgressTest {
    
    FTCycleView *cycleView = [[FTCycleView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
    [self.view addSubview:cycleView];
    
    __block NSInteger progress = 0;
    [NSTimer scheduledTimerWithTimeInterval:0.5 repeats:YES block:^(NSTimer * _Nonnull timer) {
        progress = progress + 10;
        if (progress <= 100) {
            // 实际应用中只需调用下面方法 传入当前下载进度值即可
            [cycleView drawCycleProgress:progress/100.0];  
            
        } else {
            [timer invalidate];
        }
    }];
}

@end

Demo下载