带动画渐进效果与颜色渐变的圆弧进度控件设计-阿里云开发者社区

带动画渐进效果与颜色渐变的圆弧进度控件设计

今天帮朋友写了一个小巧的圆弧进度控件，控件十分简单，主要设计思路采用CAShapeLayer来创建控件圆弧形状，使用CAGradientLayer来进行颜色渐变的渲染，两者结合来创建出颜色渐变的圆弧进度条控件，关于进度动画采用CoreAnimation动画处理。控件进行了简洁的封装，提供了面向使用的接口，需要的朋友可以自取，Demo地址如下：

http://pan.baidu.com/s/1gfqDbtp。

控件中主要提供了，改变进度条渐变颜色，圆弧进度条宽度，带动画效果的改变进度，改变进度百分比字体颜色等方法。效果是例如如下：

改变字体颜色

改变进度

改变进度条颜色

改变进度条宽度

控件接口的设计：

#import <UIKit/UIKit.h>
@interface YHBaseCircleView : UIView
//==============下面三个渐变色必须全部设置 否则效果可能与预期不同================//
/**

 *设置圆弧渐变色的起始色

 */
@property(nonatomic,strong)UIColor * minLineColor;
/**

 *设置圆弧渐变色的中间色

 */
@property(nonatomic,strong)UIColor * midLineColor;
/**

 *设置圆弧渐变色的终止色

 */
@property(nonatomic,strong)UIColor * maxLineColor;
/**

 *设置圆弧背景色

 */
@property(nonatomic,strong)UIColor * lineTintColor;
/**

 *设置进度

 */
@property(nonatomic,assign)CGFloat progress;
/**

 *设置线的宽度 max = 20 min = 0.5

 */
@property(nonatomic,assign)CGFloat lineWidth;
/**

 *设置是否显示百分比标签

 */

@property(nonatomic,assign)BOOL showTipLabel;
/**

 *设置百分比标签进度颜色

 */
@property(nonatomic,strong)UIColor * textColor;
/**

 *  @brief 设置进度

 *

 *  @param progress 进度 取值0-1

 *

 *  @param animated 是否显示动画

 *

 */

-(void)setProgress:(CGFloat)progress animated:(BOOL)animated;
@end

实现方法如下：

#import "YHBaseCircleView.h"
@implementation YHBaseCircleView
{

    //进度控件内容尺寸

    float _contentWidth;

    float _contentHeight;

    //形状layer

    CAShapeLayer * _shapeLayer;

    //颜色渐变layer

    CAGradientLayer * _gradLayerR;

    CAGradientLayer * _gradLayerL;

    CALayer * _gradLayer;

    //内容layer

    CAShapeLayer * _contentLayer;

    UILabel * _tipLabel;

    //专门用来更新label

    NSTimer * _timer;

    float _oldProgress;

    //进度新旧进度值

    int old;

    int new;
}
 
-(void)awakeFromNib{

    [self reloadView];
}
-(instancetype)initWithFrame:(CGRect)frame{

    self = [super initWithFrame:frame];

    if (self) {

        [self reloadView];

    }

    return self;
}
 
