iOS 简易环形进度条

Posted 2020-07-19 小屁孩~

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);//绘画路径
}