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

我的业余技术微信公众号：YKJGZH，欢迎大家进入