-(void)reloadView{

    self.backgroundColor = [UIColor clearColor];

    //取设置的frame的最小长或款作为内容区域

    _contentWidth = _contentHeight = CGRectGetWidth(self.frame)>CGRectGetHeight(self.frame)?CGRectGetHeight(self.frame):CGRectGetWidth(self.frame);

    //创建内容layer

    _contentLayer = [CAShapeLayer layer];

    _contentLayer.bounds = CGRectMake(0, 0, _contentWidth, _contentHeight);

    _contentLayer.position = CGPointMake(_contentWidth/2, _contentHeight/2);

    _contentLayer.backgroundColor = [UIColor clearColor].CGColor;

    //进行边界描绘 默认线宽为4px

    UIBezierPath * pathT = [UIBezierPath bezierPathWithArcCenter:_contentLayer.position radius:_contentWidth/2-2 startAngle:-M_PI_2 endAngle:M_PI_2*3 clockwise:YES];

    _contentLayer.path = pathT.CGPath;

    //默认填充颜色为白色

    _contentLayer.fillColor = [UIColor whiteColor].CGColor;

    _contentLayer.lineWidth = 4;

    _contentLayer.strokeColor = [UIColor grayColor].CGColor;

    [self.layer addSublayer:_contentLayer];

    _shapeLayer = [CAShapeLayer layer];

    _shapeLayer.bounds = CGRectMake(0, 0, _contentWidth, _contentHeight);

    _shapeLayer.position = CGPointMake(_contentWidth/2, _contentHeight/2);

    _shapeLayer.backgroundColor = [UIColor clearColor].CGColor;
//    _shapeLayer.lineCap  = kCALineCapRound;

    //进行边界描绘 默认线宽为4px

    UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:_shapeLayer.position radius:_contentWidth/2-2 startAngle:-M_PI_2 endAngle:M_PI_2*3 clockwise:YES];

    _shapeLayer.path = path.CGPath;

    _shapeLayer.fillColor = [UIColor clearColor].CGColor;

    _shapeLayer.lineWidth = 4;

    _shapeLayer.strokeColor = [UIColor redColor].CGColor;

    //默认黄转橙转红的边界线 分别由两个gradLayer进行控制

    _gradLayer = [CALayer layer];

    _gradLayer.bounds = _contentLayer.bounds;

    _gradLayer.position = _contentLayer.position;

    _gradLayer.backgroundColor = [UIColor clearColor].CGColor;

    _gradLayerL = [CAGradientLayer layer];

    _gradLayerL.bounds = CGRectMake(0, 0, _contentWidth/2, _contentHeight);

    _gradLayerL.locations = @[@0.6];

    [_gradLayerL setColors:@[(id)[UIColor redColor].CGColor,(id)[UIColor orangeColor].CGColor]];

    _gradLayerL.position = CGPointMake(_gradLayerL.bounds.size.width/2, _gradLayerL.bounds.size.height/2);

   [_gradLayer addSublayer:_gradLayerL];

    _gradLayerR = [CAGradientLayer layer];

    _gradLayerR.locations = @[@0.6];

    _gradLayerR.bounds = CGRectMake(_contentWidth/2, 0, _contentWidth/2, _contentHeight);

    [_gradLayerR setColors:@[(id)[UIColor yellowColor].CGColor,(id)[UIColor orangeColor].CGColor]];

    _gradLayerR.position = CGPointMake(_gradLayerR.bounds.size.width/2+_contentWidth/2, _gradLayerR.bounds.size.height/2);

    [_gradLayer addSublayer:_gradLayerR];

    [_gradLayer setMask:_shapeLayer];

    [_contentLayer addSublayer:_gradLayer];

    //setter方法初始化

    _minLineColor = [UIColor yellowColor];

    _midLineColor = [UIColor orangeColor];

    _maxLineColor = [UIColor redColor];

    _lineTintColor = [UIColor grayColor];

    _progress = 1;

    _lineWidth = 4;

    _lineTintColor = [UIColor grayColor];

    _textColor = [UIColor orangeColor];

    _oldProgress = 1;

    //创建tiplabel

    [self creatTipLabel];

    _timer = [NSTimer scheduledTimerWithTimeInterval:1/60.0 target:self selector:@selector(updateLabel) userInfo:nil repeats:YES];

    _timer.fireDate = [NSDate distantFuture];

}
 
-(void)removeFromSuperview{

    _timer.fireDate = [NSDate distantFuture];

    [_timer invalidate];

    _timer =nil;

    [super removeFromSuperview];
}

-(void)updateLabel{

    if (old<new) {

        old++;

        NSMutableAttributedString * attri = [[NSMutableAttributedString alloc]initWithString:[NSString stringWithFormat:@"%d%%",old]];

        [attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:22] range:NSMakeRange(0, attri.length-1)];

        [attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:15] range:NSMakeRange(attri.length-1, 1)];

        [attri addAttribute:NSForegroundColorAttributeName value:_textColor range:NSMakeRange(0, attri.length)];

        _tipLabel.attributedText = attri;

    }else if (old>new){

        old--;

        NSMutableAttributedString * attri = [[NSMutableAttributedString alloc]initWithString:[NSString stringWithFormat:@"%d%%",old]];

        [attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:22] range:NSMakeRange(0, attri.length-1)];

        [attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:15] range:NSMakeRange(attri.length-1, 1)];

        [attri addAttribute:NSForegroundColorAttributeName value:_textColor range:NSMakeRange(0, attri.length)];

        _tipLabel.attributedText = attri;

    }else{

        _timer.fireDate = [NSDate distantFuture];

    }
}

-(void)setMinLineColor:(UIColor *)minLineColor{

    _minLineColor = minLineColor;

    [_gradLayerR setColors:@[(id)_minLineColor.CGColor,(id)_midLineColor.CGColor]];

    [_gradLayerL setColors:@[(id)_maxLineColor.CGColor,(id)_midLineColor.CGColor]];
}

