//
|
// 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
|
