最近学习颜色渐变和制作虚线的相关知识，总结一下以便自己学习和多多交流。
效果图：
效果图.jpeg
新建项目之后：
第一步：在storyBoard添加slider控件设置位置和初始值为0.5，添加slider的拖拽事件- (IBAction)changeProgress:(UISlider *)slider 到viewController.m，可以获得slider的数值变化。
第二步：新建一个继承自UIView的文件CircleView，用来封装虚线和圆环。
如上图效果中：灰色的圆环和虚线是不需要考虑进度条的颜色变化，可以单独绘制；橘色的圆环和彩色虚线要根据slider进度条变化，制作时需要获得进度填的数值，所以首先绘制灰色的圆环和虚线。
1 ->灰色圆环和虚线 在CircleView的drawRect:方法中
//绘制灰色圆环
UIBezierPath *lightGary = [UIBezierPath bezierPathWithArcCenter:CGPointMake(120, 120) radius:110 startAngle:-M_PI endAngle:M_PI clockwise:YES];
lightGary.lineWidth = 5;
[[UIColor lightGrayColor] setStroke];
[lightGary stroke];//连接各个点
//绘制灰色虚线圆
/*
context – 绘制上下文
phase - 虚线绘制开始时跳过几个点
lengths – 指明虚线是如何交替绘制，具体看例子
count – lengths数组的长度
*/
CGContextRef context = UIGraphicsGetCurrentContext();//获取上下文
CGContextSetLineCap(context, kCGLineCapRound);//设置线条样式
CGContextSetLineWidth(context, 3);//设置线条宽度
CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor);//设置颜色
CGContextBeginPath(context);//开始绘制
CGFloat length[] = {5,5};//表示先绘制5个点，再跳过5个点
UIBezierPath *dashLine = [UIBezierPath bezierPathWithArcCenter:CGPointMake(120, 120) radius:100 startAngle:-M_PI_2 endAngle:M_PI *3/2 clockwise:YES];
CGContextSetLineDash(context, 0, length, 2);//虚线的起始点
CGContextAddPath(context, dashLine.CGPath);
CGContextStrokePath(context);//绘制
CGContextClosePath(context);//关闭图像
灰色圆环虚线.jpeg
2 ->获取slider的数据变化
在CircleView.h设置全局变量 progress，在ViewController获取slider的数值变化
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor yellowColor];
self.circleProgress = [[CircleView alloc]initWithFrame:CGRectMake(70, 50, 250, 250)];
self.circleProgress.backgroundColor = [UIColor blackColor];
[self.view addSubview:_circleProgress];
_circleProgress.progress = _slider.value;//获取初始值
}
- (IBAction)sliderChange:(UISlider*)sender {
NSLog(@"%f",sender.value);
_circleProgress.progress = sender.value;
[_circleProgress setNeedsDisplay];//slider值变化时重绘_circleProgress
}
3 ->绘制橘色圆环（和灰色圆环差不多，此代码写在绘制灰色虚线代码之前，否则圆环显示虚线）
startAngle：圆环绘制开始位置（-M_PI_2 ：12点钟的位置，-90度）
endAngle：圆环结束为止
//画橘色的圆环
UIBezierPath *orange = [UIBezierPath bezierPathWithArcCenter:CGPointMake(120, 120) radius:110 startAngle:-M_PI_2 endAngle:-M_PI_2 + M_PI *2 *_progress clockwise:YES];
orange.lineWidth = 4;
[[UIColor orangeColor] setStroke];
[orange stroke];
4->绘制渐变色虚线
// 绘制彩色虚线
CGContextRef contextColor = UIGraphicsGetCurrentContext();//获取上下文
CGContextSetLineCap(contextColor, kCGLineCapRound);//设置线条样式
CGContextSetLineWidth(contextColor, 3);//设置线条宽度
CGContextBeginPath(contextColor);//开始绘制
CGContextSetLineDash(contextColor, 0, length, 2);//虚线的起始点
CGContextAddArc(contextColor, 120, 120, 100,-M_PI_2 , -M_PI_2 + M_PI *2 *_progress, 0);
//以下是使用CGGradientRef 进行渐变色替换
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); //创建RGB色彩空间
NSArray *colorArray = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor];
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)colorArray, NULL);
CGColorSpaceRelease(colorSpace);
colorSpace = NULL;
//将context中的路径替换成路径的描边版本，使用参数context去计算路径（即创建新的路径是原来路径的描边）。用恰当的颜色填充得到的路径将产生类似绘制原来路径的效果。
CGContextReplacePathWithStrokedPath(contextColor);
CGContextClip(contextColor);
/*
CGGradientRef 线性渐变 参数意思：
Graphics context 指定用于绘制线性渐变的图形上下文。
CGGradientRef 线性渐变对象
startPoint 渐变开始位置 endPoint 渐变结束位置
Gradient drawing options 当你的起点或者终点不在图形上下文的边缘内时，指定该如何处理。你可以使用你的开始或结束颜色来填充渐变以外的空间。此参数为以下值之一：KCGGradientDrawsAfterEndLocation扩展整个渐变到渐变的终点之后的所有点 KCGGradientDrawsBeforeStartLocation扩展整个渐变到渐变的起点之前的所有点。0不扩展该渐变。
*/
CGContextDrawLinearGradient(contextColor, gradient, CGPointMake(0, rect.size.height / 2), CGPointMake(rect.size.width, rect.size.height / 2), 0);
// CGContextDrawRadialGradient(contextColor, gradient, CGPointMake(50, 150), 5, CGPointMake(150, 150),150,kCGGradientDrawsAfterEndLocation);// CGGradientRef 圆形渐变
CGGradientRelease(gradient);
到此已经制作出虚线渐变的进度效果图了，颜色渐变还有一种可以用CAGradientLayer实现（只有线性渐变），有时间可以自行学习一下。
如有哪里不对欢迎大家批评指正，感谢。
