iOS 环形进度

• 效果

  
  环形进度

• CircleProgressView.h

#import <UIKit/UIKit.h>

@interface CircleProgressView : UIView

@property(nonatomic,assign)CGFloat radius; // 环半径
@property(nonatomic,assign)CGFloat lineWidth; // 环的宽度
@property(nonatomic,strong)UIColor *defaultColor; // 默认环的颜色
@property(nonatomic,strong)UIColor *progressColor; // 进度条颜色

@property(nonatomic,assign)CGFloat progress; // 进度值


-(instancetype)initWithFrame:(CGRect)frame withRadius:(CGFloat)radius withLineWidth:(CGFloat)lineWidth;

-(void)updateProgress:(CGFloat)progress;

@end

• CircleProgressView.m

#import "CircleProgressView.h"

@interface CircleProgressView ()

@property(nonatomic,strong)CAShapeLayer *progressLayer;

@property(nonatomic,strong)UILabel *label;

@end

@implementation CircleProgressView

-(instancetype)initWithFrame:(CGRect)frame withRadius:(CGFloat)radius withLineWidth:(CGFloat)lineWidth
{
    self = [super initWithFrame:frame];
    if (self) {
        
        self.backgroundColor = [UIColor clearColor];
        
        self.lineWidth = 5.0f;
        self.defaultColor = [UIColor grayColor];
        self.progressColor = [UIColor blueColor];
        self.progress = 0.0f;
        self.radius = 50.0f;

        // 环
        CGFloat circleX = self.frame.size.width / 2 - self.radius;
        CGFloat circleY = self.frame.size.height / 2 - self.radius;
        CGFloat circleWidth = self.radius * 2;
        UIBezierPath *circlePath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(circleX, circleY, circleWidth, circleWidth) cornerRadius:self.radius];

        // 环形layer
        CAShapeLayer *circleLayer = [CAShapeLayer layer];
        circleLayer.fillColor = [UIColor clearColor].CGColor;
        circleLayer.strokeColor = [UIColor grayColor].CGColor;
        //    circleLayer.lineCap = kCALineCapRound;
        circleLayer.lineWidth = self.lineWidth;
        circleLayer.path = circlePath.CGPath;
        circleLayer.strokeEnd = 1;
        [self.layer addSublayer:circleLayer];

        // 进度layer
        self.progressLayer = [CAShapeLayer layer];
        self.progressLayer.fillColor = [UIColor clearColor].CGColor;
        self.progressLayer.strokeColor = [UIColor blueColor].CGColor;
        self.progressLayer.lineCap = kCALineCapRound;
        self.progressLayer.lineWidth = self.lineWidth;
        self.progressLayer.path = circlePath.CGPath;
        self.progressLayer.strokeEnd = 0;
        [self.layer addSublayer:self.progressLayer];
        
        [self label];
    }
    return self;
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
}

#pragma mark - lazy load
-(UILabel *)label
{
    if (!_label) {
        CGFloat width = 40.0f;
        CGFloat height = 30.0f;
        CGFloat x = (self.frame.size.width - width) / 2;
        CGFloat y = (self.frame.size.height - height) / 2;
        
        _label = [[UILabel alloc] initWithFrame:CGRectMake(x, y, width, height)];
        _label.text = @"50%";
        _label.adjustsFontSizeToFitWidth = YES;
        [self addSubview:_label];
    }
    return _label;
}

#pragma mark - private method
-(void)updateProgress:(CGFloat)progress
{
    self.progress = progress;
    self.progressLayer.strokeEnd = progress;
    //开始执行扇形动画
    CABasicAnimation *strokeEndAni = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    strokeEndAni.fromValue = @0;
    strokeEndAni.toValue = @(self.progress);
    strokeEndAni.duration = 1.0f;
    strokeEndAni.repeatCount = 1; // 重复次数
    [self.progressLayer addAnimation:strokeEndAni forKey:@"ani"];
}

@end

• 实现

CircleProgressView *circleProgressView = [[CircleProgressView alloc] initWithFrame:CGRectMake(150.0f, 150.0f, 100.0f, 100.0f) withRadius:40.0f withLineWidth:5.0f];
[self.view addSubview:circleProgressView];
[circleProgressView updateProgress:0.5f];