-(void)setMidLineColor:(UIColor *)midLineColor{

    _midLineColor = midLineColor;

    [_gradLayerR setColors:@[(id)_minLineColor.CGColor,(id)_midLineColor.CGColor]];

    [_gradLayerL setColors:@[(id)_maxLineColor.CGColor,(id)_midLineColor.CGColor]];
}

-(void)setMaxLineColor:(UIColor *)maxLineColor{

    _maxLineColor = maxLineColor;

    [_gradLayerR setColors:@[(id)_minLineColor.CGColor,(id)_midLineColor.CGColor]];

    [_gradLayerL setColors:@[(id)_maxLineColor.CGColor,(id)_midLineColor.CGColor]];
}

-(void)setTintColor:(UIColor *)tintColor{

    _lineTintColor = tintColor;

    _contentLayer.strokeColor = tintColor.CGColor;
}

-(void)setProgress:(CGFloat)progress{

    _oldProgress = _progress;

    _progress=progress;

    _shapeLayer.strokeStart = 0;

    _shapeLayer.strokeEnd = progress>1?1:progress;

    NSMutableAttributedString * attri ;

    if (progress==1) {

        attri = [[NSMutableAttributedString alloc]initWithString:@"100%"];

    }else{

        attri = [[NSMutableAttributedString alloc]initWithString:[NSString stringWithFormat:@"%2d%%",(int)(progress*100)]];

    }

    [attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:22] range:NSMakeRange(0, attri.length-1)];

    [attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:15] range:NSMakeRange(attri.length-1, 1)];

    [attri addAttribute:NSForegroundColorAttributeName value:_textColor range:NSMakeRange(0, attri.length)];

    _tipLabel.attributedText = attri;
}
 
-(void)setProgress:(CGFloat)progress animated:(BOOL)animated{

    _oldProgress = _progress;

    _progress = progress;

    old = (int)(_oldProgress*100);

    new = (int)(_progress*100);

    CABasicAnimation * ani = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

    ani.toValue = progress>1?@1:@(progress);

    ani.duration = 0.3;

    ani.delegate=self;

    ani.fillMode=kCAFillModeForwards;

    ani.removedOnCompletion=NO;

    [_shapeLayer addAnimation:ani forKey:nil];

    _timer.fireDate = [NSDate distantPast];

}

- (void)dealloc
{

}

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{

    if (flag) {

        [_shapeLayer removeAllAnimations];

        _shapeLayer.strokeEnd = _progress>1?1:_progress;

    }
}

-(void)setLineWidth:(CGFloat)lineWidth{

    if (lineWidth<0.5) {

        lineWidth=0.5;

    }

    if (lineWidth>20) {

        lineWidth = 20;

    }

    _lineWidth = lineWidth;

    UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:_shapeLayer.position radius:_contentWidth/2-lineWidth/2 startAngle:-M_PI_2 endAngle:M_PI_2*3 clockwise:YES];

    _shapeLayer.path = path.CGPath;

    _shapeLayer.fillColor = [UIColor clearColor].CGColor;

    _shapeLayer.lineWidth = lineWidth;

    _shapeLayer.strokeColor = [UIColor redColor].CGColor;

    [_gradLayer setMask:_shapeLayer];

    UIBezierPath * pathT = [UIBezierPath bezierPathWithArcCenter:_contentLayer.position radius:_contentWidth/2-lineWidth/2 startAngle:-M_PI_2 endAngle:M_PI_2*3 clockwise:YES];

    _contentLayer.path = pathT.CGPath;

    _contentLayer.lineWidth = lineWidth;
 
}

-(void)setTextColor:(UIColor *)textColor{

    _textColor = textColor;

    NSMutableAttributedString * attr = [[NSMutableAttributedString alloc]initWithAttributedString:_tipLabel.attributedText];

    [attr addAttribute:NSForegroundColorAttributeName value:textColor range:NSMakeRange(0, attr.length)];

    _tipLabel.attributedText = attr;
}

-(void)creatTipLabel{

    _tipLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, sqrt(2)/2*(_contentWidth-_lineWidth*2), sqrt(2)/2*(_contentWidth-_lineWidth*2))];

    _tipLabel.center = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);

    _tipLabel.backgroundColor = [UIColor clearColor];

    _tipLabel.textAlignment = NSTextAlignmentCenter;

    NSMutableAttributedString * attri = [[NSMutableAttributedString alloc]initWithString:@"100%"];

    [attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:22] range:NSMakeRange(0, 3)];

    [attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:15] range:NSMakeRange(3, 1)];

    [attri addAttribute:NSForegroundColorAttributeName value:[UIColor orangeColor] range:NSMakeRange(0, 4)];

    _tipLabel.attributedText = attri;

    [self addSubview:_tipLabel];
}
@end