实例:
@interface QACircleProgressView : UIView{
CAShapeLayer *_trackLayer;
UIBezierPath *_trackPath;
CAShapeLayer *_progressLayer;
UIBezierPath *_progressPath;
}
@property (nonatomic, strong) UIColor *trackColor;
@property (nonatomic, strong) UIColor *progressColor;
@property (nonatomic) float progress;//0~1之间的数
@property (nonatomic) float progressWidth;
- (void)setProgress:(float)progress animated:(BOOL)animated;
@end
import "QACircleProgressView.h"
@implementation QACircleProgressView
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
_trackLayer = [CAShapeLayer new];
_trackLayer.fillColor = nil;
_trackLayer.frame = self.bounds;
[self.layer addSublayer:_trackLayer];
_progressLayer = [CAShapeLayer new];
[self.layer addSublayer:_progressLayer];
_progressLayer.fillColor = nil;
_progressLayer.lineCap = kCALineCapRound;
_progressLayer.frame = self.bounds;
//默认5
self.progressWidth = 5;
}
return self;
}
- (void)setTrack
{
//bezierPathWithOvalInRect
_trackPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetWidth(self.bounds) / 2, CGRectGetHeight(self.bounds) / 2) radius:(self.bounds.size.width)/ 2 startAngle:0 endAngle:M_PI * 2 clockwise:YES];;
_trackLayer.path = _trackPath.CGPath;
}
- (void)setProgress
{
_progressPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetWidth(self.bounds) / 2, CGRectGetHeight(self.bounds) / 2) radius:self.bounds.size.width/ 2 startAngle:- M_PI_2 endAngle:(M_PI * 2) * _progress - M_PI_2 clockwise:YES];
_progressLayer.path = _progressPath.CGPath;
}
//设置进度条的宽度
- (void)setProgressWidth:(float)progressWidth
{
_progressWidth = progressWidth;
_trackLayer.lineWidth = _progressWidth;
_progressLayer.lineWidth = _progressWidth;
[self setTrack];
[self setProgress];
}
- (void)setTrackColor:(UIColor *)trackColor
{
_trackLayer.strokeColor = trackColor.CGColor;
}
- (void)setProgressColor:(UIColor *)progressColor
{
_progressLayer.strokeColor = progressColor.CGColor;
}
//设置进度
- (void)setProgress:(float)progress
{
_progress = progress;
[self setProgress];
}
- (void)setProgress:(float)progress animated:(BOOL)animated
{
[self setProgress:progress];
// 给这个layer添加动画效果
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 0.8;
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
[_progressLayer addAnimation:pathAnimation forKey:nil];
}
@end
ViewController:
/* 使用CAShapeLayer 结合 UIBezierPath 画出想要的图形
* 1,新建UIBezierPath 对象
* 2,新建CAShapeLayer 对象
* 3,bezierPath 对象的CGPath 赋值给caShapeLayer.path
* 4,把caShapeLayer添加到某个图形的layer中
*/
- (void)viewDidLoad {
[super viewDidLoad];
QACircleProgressView *progressView = [[QACircleProgressView alloc]initWithFrame:CGRectMake(20,50, 80, 80)];
[self.view addSubview:progressView];
progressView.progressWidth = 3;
progressView.progressColor = [UIColor colorWithRed:136/255.0 green:199/255.0 blue:80/255.0 alpha:1.0];
progressView.trackColor = [UIColor colorWithRed:223/255.0 green:223/255.0 blue:223/255.0 alpha:1.0];
progressView.progress = 0.8;
}
附:效果进度条动画。
网友评论