iOS 自定义步骤实时进度条

利用CAShapeLayer、UIBezierPath、CAAnimation 实现步骤实时进度条。

效果图：

实现步骤：

1、创建 DynamicStepProgressView 类，继承UIView：

------------- DynamicStepProgressView.h --------------------

#import <UIKit/UIKit.h>

@interface DynamicStepProgressView :UIView

/*

 *  frame:传入的CGRect决定了progressView的位置及大小

 *  targetNumber:传入时间节点数目(例:5)

 */

- (instancetype)initWithFrame:(CGRect)frame targetNumber:(NSInteger)targetNumber;

/*

 *  progress:当前进度 (传入整数例:4)

 */

- (void)setProgress:(CGFloat)progress;

@end

------------- DynamicStepProgressView.m -----------------------

@interface DynamicStepProgressView() <CAAnimationDelegate>

@property(nonatomic,strong)CAShapeLayer *arcLayer1;

@property(nonatomic,strong)CAShapeLayer *arcLayer2;

@property (nonatomic ,assign)NSInteger targetNum;

@property (nonatomic,assign)CGFloat progressNum;

@end

@implementation DynamicStepProgressView

- (instancetype)initWithFrame:(CGRect)frame targetNumber:(NSInteger)targetNumber

{

    self = [superinitWithFrame:frame];

    if (self) {

        _targetNum = targetNumber;

        [selfsetBackgroundColor:[UIColorclearColor]];

        [selfsetProgress:0];

    }

    return self;

}

- (void)setProgress:(CGFloat)progress

{

    if (progress <0) {

        progress = 0;

    }

    if (progress >self.targetNum) {

        progress = self.targetNum;

    }

    self.progressNum = progress;

    

    [selfdrawGrayStepProgress];

    [selfdrawBlueStepProgress];

}

// 蓝色

- (void)drawBlueStepProgress

{

    NSInteger targetNum =self.targetNum;

    CGFloat progressNum =self.progressNum;

    

    // 线宽

    CGFloat lineWidth =3.0f;

    // 圆的半径

    CGFloat circleRadius = (self.bounds.size.height - lineWidth * 2.0) / 2.0;

    // 节点间线段距离

    CGFloat distanceBetweenTwoPoints = (self.bounds.size.width - circleRadius * targetNum * 2) / (targetNum -1);

    

    UIBezierPath *path = [UIBezierPathbezierPath];

    

    for (NSInteger i =0; i < progressNum; i ++) {

        // 画圈

        [path addArcWithCenter:CGPointMake(circleRadius + (distanceBetweenTwoPoints + circleRadius *2) * i, circleRadius) radius:circleRadiusstartAngle:M_PIendAngle:4 *M_PIclockwise:YES];

        

        // 画直线

        [path addLineToPoint:CGPointMake(circleRadius *2 + (distanceBetweenTwoPoints + circleRadius *2) * i, circleRadius)];

        _arcLayer1 = [CAShapeLayerlayer];

        _arcLayer1.path = path.CGPath;

        _arcLayer1.lineWidth = lineWidth;

        _arcLayer1.frame =self.bounds;

        _arcLayer1.fillColor = [UIColorclearColor].CGColor;

        _arcLayer1.strokeColor = [UIColorgreenColor].CGColor;

        [self.layeraddSublayer:_arcLayer1];

        [selfdrawLineAnimation1:_arcLayer1];

    }

}

// 灰色

- (void)drawGrayStepProgress

{

    NSInteger targetNum =self.targetNum;

    CGFloat progressNum =self.progressNum;

    

    // 线宽

    CGFloat lineWidth =3.0f;

    // 圆的半径

    CGFloat circleRadius = (self.bounds.size.height - lineWidth * 2.0) / 2.0;

    // 节点间线段距离

    CGFloat distanceBetweenTwoPoints = (self.bounds.size.width - circleRadius * targetNum * 2) / (targetNum -1);

    

    UIBezierPath *path = [UIBezierPathbezierPath];

    

    for (NSInteger i =0; i < targetNum; i ++) {

        // 画圈

        [path addArcWithCenter:CGPointMake(circleRadius + (distanceBetweenTwoPoints + circleRadius *2) * i, circleRadius) radius:circleRadiusstartAngle:M_PIendAngle:4 *M_PIclockwise:YES];

        

        // 画直线

        [path addLineToPoint:CGPointMake(circleRadius *2 + (distanceBetweenTwoPoints + circleRadius *2) * i, circleRadius)];

        if (i >= progressNum) {

            _arcLayer2 = [CAShapeLayerlayer];

            _arcLayer2.path = path.CGPath;

            _arcLayer2.lineWidth = lineWidth;

            _arcLayer2.frame =self.bounds;

            _arcLayer2.fillColor = [UIColorclearColor].CGColor;

            _arcLayer2.strokeColor = [UIColorgrayColor].CGColor;

            [self.layeraddSublayer:_arcLayer2];

            [selfdrawLineAnimation2:_arcLayer2];

        }

    }

}

-(void)drawLineAnimation1:(CAShapeLayer *)layer

{

    CABasicAnimation *basic = [CABasicAnimationanimationWithKeyPath:@"strokeEnd"];

    basic.duration =self.progressNum;

    basic.delegate =self;

    basic.fromValue = [NSNumbernumberWithInteger:0];

    basic.toValue = [NSNumbernumberWithInteger:1];

    [layer addAnimation:basicforKey:@""];

}

-(void)drawLineAnimation2:(CAShapeLayer *)layer

{

    CABasicAnimation *basic = [CABasicAnimationanimationWithKeyPath:@"strokeEnd"];

    basic.duration =0;

    basic.delegate =self;

    [layer addAnimation:basicforKey:@""];

}

@end

2、在需要使用时导入该类，初始化后传入当前进度。

#import "ViewController.h"

#import "DynamicStepProgressView.h"

@interface ViewController ()

@property(nonatomic,strong)DynamicStepProgressView *dynamicView;

@end

@implementation ViewController

- (void)viewDidLoad

{

    [superviewDidLoad];

    [self.viewaddSubview:self.dynamicView];

}

- (DynamicStepProgressView *)dynamicView

{

    if (!_dynamicView) {

        CGRect frame =CGRectMake(10,100,self.view.bounds.size.width - 20, 25);

        _dynamicView = [[DynamicStepProgressViewalloc]initWithFrame:frametargetNumber:5];

        [_dynamicViewsetProgress:4];

        

    }

    return_dynamicView;

}

@end