圆圈进度条简单绘制

项目中要用到圆圈的进度条，本来想用第三方的，后面还是自己简单的画了一个。大致是下图这个样子：

圆圈进度条.png

也是很简单的一个东西。
我这边是采用的CAShapeLayer和CGPath来的。
先来个背景虚线圆：

-(void)setBackGroundShapeLayer
{
    CAShapeLayer *shapeLayer=[[CAShapeLayer alloc]init];
    
    CGMutablePathRef path=CGPathCreateMutable();
    shapeLayer.lineWidth=20;
    shapeLayer.strokeColor=RGB(200, 200, 200, 1).CGColor;
    shapeLayer.fillColor=[UIColor clearColor].CGColor;
    CGPathAddEllipseInRect(path, nil, self.bounds);
    shapeLayer.path=path;
    [shapeLayer setLineDashPattern:[NSArray arrayWithObjects:[NSNumber numberWithInt:1],[NSNumber numberWithInt:3], nil]];
    CGPathRelease(path);
    [self.layer addSublayer:shapeLayer];
    self.backShapeLayer=shapeLayer;
}

各属性的含义就自行百度了解吧。
然后就是表面动态圆：

 CAShapeLayer *shapeLayer=[[CAShapeLayer alloc]init];
    
    CGMutablePathRef path=CGPathCreateMutable();
    shapeLayer.lineWidth=20;
    shapeLayer.strokeColor=REHAU_GREEN_COLOR.CGColor;
    shapeLayer.fillColor=[UIColor clearColor].CGColor;
    shapeLayer.strokeStart=0;
    shapeLayer.strokeEnd=0;
    CGPathAddEllipseInRect(path, nil, self.bounds);
    shapeLayer.path=path;
    CGPathRelease(path);
    [self.layer addSublayer:shapeLayer];
    self.progressShapeLayer=shapeLayer;
    
    shapeLayer.transform=CATransform3DIdentity;
    shapeLayer.transform=CATransform3DRotate(shapeLayer.transform,-M_PI_2, 0.0,  0.0, 1);
    shapeLayer.frame=self.bounds;

这里是通过strokeStart和strokeEnd来表现进度的变化，但是默认的strokeStart是从水平顺时针开始的，所以我这里是把这个shapeLayer给转了一下。
中间的字是用CATextLayer:

CATextLayer *textLayer=[[CATextLayer alloc]init];
    textLayer.frame=CGRectMake(self.width/2-95, self.height/2-38, 190, 76);
    [self.layer addSublayer:textLayer];
    
    textLayer.foregroundColor=REHAU_GREEN_COLOR.CGColor;
    textLayer.alignmentMode=kCAAlignmentCenter;
    textLayer.wrapped=YES;
    
    UIFont *font=[UIFont systemFontOfSize:60];
    CFStringRef fontName = (__bridge CFStringRef)font.fontName;
    CGFontRef fontRef = CGFontCreateWithFontName(fontName);
    textLayer.font = fontRef;
    textLayer.fontSize = font.pointSize;
    CGFontRelease(fontRef);
    
    textLayer.string=@"0%";
    textLayer.contentsScale=[UIScreen mainScreen].scale;
    self.textLayer=textLayer;

CATextLayer 百度一堆怎么用的。
要改变动态圆 只用改变strokeEnd 就行了，strokeEnd要比strokeStart大。

-(void)setRatio:(CGFloat)ratio
{
   // [CATransaction begin];
    //[CATransaction setDisableActions:YES];
        
    self.progressShapeLayer.strokeEnd=ratio;
    self.textLayer.string=[NSString stringWithFormat:@"%.lf%%",ratio*100];
    //[CATransaction commit];
}

不要动画就加CATransaction。
到此一个简单的圆圈进度就做完了·可以根据自己的需求自行绘制，做一些修改。