This is the sixth day of my participation in the First Challenge 2022. For details: First Challenge 2022.

The progress bar of the circle will be used in the project. I originally wanted to use a third party, but I drew a simple one myself. It looks something like this:

It’s a very simple thing. I use CAShapeLayer and CGPath. Let’s start with a dotted background circle:

-(void)setBackGroundShapeLayer
{
    CAShapeLayer *shapeLayer=[[CAShapeLayer alloc]init];
    
    CGMutablePathRef path=CGPathCreateMutable(a); 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;
}
Copy the code

The meaning of each attribute on their own baidu understand it. Then there is the surface dynamic circle:

 CAShapeLayer *shapeLayer=[[CAShapeLayer alloc]init];
    
    CGMutablePathRef path=CGPathCreateMutable(a); 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;
Copy the code

I’m using strokeStart and strokeEnd to show progress, but the default strokeStart is horizontal clockwise, so I’ve rotated the shapeLayer here. The middle word is 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;
Copy the code

CATextLayer baidu a bunch of how to use. To change the dynamic circle, you just change the strokeEnd, and strokeEnd is bigger than strokeStart.

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

Don’t animate just add CATransaction. This is the end of a simple circle. You can draw it according to your own needs and make some modifications.

This is just a very simple circular one, and if you want to add some gradients and things like that, it’s very easy to make changes to support that, and we’ll talk about that in the next post.

reference

# iOS round progress bar with gradient