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

我会带着你远行 2022-06-04 04:59 102阅读 0赞

效果图：

![Center][]

主要代码：

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

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，欢迎大家进入

[Center]: /images/20220604/8ff68efd0a814123a95074cbfcd81a0e.png