宽容他人,放过自己。

创建弧形进度条

Posted on By anchoriteFili

iOS实现一个颜色渐变的弧形进度条
使用CAShapeLayer与UIBezierPath画出想要的图形
弧形进度条测试.zip
圆形进度条测试.zip

快速创建半圆形弧度框架

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@interface arcViewOne : 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 "arcViewOne.h"

//M_PI表示180.0,除以180.0得到一等分,那么x中直接填写度数就行
#define degreesToRadians(x) (M_PI*(x)/180.0)

@implementation arcViewOne

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        _trackLayer = [CAShapeLayer new]; //用new直接创建轨道层
        _trackLayer.lineCap = kCALineCapRound;
        [self.layer addSublayer:_trackLayer]; //添加
        _trackLayer.fillColor = nil; //填充颜色是空
        _trackLayer.frame = self.bounds; //frame为view的frame
        
        _progressLayer = [CAShapeLayer new]; //new创建进度条层
        [self.layer addSublayer:_progressLayer]; //添加进度条层
        _progressLayer.fillColor = nil; //进度条层填充颜色设为空
        _progressLayer.lineCap = kCALineCapRound; //进度条头部的形状
        _progressLayer.frame = self.bounds; //
        
        //默认5
        self.progressWidth = 5; //进度条的宽度
    }
    return self;
}
#pragma mark -----------------------只需修改这部分内容-------------------------------
#pragma mark 用贝塞尔曲线来设置轨道路径
- (void)setTrack
{
    /**
     设置弧线的中心为view的中心,radius(半径)为view的宽度减去进度条的宽度除以2,
     开始angle(角度)从-240开始到60结束
     */
    _trackPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2) radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:degreesToRadians(-240) endAngle:degreesToRadians(60) clockwise:YES];;
    _trackLayer.path = _trackPath.CGPath;
}

#pragma mark 用贝塞尔曲线来设置进度条路径
- (void)setProgress
{
    /**
     同理创建进度条的贝塞尔曲线:
     进度条的中心为view中心,半径为view的宽度减去进图条的宽度除以2,开始位置为-240,
     进度条弧度 = 开始弧度数 + 弧形总长度*弧度百分比
     */
    _progressPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2) radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:degreesToRadians(-240) endAngle:degreesToRadians(-240)+degreesToRadians(300)*_progress clockwise:YES];
    _progressLayer.path = _progressPath.CGPath;
}
#pragma mark ------------------------------end--------------------------------

#pragma mark 设置进度条的宽度方法,并且将宽度调用设置轨道和进度条路径的方法
- (void)setProgressWidth:(float)progressWidth
{
    /**
     将传过来的宽度分别赋给轨道和进度条,使得两者宽度一样
     */
    _progressWidth = progressWidth;
    _trackLayer.lineWidth = _progressWidth;
    _progressLayer.lineWidth = _progressWidth;
//    引用两个路径方法
    [self setTrack];
    [self setProgress];
}

#pragma mark setter方法设置轨道填充颜色
- (void)setTrackColor:(UIColor *)trackColor
{
    _trackLayer.strokeColor = trackColor.CGColor;
}

#pragma mark setter方法设置进度条颜色
- (void)setProgressColor:(UIColor *)progressColor
{
    _progressLayer.strokeColor = progressColor.CGColor;
}

#pragma mark 重写进度条方法
- (void)setProgress:(float)progress
{
    _progress = progress;
    
    [self setProgress];
}

#pragma mark 可以自己设置方法,进行一次性赋值
- (void)setProgress:(float)progress animated:(BOOL)animated
{
    
}

@end