// // MyCircleView.m // MyCircleView // // Created by 张威 on 2020/11/20. // Copyright © 2020 JSPY. All rights reserved. // #import "MyCircleView.h" @interface MyCircleView () @property (nonatomic, strong) NSTimer * labelTimer; @property (nonatomic, strong) UIView * centerView; @property (nonatomic, strong) UILabel * numLabel; @property (nonatomic, strong) UILabel * textLabel; @property (nonatomic, strong) UILabel * valueLabel; @property (nonatomic, assign) CGFloat progressFlag; @property (nonatomic, assign) NSInteger progressValue; @property (nonatomic, strong) CAShapeLayer * borderLayer; //虚线 @property (nonatomic, strong) CAShapeLayer * backgroundLine; //进度条背景 @property (nonatomic, strong) CAShapeLayer * mainLine; //进度条 @property (nonatomic, strong) CAShapeLayer * maskLayer; //遮罩层 @property (nonatomic, strong) CAGradientLayer * rightGrain; //渐变layer @property (nonatomic, strong) CAGradientLayer * leftGrain; //渐变layer @property (nonatomic, strong) CABasicAnimation * pathAnimation;//加载动画 @property (nonatomic, strong) UIBezierPath * borderPath; //虚线路径 @property (nonatomic, strong) UIBezierPath * bezierPath; //进度条路径 @end @implementation MyCircleView - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { _strokelineWidth = 6; //外层虚线 [self.layer addSublayer:self.borderLayer]; self.borderLayer.path = self.borderPath.CGPath; //进度条 [self.layer addSublayer:self.backgroundLine]; [self.layer addSublayer:self.mainLine]; self.backgroundLine.path = self.bezierPath.CGPath; self.mainLine.path = self.bezierPath.CGPath; //添加渐变色 [self.layer addSublayer:self.maskLayer]; [self.maskLayer addSublayer:self.rightGrain]; [self.maskLayer addSublayer:self.leftGrain]; [self.maskLayer setMask:self.mainLine]; [self addSubview:self.centerView]; } return self; } - (void)circleWithProgress:(NSInteger)progress value:(CGFloat)value { _progressFlag = 0; _progressValue = progress; //进度条添加动画 self.pathAnimation.duration = progress/100.0f; self.pathAnimation.toValue = [NSNumber numberWithFloat:progress/100.f]; [self.mainLine addAnimation:self.pathAnimation forKey:@"strokeEndAnimation"]; //添加文字内容 _valueLabel.text = [NSString stringWithFormat:@"%.1fGB/128GB", value]; if (progress > 0){ dispatch_async(dispatch_get_global_queue(0, 0), ^{ self->_labelTimer = [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(NameLbChange) userInfo:nil repeats:YES]; [[NSRunLoop currentRunLoop] run]; }); } } #pragma mark - timer methods - - (void)NameLbChange { dispatch_async(dispatch_get_main_queue(), ^{ self->_numLabel.attributedText = [self labelStytle:self->_progressFlag]; }); _progressFlag += 1; if (_progressFlag > _progressValue) { [_labelTimer invalidate]; _labelTimer = nil; } } - (NSMutableAttributedString *)labelStytle:(NSInteger)value { if (value > _progressValue) { value = _progressValue; } NSString * pace = [NSString stringWithFormat:@"%ld%@", value, @"%"]; NSMutableAttributedString * pace1 = [[NSMutableAttributedString alloc] initWithString:pace]; [pace1 addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:40] range:NSMakeRange(0, pace.length - 1)]; [pace1 addAttribute:NSFontAttributeName value:[UIFont boldSystemFontOfSize:20] range:NSMakeRange(pace.length - 1, 1)]; NSRange titleRange = NSMakeRange(0, pace.length); [pace1 addAttribute:NSForegroundColorAttributeName value:[UIColor whiteColor] range:titleRange]; return pace1; } #pragma mark - lazy - - (UIView *)centerView { if (!_centerView) { _centerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.bounds.size.width - _strokelineWidth*2 - 30, self.bounds.size.width - _strokelineWidth*2 - 30)]; _centerView.center = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2); _centerView.backgroundColor = [UIColor colorWithRed:85/255.0 green:172/255.0 blue:234/255.0 alpha:1.0]; _centerView.layer.masksToBounds = YES; _centerView.layer.cornerRadius = (self.bounds.size.width - _strokelineWidth*2 - 30) / 2; [_centerView addSubview:self.numLabel]; [_centerView addSubview:self.textLabel]; [_centerView addSubview:self.valueLabel]; } return _centerView; } - (UILabel *)valueLabel { if (!_valueLabel) { _valueLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, _centerView.bounds.size.height/2 + 40, _centerView.bounds.size.width, 14)]; _valueLabel.text = @"40GB/128GB"; _valueLabel.textColor = [UIColor whiteColor]; _valueLabel.backgroundColor = [UIColor clearColor]; _valueLabel.textAlignment = NSTextAlignmentCenter; _valueLabel.font = [UIFont systemFontOfSize:14]; } return _valueLabel; } - (UILabel *)textLabel { if (!_textLabel) { _textLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, _centerView.bounds.size.height/2 - 40 - 12, _centerView.bounds.size.width, 12)]; _textLabel.text = @"已使用"; _textLabel.textColor = [UIColor whiteColor]; _textLabel.backgroundColor = [UIColor clearColor]; _textLabel.textAlignment = NSTextAlignmentCenter; _textLabel.font = [UIFont systemFontOfSize:12]; } return _textLabel; } - (UILabel *)numLabel { if(!_numLabel) { _numLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, _centerView.bounds.size.width, 40)]; _numLabel.center = CGPointMake(_centerView.bounds.size.width/2, _centerView.bounds.size.height/2); _numLabel.textAlignment = NSTextAlignmentCenter; _numLabel.backgroundColor = [UIColor clearColor]; _numLabel.font = [UIFont boldSystemFontOfSize:40]; _numLabel.textColor = [UIColor whiteColor]; _numLabel.text = @"0"; } return _numLabel; } - (CAShapeLayer *)borderLayer { if (!_borderLayer) { _borderLayer = [[CAShapeLayer alloc] init]; _borderLayer.fillColor = [UIColor clearColor].CGColor; _borderLayer.strokeColor = [UIColor colorWithRed:85/255.0 green:172/255.0 blue:234/255.0 alpha:1.0].CGColor; _borderLayer.lineWidth = 2.f; _borderLayer.lineCap = @"round"; _borderLayer.lineDashPattern = @[@2, @4]; } return _borderLayer; } - (CAShapeLayer *)backgroundLine { if(!_backgroundLine) { _backgroundLine = [[CAShapeLayer alloc] init]; _backgroundLine.fillColor = [UIColor clearColor].CGColor; _backgroundLine.strokeColor = [UIColor colorWithRed:85/255.0 green:172/255.0 blue:234/255.0 alpha:1.0].CGColor; _backgroundLine.lineWidth = _strokelineWidth; } return _backgroundLine; } - (CAShapeLayer *)mainLine { if(!_mainLine) { _mainLine = [[CAShapeLayer alloc] init]; _mainLine.fillColor = [UIColor clearColor].CGColor; _mainLine.strokeColor = [UIColor whiteColor].CGColor; _mainLine.lineWidth = _strokelineWidth; _mainLine.lineCap = @"round"; _mainLine.strokeStart = 0.01; } return _mainLine; } - (CAShapeLayer *)maskLayer { if (!_maskLayer) { _maskLayer = [CAShapeLayer layer]; } return _maskLayer; } - (CAGradientLayer *)rightGrain { if(!_rightGrain) { _rightGrain = [[CAGradientLayer alloc] init]; _rightGrain.frame = CGRectMake(self.bounds.size.width/2, 0, self.bounds.size.width/2, self.bounds.size.height); [_rightGrain setColors:[NSArray arrayWithObjects: (id)[[UIColor colorWithRed:255/255.0 green:255/255.0 blue:255/255.0 alpha:1.0] CGColor], (id)[[UIColor colorWithRed:255/255.0 green:255/255.0 blue:255/255.0 alpha:1.0] CGColor], nil]]; [_rightGrain setLocations:@[@0, @1.0]]; [_rightGrain setStartPoint:CGPointMake(0.5, 0)]; [_rightGrain setEndPoint:CGPointMake(0.5, 1)]; _rightGrain.type = kCAGradientLayerAxial; } return _rightGrain; } - (CAGradientLayer *)leftGrain { if (!_leftGrain) { _leftGrain = [[CAGradientLayer alloc] init]; _leftGrain.frame = CGRectMake(0, 0, self.bounds.size.width/2, self.bounds.size.height); [_leftGrain setColors:[NSArray arrayWithObjects: (id)[[UIColor colorWithRed:255/255.0 green:255/255.0 blue:255/255.0 alpha:1.0] CGColor], (id)[[UIColor colorWithRed:255/255.0 green:0/255.0 blue:0/255.0 alpha:1.0] CGColor], nil]]; [_leftGrain setLocations:@[@0.5, @1.0]]; [_leftGrain setStartPoint:CGPointMake(0.5, 1)]; [_leftGrain setEndPoint:CGPointMake(0.5, 0)]; _leftGrain.type = kCAGradientLayerAxial; } return _leftGrain; } - (CABasicAnimation *)pathAnimation { if (!_pathAnimation) { _pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; _pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; _pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f]; _pathAnimation.fillMode = kCAFillModeForwards; _pathAnimation.removedOnCompletion = NO; } return _pathAnimation; } - (UIBezierPath *)borderPath { if (!_borderPath) { _borderPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width/2, self.bounds.size.width/2) radius:self.bounds.size.width/2 startAngle:-M_PI_2 endAngle:-M_PI_2 + M_PI*2 clockwise:YES]; } return _borderPath; } - (UIBezierPath *)bezierPath { if (!_bezierPath) { _bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2) radius:self.bounds.size.width/2 - _strokelineWidth - 4 startAngle:-M_PI_2 endAngle:-M_PI_2 + M_PI*2 clockwise:YES]; } return _bezierPath; } @end