運用CAShapeLayer和UIBezierPath實現的環形進度條
阿新 • • 發佈:2018-12-20
主要程式碼如下:
#import "MOAnnularProgressView.h" @implementation MOAnnularProgressView { CAShapeLayer *backgroundLayer; // 背景圖層 CAShapeLayer *frontFillLayer; // 填充圖層 UIBezierPath *backgroundPath; // 背景貝賽爾曲線 UIBezierPath *frontFillPath; // 填充貝賽爾曲線 } - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { [self setupView]; } return self; } - (instancetype)init { self = [super init]; if (self) { [self setupView]; } return self; } - (void)setupView { backgroundLayer = [CAShapeLayer layer]; backgroundLayer.fillColor = nil; [self.layer addSublayer:backgroundLayer]; frontFillLayer = [CAShapeLayer layer]; frontFillLayer.fillColor = nil; frontFillLayer.lineCap = kCALineCapRound;//指定線的邊緣是圓的 [self.layer addSublayer:frontFillLayer]; } - (void)layoutSubviews { [super layoutSubviews]; CGFloat width = self.bounds.size.width; backgroundLayer.frame = self.bounds; backgroundPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(width/2.0f, width/2.0f) radius:width/2.0f startAngle:0 endAngle:M_PI*2 clockwise:YES]; backgroundLayer.path = backgroundPath.CGPath; frontFillLayer.frame = self.bounds; } - (void)setBackgroundColor:(UIColor *)backgroundColor { _backgroundColor = backgroundColor; backgroundLayer.strokeColor = _backgroundColor.CGColor; } - (void)setFrontColor:(UIColor *)frontColor { _frontColor = frontColor; frontFillLayer.strokeColor = _frontColor.CGColor; } - (void)setLineWidth:(CGFloat)lineWidth { _lineWidth = lineWidth; backgroundLayer.lineWidth = _lineWidth; frontFillLayer.lineWidth = _lineWidth; } - (void)setProgress:(CGFloat)progress { _progress = MAX(MIN(progress, 1.0), 0.0); CGFloat width = self.bounds.size.width; frontFillPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(width/2.0, width/2.0) radius:width/2.0f startAngle:-0.25*2*M_PI endAngle:(2*M_PI)*_progress - 0.25*2*M_PI clockwise:YES]; frontFillLayer.path = frontFillPath.CGPath; } @end