iOS 环形下载进度条

Posted 2023-05-11

参考技术A

// //获取环形路径（画一个圆形，填充色透明，设置线框宽度为10，这样就获得了一个环形）
// _progressLayer = [CAShapeLayer layer];//创建一个track shape layer
// _progressLayer.frame = self.bounds;
// _progressLayer.fillColor = [[UIColor clearColor] CGColor]; //填充色为无色
// _progressLayer.strokeColor = [[UIColor colorWithRed:1.00 green:0.48 blue:0.38 alpha:1.00] CGColor]; //指定path的渲染颜色,这里可以设置任意不透明颜色
// _progressLayer.opacity = 1; //背景颜色的透明度
// _progressLayer.lineCap = kCALineCapRound;//指定线的边缘是圆的
// _progressLayer.lineWidth = 4;//线的宽度
// UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];//上面说明过了用来构建圆形
// _progressLayer.path =[path CGPath]; //把path传递给layer，然后layer会处理相应的渲染，整个逻辑和CoreGraph是一致的。
//
// CAShapeLayer progressLayer = [CAShapeLayer layer];//创建一个track shape layer
// progressLayer.frame = self.bounds;
// progressLayer.fillColor = [[UIColor clearColor] CGColor]; //填充色为无色
// progressLayer.strokeColor = [[UIColor whiteColor] CGColor]; //指定path的渲染颜色,这里可以设置任意不透明颜色
//
// CGFloat endA2 = 2 M_PI; //设置进度条起点位置
// UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA2 clockwise:YES];//上面说明过了用来构建圆形
// progressLayer.lineWidth = 2.8;//线的宽度
// progressLayer.path =[path2 CGPath]; //把path传递给layer，然后layer会处理相应的渲染，整个逻辑和CoreGraph是一致的。
//
// [self.layer addSublayer:progressLayer];
// [self.layer addSublayer:_progressLayer];

// //生成渐变色
// _gradientLayer = [CALayer layer];
//
// //左侧渐变色
// CAGradientLayer *leftLayer = [CAGradientLayer layer];
// leftLayer.frame = CGRectMake(0, 0, self.bounds.size.width / 2, self.bounds.size.height); // 分段设置渐变色
// leftLayer.locations = @[@0.3, @0.9, @1];
// leftLayer.colors = @[(id)[UIColor yellowColor].CGColor, (id)[UIColor greenColor].CGColor];
// [_gradientLayer addSublayer:leftLayer];
//
// //右侧渐变色
// CAGradientLayer *rightLayer = [CAGradientLayer layer];
// rightLayer.frame = CGRectMake(self.bounds.size.width / 2, 0, self.bounds.size.width / 2, self.bounds.size.height);
// rightLayer.locations = @[@0.3, @0.9, @1];
// rightLayer.colors = @[(id)[UIColor yellowColor].CGColor, (id)[UIColor redColor].CGColor];
// [_gradientLayer addSublayer:rightLayer];
//
// [self.layer setMask:_progressLayer]; //用progressLayer来截取渐变层
// [self.layer addSublayer:_gradientLayer];

CGPoint center = self.center;
CGFloat radius = 12;
CGFloat startA = - M_PI_2; //设置进度条起点位置
CGFloat endA = -M_PI_2 + M_PI * 2 * _progress; //设置进度条终点位置

第二种

iOS 简易环形进度条

demo下载地址：https://github.com/haozheMa/LoopProgressDemo/tree/master

ViewController中的代码

#import "ViewController.h"
#import "ProgressView.h"

@interface ViewController ()

@property (strong, nonatomic) UISlider *progressSlider;

@property (strong, nonatomic) ProgressView *progressView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    _progressView = [[ProgressView alloc] initWithFrame:CGRectMake([[UIScreen mainScreen] bounds].size.width/2 - 80, 100, 160, 160)];
    [self.view addSubview:_progressView];
    _progressSlider = [[UISlider alloc] initWithFrame:CGRectMake(self.view.frame.size.width/2-80, 400, 160, 10)];
    [_progressSlider addTarget:self action:@selector(sliderChange) forControlEvents:UIControlEventValueChanged];
    _progressSlider.maximumValue = 1.0;
    _progressSlider.minimumValue = 0.0;
    [self.view addSubview:_progressSlider];
}

-(void)sliderChange
{
    _progressView.percentage = _progressSlider.value;
}

@end

 ProgressView中的代码

.h

#import <UIKit/UIKit.h>

@interface ProgressView : UIView

@property(assign, nonatomic)CGFloat percentage;

@end

.m

#import "ProgressView.h"

@interface ProgressView ()

@property (strong,nonatomic) UILabel *label;

@end

@implementation ProgressView

-(instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.percentage = 0.0;
        self.backgroundColor = [UIColor whiteColor];
        [self loadSubviews];
    }
    return self;
}

-(void)loadSubviews
{
    _label = [[UILabel alloc] initWithFrame:CGRectMake(10, self.frame.size.height/2 - 10, self.frame.size.width - 20, 20)];
    _label.textAlignment = NSTextAlignmentCenter;
    _label.font = [UIFont systemFontOfSize:12];
    _label.textColor = [UIColor blackColor];
    [self addSubview:_label];
}

-(void)setPercentage:(CGFloat)percentage
{
    _percentage = percentage;
    _label.text = [NSString stringWithFormat:@"%.2f%%",_percentage*100];
    [self setNeedsDisplay];
}

-(void)drawRect:(CGRect)rect
{
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    CGSize viewSize = self.bounds.size;
    CGPoint center = CGPointMake(viewSize.width/2, viewSize.height/2);
    CGFloat radius = viewSize.width/2;
    CGContextBeginPath(contextRef);
    CGContextMoveToPoint(contextRef, center.x, center.y);
    CGContextAddArc(contextRef, center.x, center.y, radius, - M_PI_2, 2*M_PI*_percentage - M_PI_2, 0);
    CGContextSetFillColorWithColor(contextRef, [UIColor redColor].CGColor);
    CGContextFillPath(contextRef);
    
    //填充圆，无边框
    CGContextAddArc(contextRef, center.x, center.y, radius - 10, 0, 2*M_PI, 0); //添加一个圆
    CGContextSetFillColorWithColor(contextRef, [UIColor colorWithRed:220/255.0 green:220/255.0 blue:220/255.0 alpha:1].CGColor);
    CGContextClosePath(contextRef);
    CGContextDrawPath(contextRef, kCGPathFill);//绘制填充
    CGContextStrokePath(contextRef);//绘画路径
}