ios弧形进度条_iOS圆形进度条

最近在做一个类似于滴滴打车派单的功能，需要做一个圆形进度条。效果如下图：

其中实现圆形进度条的demo代码如下：

@interface ProgressView() {

NSUInteger num;

}

/** timer */

@property (nonatomic, strong) NSTimer *timer;

/** 图片 */

@property (nonatomic, strong) UIImageView *imageView;

/** 背景layer */

@property (nonatomic, strong) CAShapeLayer *backgroundLayer;

/** 进度条layer */

@property (nonatomic, strong) CAShapeLayer *progressLayer;

@end

@implementation ProgressView

- (void)dealloc {

if (_timer) {

[_timer invalidate];

_timer = nil;

}

}

- (id)initWithFrame:(CGRect)frame {

if (self = [super initWithFrame:frame]) {

[self buildView];

}

return self;

}

- (void)layoutSubviews {

[super layoutSubviews];

}

- (void)buildView {

// 设置self

self.transform = CGAffineTransformMakeRotation(-M_PI_2);

self.imageView.transform = CGAffineTransformMakeRotation(M_PI_2);

self.layer.cornerRadius = self.frame.size.width * 0.5;

self.layer.masksToBounds = YES;

// 添加专辑图片

[self addSubview:self.imageView];

self.imageView.image = [UIImage imageNamed:@"img1418"];

[self addSubview:self.imageView];

// 设置进度条的背景 Layer

[self.layer addSublayer:self.backgroundLayer];

// 设置进度条 Layer

[self.layer addSublayer:self.progressLayer];

self.progressLayer.strokeEnd = 0;

// 设置 Timer

NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timeInterval) userInfo:nil repeats:YES];

self.timer = timer;

}

- (UIImageView *)imageView {

if (!_imageView) {

_imageView = [[UIImageView alloc] initWithFrame:self.bounds];

_imageView.contentMode = UIViewContentModeScaleAspectFit;

}

return _imageView;

}

- (CALayer *)backgroundLayer {

if (!_backgroundLayer) {

_backgroundLayer = [self buildShapeLayerColor:[UIColor lightGrayColor] lineWidth:kLineWidth];

}

return _backgroundLayer;

}

- (CALayer *)progressLayer {

if (!_progressLayer) {

_progressLayer = [self buildShapeLayerColor:[UIColor blueColor] lineWidth:kLineWidth];

}

return _progressLayer;

}

- (CAShapeLayer *)buildShapeLayerColor:(UIColor *)color lineWidth:(CGFloat)width {

CAShapeLayer *layer = [CAShapeLayer layer];

CGRect rect = {kLineWidth * 0.5, kLineWidth * 0.5, self.frame.size.width - kLineWidth, self.frame.size.height - kLineWidth};

// 设置path

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:rect];

layer.path = path.CGPath;

// 设置layer

layer.strokeColor = color.CGColor;

layer.fillColor = [UIColor clearColor].CGColor;

layer.lineWidth = width;

layer.lineCap = kCALineCapRound;

return layer;

}

- (void)timeInterval {

if (num == 20) {

[self.timer invalidate];

self.timer = nil;

}

num ++;

[self updateProgressWithNumber:num];

}

- (void)updateProgressWithNumber:(NSUInteger)number {

[CATransaction begin];

[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];

[CATransaction setAnimationDuration:1];

// 20为倒计时时间

self.progressLayer.strokeEnd = number / 20.0f;

[CATransaction commit];

}

这么调用的：

CGFloat width = [UIScreen mainScreen].bounds.size.width;

ProgressView *progress = [[ProgressView alloc] initWithFrame:CGRectMake(10, 20, width - 20, width - 20)];

[self.view addSubview:progress];

效果图是这样的：