参考链接: https://www.jianshu.com/p/2561bf85b9a1
.h文件
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface CircleProgessView : UIView
@property (nonatomic,assign) CGFloat radius; // 环半径
@property (nonatomic,assign) CGFloat lineWidth; //环的宽度
@property (nonatomic,strong) UIColor *defaultColor; // 默认环的颜色
@property (nonatomic,strong) UIColor *progressColor; // 进度条颜色
@property (nonatomic,assign) CGFloat progress; // 进度值
@property (nonatomic,copy) NSString *labelTextString; //环形里面显示的文字
-(instancetype)initWithFrame:(CGRect)frame withRadius:(CGFloat)radius withLineWidth:(CGFloat)lineWidth;
-(void)updateProgress:(CGFloat)progress;
@end
NS_ASSUME_NONNULL_END
.m文件
#import "CircleProgessView.h"
@interface CircleProgessView()
@property(nonatomic,strong)CAShapeLayer *progressLayer;
@property(nonatomic,strong)UILabel *label;
@end
@implementation CircleProgessView
-(instancetype)initWithFrame:(CGRect)frame withRadius:(CGFloat)radius withLineWidth:(CGFloat)lineWidth
{
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor clearColor];
self.lineWidth = 10.0f;
self.defaultColor = [UIColor grayColor];
self.progressColor = [UIColor blueColor];
self.progress = 0.0f;
self.radius = 40.0f;
// 环
CGFloat circleX = self.frame.size.width / 2 - self.radius;
CGFloat circleY = self.frame.size.height / 2 - self.radius;
CGFloat circleWidth = self.radius * 2;
UIBezierPath *circlePath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(circleX, circleY, circleWidth, circleWidth) cornerRadius:self.radius];
// 环形layer
CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.fillColor = [UIColor clearColor].CGColor;
circleLayer.strokeColor = [UIColor redColor].CGColor;
// circleLayer.lineCap = kCALineCapRound;
circleLayer.lineWidth = self.lineWidth;
circleLayer.path = circlePath.CGPath;
circleLayer.strokeEnd = 1;
[self.layer addSublayer:circleLayer];
// 进度layer
self.progressLayer = [CAShapeLayer layer];
self.progressLayer.fillColor = [UIColor clearColor].CGColor;
self.progressLayer.strokeColor = [UIColor blueColor].CGColor;
self.progressLayer.lineCap = kCALineCapRound;
self.progressLayer.lineWidth = self.lineWidth;
self.progressLayer.path = circlePath.CGPath;
self.progressLayer.strokeEnd = 0;
[self.layer addSublayer:self.progressLayer];
[self label];
}
return self;
}
#pragma mark -- setter
-(void)setLabelTextString:(NSString *)labelTextString{
_labelTextString = labelTextString;
self.label.text = _labelTextString;
}
#pragma mark - lazy load
-(UILabel *)label
{
if (!_label) {
CGFloat width = 40.0f;
CGFloat height = 30.0f;
CGFloat x = (self.frame.size.width - width) / 2;
CGFloat y = (self.frame.size.height - height) / 2;
_label = [[UILabel alloc] initWithFrame:CGRectMake(x, y, width, height)];
_label.text = @"50%";
_label.textAlignment = NSTextAlignmentCenter;
_label.adjustsFontSizeToFitWidth = YES;
[self addSubview:_label];
}
return _label;
}
#pragma mark - private method
-(void)updateProgress:(CGFloat)progress
{
self.progress = progress;
self.progressLayer.strokeEnd = progress;
//开始执行扇形动画
CABasicAnimation *strokeEndAni = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
strokeEndAni.fromValue = @0;
strokeEndAni.toValue = @(self.progress);
strokeEndAni.duration = 0.35f;
strokeEndAni.repeatCount = 1; // 重复次数
[self.progressLayer addAnimation:strokeEndAni forKey:@"ani"];
}
实现:
CircleProgessView *circleProgressView2 = [[CircleProgessView alloc] initWithFrame:CGRectMake(150.0f, 300.0f, 100.0f, 100.0f) withRadius:40.0f withLineWidth:5.0f];
[self.view addSubview:circleProgressView2];
circleProgressView2.labelTextString = @"3/8";
[circleProgressView2 updateProgress:0.375f];
最后再次感谢大佬的文章:https://www.jianshu.com/p/2561bf85b9a1
网友评论