iOS 圆形进度的实现和封装 两种样式

效果图：

主要代码：

第一种样式：不完全圆进度条

IncompleteHollowCircleProgress.h

#import <UIKit/UIKit.h>@interface IncompleteHollowCircleProgress : UIView@property(nonatomic)CGFloat totalProgress;@property(nonatomic)CGFloat progress;@property(nonatomic)CGFloat lineWidth;@property(nonatomic)BOOL isSetLineCapRound;@property(nonatomic,strong)UIColor *bgColor;@property(nonatomic,strong)UIColor *progressColor;@end

IncompleteHollowCircleProgress.m

#import "IncompleteHollowCircleProgress.h"@implementation IncompleteHollowCircleProgress{    CGFloat radius;}- (void)awakeFromNib {    [super awakeFromNib];    [self commonInit];}-(instancetype)init {    if (self = [super init]) {        [self commonInit];    }    return self;}- (instancetype)initWithCoder:(NSCoder *)coder{    self = [super initWithCoder:coder];    if (self) {        [self commonInit];    }    return self;}-(instancetype)initWithFrame:(CGRect)frame {    self = [super initWithFrame:frame];    if (self) {        [self commonInit];    }    return self;}-(void)commonInit{    self.totalProgress = 100;    self.progress = 90;    self.lineWidth = 5;    self.bgColor = [UIColor lightGrayColor];    self.progressColor = [UIColor yellowColor];    self.isSetLineCapRound = YES;}- (void)drawRect:(CGRect)rect {    CGFloat width = rect.size.width;    CGFloat height = rect.size.height;        if (width > height) {        radius = (height-self.lineWidth)/2;    }else {        radius = (width-self.lineWidth)/2;    }        CGPoint center = CGPointMake(width/2, height/2);        [self.bgColor set];    UIBezierPath *path = [UIBezierPath new];    path.lineWidth = self.lineWidth;    path.lineCapStyle = kCGLineCapRound;    [path addArcWithCenter:center radius:radius startAngle:M_PI_2+M_PI_4 endAngle:M_PI_2-M_PI_4 clockwise:YES];    [path stroke];    [path closePath];        CGFloat perPercent = self.progress/self.totalProgress;    [self.progressColor set];    UIBezierPath *path2 = [UIBezierPath new];    path2.lineWidth = self.lineWidth;    if (self.isSetLineCapRound) {        path2.lineCapStyle = kCGLineCapRound;    }    [path2 addArcWithCenter:center radius:radius startAngle:M_PI_2+M_PI_4 endAngle:M_PI_2+M_PI_4+(perPercent*(2*M_PI-M_PI_2))  clockwise:YES];    [path2 stroke];    [path2 closePath];}@end

第二种样式：完全圆进度条

HollowCircleProgress.h

#import <UIKit/UIKit.h>@interface HollowCircleProgress : UIView@property(nonatomic)CGFloat totalProgress;@property(nonatomic)CGFloat progress;@property(nonatomic)CGFloat lineWidth;@property(nonatomic)BOOL isSetLineCapRound;@property(nonatomic,strong)UIColor *bgColor;@property(nonatomic,strong)UIColor *progressColor;@end

HollowCircleProgress.m

#import "HollowCircleProgress.h"@implementation HollowCircleProgress {    CGFloat radius;}- (void)awakeFromNib {    [super awakeFromNib];    [self commonInit];}-(instancetype)init {    if (self = [super init]) {        [self commonInit];    }    return self;}- (instancetype)initWithCoder:(NSCoder *)coder{    self = [super initWithCoder:coder];    if (self) {        [self commonInit];    }    return self;}-(instancetype)initWithFrame:(CGRect)frame {    self = [super initWithFrame:frame];    if (self) {        [self commonInit];    }    return self;}-(void)commonInit{    self.totalProgress = 100;    self.progress = 60;    self.lineWidth = 20;    self.bgColor = [UIColor lightGrayColor];    self.progressColor = [UIColor redColor];    self.isSetLineCapRound = NO;}- (void)drawRect:(CGRect)rect {    CGFloat width = rect.size.width;    CGFloat height = rect.size.height;        if (width > height) {        radius = (height-self.lineWidth)/2;    }else {        radius = (width-self.lineWidth)/2;    }        CGPoint center = CGPointMake(width/2, height/2);    [self.bgColor set];    UIBezierPath *path = [UIBezierPath new];    path.lineWidth = self.lineWidth;    [path addArcWithCenter:center radius:radius startAngle:0  endAngle:2*M_PI clockwise:YES];    [path stroke];    [path closePath];        UIBezierPath *path2 = [UIBezierPath new];    CGFloat perPercent = self.progress/self.totalProgress;    [self.progressColor set];    path2.lineWidth = self.lineWidth;    if (self.isSetLineCapRound) {        path2.lineCapStyle = kCGLineCapRound;    }    [path2 addArcWithCenter:center radius:radius startAngle:M_PI+M_PI_2  endAngle:M_PI+M_PI_2 - (perPercent*2*M_PI) clockwise:NO];    [path2 stroke];    [path2 closePath];    }@end