百分比圆环进度动态显示

 

创建一个ScaleCircleChartView

#import <UIKit/UIKit.h>

 

@interface ScaleCircleChartView : UIView

 

//线宽.

@property (nonatomic, assign) CGFloat lineWith;

 

//基准圆环颜色

@property (nonatomic, strong) UIColor *unfillColor;

 

//中心数据显示标签

@property (nonatomic, strong) UILabel *centerLable;

 

//四个区域的颜色

@property (nonatomic, strong) UIColor *firstColor;

@property (nonatomic, strong) UIColor *secondColor;

 

//四个区域所占的百分比

@property (nonatomic, assign) float firstScale;

@property (nonatomic, assign) float secondScale;

 

- (instancetype) initWithFrame:(CGRect)frame;

 

@end

 

#import "ScaleCircleChartView.h"

 

@interface ScaleCircleChartView ()

 

@property (nonatomic, assign) CGFloat radius; //半径

@property (nonatomic, assign) float animation_time; //动画时长

@property (nonatomic, assign) CGFloat first_animation_time;

@property (nonatomic, assign) CGFloat second_animation_time;

@property (nonatomic, assign) CGPoint CGPoinCerter;

@property (nonatomic, assign) CGFloat endAngle;

@property (nonatomic, assign) BOOL clockwise;

 

@end

 

@implementation ScaleCircleChartView

 

//  初始化参数

- (instancetype) initWithFrame:(CGRect)frame{

    self = [super initWithFrame:frame];

    if(self){

        [self initCenterLabel];

        

        self.lineWith = 10.0;

        self.unfillColor = [UIColor lightGrayColor];

        self.clockwise = YES;

        self.backgroundColor = [UIColor clearColor];

        

        self.animation_time = 1;

        self.firstColor = [UIColor redColor];

        self.secondColor = [UIColor greenColor];

        

        self.centerLable.text = @"请初始化...";

        

    }

    return self;

}

 

#pragma mark setMethod

/**

*  画图函数

*

*  @param rect rect description

*/

-(void)drawRect:(CGRect)rect{

    

    [self initData];

    [self drawMiddlecircle];

    

    dispatch_queue_t queue = dispatch_queue_create("ldz.demo", DISPATCH_QUEUE_CONCURRENT);

    dispatch_async(queue, ^{

        dispatch_async(dispatch_get_main_queue(), ^{

            [self drawOutCCircle_first];

        });

    });

    dispatch_async(queue, ^{

        dispatch_async(dispatch_get_main_queue(), ^{

            [self drawOutCCircle_second];

        });

    });

 

}

 

/*

*中心标签设置

*/

- (void)initCenterLabel {

    CGFloat center = MIN(self.bounds.size.height/2, self.bounds.size.width/2);

    self.CGPoinCerter = CGPointMake(center, center);

    self.centerLable = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 2 * center, 2*center)];

    self.centerLable.textAlignment = NSTextAlignmentCenter;

    self.centerLable.numberOfLines = 0;

    self.centerLable.backgroundColor = [UIColor clearColor];

    self.centerLable.adjustsFontSizeToFitWidth = YES;

    self.centerLable.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    self.contentMode = UIViewContentModeRedraw;

    [self addSubview: self.centerLable];

}

 

/**

*  参数设置

*/

-(void)initData

{

    //计算animation时间

    self.first_animation_time = self.animation_time ;

    self.second_animation_time = self.animation_time ;

    

    //半径计算

    self.radius = MIN(self.bounds.size.height/2 - self.lineWith/2, self.bounds.size.width/2 - self.lineWith/2);

    

    self.centerLable.font = [UIFont systemFontOfSize:self.radius/3];

}

 

/**

*  显示圆环 -- first

*/

-(void )drawOutCCircle_first

