今天产品要弄一个圆形的进度条
1532512706923.jpg
有很多开源的进度条不用，非要弄这种效果，就不吐槽了，还是想想怎么实现
废话就不多说了 直接上代码
#import <UIKit/UIKit.h>
@interface RoundProgressView : UIView
/**进度条颜色*/
@property (strong, nonatomic) UIColor *progressColor;
/**dash pattern*/
@property (strong, nonatomic) NSArray *lineDashPattern;
/**进度Label字体*/
@property (strong, nonatomic) UIFont *progressFont;
- (void)updateProgress:(CGFloat)progress;
@end
#import "RoundProgressView.h"
#define kBorderWith 10
#define center CGPointMake(self.bounds.size.width / 2.0, self.bounds.size.height / 2.0)
@interface RoundProgressView()
@property (strong, nonatomic) CAShapeLayer *outLayer;
@property (strong, nonatomic) CAShapeLayer *progressLayer;
@property (strong, nonatomic) UILabel *progressLabel;
@end
@implementation RoundProgressView
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self drawProgress];
}
return self;
}
-(void)drawProgress{
UIBezierPath *loopPath = [UIBezierPath bezierPathWithArcCenter:center radius:(self.bounds.size.width - kBorderWith)/ 2.0 startAngle:-M_PI_2 endAngle:M_PI * 3.0 / 2.0 clockwise:YES];
// 外圈
self.outLayer = [CAShapeLayer layer];
self.outLayer.strokeColor = [UIColor lightGrayColor].CGColor;
self.outLayer.lineWidth = kBorderWith;
self.outLayer.fillColor = [UIColor clearColor].CGColor;
self.outLayer.path = loopPath.CGPath;
[self.layer addSublayer:self.outLayer];
// 进度条
self.progressLayer = [CAShapeLayer layer];
self.progressLayer.fillColor = [UIColor clearColor].CGColor;
self.progressLayer.strokeColor = [UIColor blackColor].CGColor;
self.progressLayer.lineWidth = kBorderWith;
self.progressLayer.strokeStart = 0;
self.progressLayer.strokeEnd = 0;
self.progressLayer.path = loopPath.CGPath;
[self.layer addSublayer:self.progressLayer];
// 进度Label
self.progressLabel = [UILabel new];
self.progressLabel.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
self.progressLabel.font = [UIFont systemFontOfSize:40];
self.progressLabel.textAlignment = NSTextAlignmentCenter;
[self addSubview:self.progressLabel];
}
- (void)updateProgress:(CGFloat)progress {
[CATransaction begin];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[CATransaction setAnimationDuration:0.5];
self.progressLayer.strokeEnd = progress / 100.0;
[CATransaction commit];
self.progressLabel.text = [NSString stringWithFormat:@"%.0f",progress];
}
- (void)setLineDashPattern:(NSArray *)lineDashPattern
{
_lineDashPattern = lineDashPattern;
self.outLayer.lineDashPattern = lineDashPattern;
self.progressLayer.lineDashPattern = lineDashPattern;
}
- (void)setProgressColor:(UIColor *)progressColor
{
self.progressLayer.strokeColor = progressColor.CGColor;
self.progressLabel.textColor = progressColor;
}
- (void)setProgressFont:(UIFont *)progressFont
{
self.progressLabel.font = progressFont;
}
调用
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.progressView =[[RoundProgressView alloc]initWithFrame:CGRectMake((ScreenWidth - 200)/2, 100, 200, 200)];
self.progressView.backgroundColor = [UIColor yellowColor];
[self.progressView setProgressColor:[UIColor blueColor]];
self.progressView.lineDashPattern = @[@(8),@(5)];
self.progressView.progressFont = [UIFont systemFontOfSize:70];
[self.view addSubview:self.progressView];
}
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
[self.progressView updateProgress:25];
}
