i0S-CAShaperLayer结合UIBezierPath画圆一

实例:

@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;
}

附:效果进度条动画。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,294评论 4 61
  • 这几天坐立不安,听了汤小小老师两堂课后,丝毫没有越来越轻松的感觉。反而觉得如厚沉沉的乌云扑面压来,大有“山雨欲来风...
    南腔北调Z阅读 452评论 4 8
  • 裘淑闵 2008-8-28 11:18 活着(原创) 清晨 我睁开了迷茫的双眼 用力捏捏我疲惫的肌肤 很庆幸, 行...
    求研闵阅读 180评论 0 0
  • 冬天,是我们小孩儿最喜欢的季节,因为在冬天我们小孩可以打雪仗,放寒假,堆雪人,滑雪······ 冬天,不像春天一样...
    解邦华阅读 257评论 0 4
  • 叫能力训练 能力训练是一种能力,每个人使用的方式不一样,从我自己的理解这样的。 知识模型 ➔ 应用过程(试错/反馈...
    我是帅老师阅读 1,002评论 1 0