{

     UIBezierPath *bPath_first ;

    

    if(self.firstScale == 0.00)

    {

       bPath_first = [UIBezierPath bezierPathWithArcCenter: self.CGPoinCerter radius:self.radius startAngle: -M_PI_2 endAngle: -M_PI_2 + M_PI *2 * 0.025  clockwise: self.clockwise];

    }

    else

    {

        bPath_first = [UIBezierPath bezierPathWithArcCenter: self.CGPoinCerter radius:self.radius startAngle: -M_PI_2 endAngle: -M_PI_2 + M_PI *2 * self.firstScale  clockwise: self.clockwise];

    }

    

 

    CAShapeLayer *lineLayer_first = [ CAShapeLayer layer ];

    lineLayer_first.frame = _centerLable.frame;

    lineLayer_first.fillColor = [UIColor clearColor].CGColor;

    lineLayer_first.path = bPath_first.CGPath;

    lineLayer_first.strokeColor = self.firstColor.CGColor;

    lineLayer_first.lineWidth = self.lineWith;

 

    CABasicAnimation *ani = [ CABasicAnimation animationWithKeyPath : NSStringFromSelector ( @selector (strokeEnd))];

    ani.fromValue = @0;

    ani.toValue = @1;

    ani.duration = self.first_animation_time;

    [lineLayer_first addAnimation:ani forKey:NSStringFromSelector(@selector(strokeEnd))];

    [self.layer addSublayer: lineLayer_first];

}

 

/**

*  显示圆环 -- second

*/

-(void )drawOutCCircle_second

{

     UIBezierPath *bPath_second ;

    

    if(self.secondScale == 0.00)

    {

       bPath_second = [UIBezierPath bezierPathWithArcCenter: self.CGPoinCerter radius:self.radius startAngle: -M_PI_2 endAngle: -M_PI_2 + M_PI *2 * 0.025 clockwise: self.clockwise];

        

    }

    else

    {

        bPath_second = [UIBezierPath bezierPathWithArcCenter: self.CGPoinCerter radius:self.radius startAngle: -M_PI_2 endAngle:-M_PI_2 + M_PI *2 * self.secondScale clockwise: self.clockwise];

    }

 

    CAShapeLayer *lineLayer_second = [CAShapeLayer layer];

    lineLayer_second.frame = _centerLable.frame;

    lineLayer_second.fillColor = [UIColor clearColor].CGColor;

    lineLayer_second.path = bPath_second.CGPath;

    lineLayer_second.strokeColor = self.secondColor.CGColor;

    lineLayer_second.lineWidth = self.lineWith;

 

    CABasicAnimation *ani = [ CABasicAnimation animationWithKeyPath : NSStringFromSelector(@selector(strokeEnd))];

    ani.fromValue = @0;

    ani.toValue = @1;

    ani.duration = self.second_animation_time;

    [lineLayer_second addAnimation:ani forKey:NSStringFromSelector(@selector(strokeEnd))];

    [self.layer addSublayer: lineLayer_second];

}

 

 

/**

*  辅助圆环

*/

-(void)drawMiddlecircle

{

    UIBezierPath *cPath = [UIBezierPath bezierPathWithArcCenter:self.CGPoinCerter radius:self.radius startAngle:M_PI * 0 endAngle:M_PI * 2 clockwise:self.clockwise];

    cPath.lineWidth = self.lineWith;

    cPath.lineCapStyle = kCGLineCapRound;

    cPath.lineJoinStyle = kCGLineJoinRound;

    UIColor *color = self.unfillColor;

    [color setStroke];

    [cPath stroke];

 

}

 

使用

ScaleCircleChartView *cicleView = [[ScaleCircleChartView alloc]initWithFrame:CGRectMake(5, (150-80)/2, 80, 80)];

 

    cicleView.unfillColor = [UIColor groupTableViewBackgroundColor];

    

    cicleView.firstScale = 0.5;

    cicleView.secondScale = 0.4;

    

    cicleView.firstColor = [UIColor redColor];

    cicleView.secondColor = [UIColor blueColor];

[self.view addSubview:cicleView];