iOS 环形进度条

1、首先先将自定义的View和进度条的值关联起来

- (IBAction)progressChange:(UISlider *)sender {

    self.valueLabel.text = [NSString stringWithFormat:@"%.2f%%",sender.value * 100];

    self.progressView.progress = sender.value;
}

2、drawRect方法里画弧线

  CGFloat radius = rect.size.width / 2;
    CGPoint center  = CGPointMake(rect.size.width/2, rect.size.height/2);
    //-M_PI_2由3点钟方向调整到12点钟方向
    CGFloat end = -M_PI_2 + self.progress * M_PI * 2;

    UIBezierPath *bezier = [UIBezierPath bezierPathWithArcCenter:center radius:radius-2 startAngle:-M_PI_2 endAngle:end clockwise:YES];
    [bezier stroke];

3、重写属性setter方法，使其弧线随着进度条的值变化

-(void)setProgress:(CGFloat)progress{
    _progress = progress;
    //因为drawRect方法只是在视图刚刚出现的时候执行一次
    //重绘，系统会先创建于view相关联的上下文，然后再会自动调用drawRect
    [self setNeedsDisplay];
}

此时就完成了简单的环形进度条

完整代码：

#import "DrawProgressVC.h"

@interface DrawProgressView:UIView
@property (nonatomic,assign) CGFloat progress;
@end

@implementation DrawProgressView

-(void)setProgress:(CGFloat)progress{

    _progress = progress;
    //因为drawRect方法只是在视图刚刚出现的时候执行一次
    //重绘，系统会先创建于view相关联的上下文，然后再会自动调用drawRect
    [self setNeedsDisplay];
}

//不能手动调用drawRect方法，因为只有在drawRect里才能拿到上下文，图形上下文只能由系统创建
- (void)drawRect:(CGRect)rect{

    CGFloat radius = rect.size.width / 2;
    CGPoint center  = CGPointMake(rect.size.width/2, rect.size.height/2);

    CGFloat end = -M_PI_2 + self.progress * M_PI * 2;

    UIBezierPath *bezier = [UIBezierPath bezierPathWithArcCenter:center radius:radius-2 startAngle:-M_PI_2 endAngle:end clockwise:YES];
    [bezier stroke];

}

@end






@interface DrawProgressVC ()
@property (weak, nonatomic) IBOutlet UILabel *valueLabel;
@property (weak, nonatomic) IBOutlet DrawProgressView *progressView;

@end

@implementation DrawProgressVC

- (void)viewDidLoad {
    [super viewDidLoad];

    self.title = @"draw Progress";

}
- (IBAction)progressChange:(UISlider *)sender {

    self.valueLabel.text = [NSString stringWithFormat:@"%.2f%%",sender.value * 100];

    self.progressView.progress = sender.value;
}



- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

最后，附上相关的demo,Git：(https://github.com/hejiasu/Drawing)