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