h头文件
<pre>
//
// CricleArcView.h
// circleDemo
//
// Created by OMyCar on 16/12/5.
// Copyright © 2016年 OMyCar. All rights reserved.
//
import <UIKit/UIKit.h>
define DEFAULT_LINE_WIDTH 10 //轨道线宽度（默认）
define DEFAULT_START_ANGLE -180 //开始角度（默认）
define DEFAULT_END_ANGLE 0 //结束角度（默认）
define DEFAULT_RADIUS 150 //默认半径（默认）
define DEFAULT_PROGRESS 100 //进度（默认）
define DEFAULT_DURATION 1 //动画时间（默认）
define DEFAULT_TRACKCOLOR [UIColor grayColor] // 轨道颜色(默认）
define DEFAULT_COLOR_ARRAY @[(id)[[UIColor greenColor] CGColor],(id)[[UIColor yellowColor] CGColor],(id)[[UIColor redColor] CGColor]] //渐变颜色数组（默认）
@interface CricleArcView : UIView
@property (nonatomic,strong) UIColor *trackColor; //轨道颜色
@property (nonatomic,assign) CGFloat lineWidth; //轨道的宽度
@property (nonatomic,assign) CGFloat startAngle; //开始角度
@property (nonatomic,assign) CGFloat endAngle; //结束角度
@property (nonatomic,assign) CGFloat radius; //半径
@property (nonatomic,strong) NSArray *colorArray; //渐变颜色数组
@property (nonatomic,assign) CGFloat progress; //范围：（0-100）
@property (nonatomic,assign) CGFloat duration; //动画时间
/**
- @bref 设置进度（可以选择动画时间与是否动画开启）需要等drawRect方法完成后，动画才起效
*/
-(void)setProgress:(CGFloat)progress andAnimated:(BOOL)animated;
/**
- @bref 创建一个渐变圆弧,轨道宽，起始角度，结束角度，半径，渐变颜色数组
*/
+(instancetype)createCircleViewWithFrame:(CGRect)frame andLineWith:(CGFloat)lineWidth andStartAngle:(CGFloat)startAngle andEndAngel:(CGFloat)endAngle andRadius:(CGFloat)radius andColorArray:(NSArray *)colorArray andTrackColor:(UIColor *)trackColor;
@end
</pre>
m实现文件
<pre>
//
// CricleArcView.m
// circleDemo
//
// Created by OMyCar on 16/12/5.
// Copyright © 2016年 OMyCar. All rights reserved.
//
import "CricleArcView.h"
define degreesToRadians(x) (M_PI*(x)/180.0) //把角度转换成PI的方式
@interface CricleArcView ()
{
BOOL isTrackColor;
BOOL isLineWidth;
BOOL isStartAngle;
BOOL isEndAngle;
BOOL isRadius;
BOOL isDuration;
BOOL isColorArray;
BOOL isProress;
}
@property (nonatomic,strong) CAShapeLayer *trackLayer; //轨道图层
@property (nonatomic,strong) CAShapeLayer *progressLayer; //进度图层
@end
@implementation CricleArcView
/**
- @bref 创建一个渐变圆弧,轨道宽，起始角度，结束角度，半径，渐变颜色数组
*/
+(instancetype)createCircleViewWithFrame:(CGRect)frame andLineWith:(CGFloat)lineWidth andStartAngle:(CGFloat)startAngle andEndAngel:(CGFloat)endAngle andRadius:(CGFloat)radius andColorArray:(NSArray *)colorArray andTrackColor:(UIColor *)trackColor{
CricleArcView *view = [[CricleArcView alloc]initWithFrame:frame];
view.lineWidth = lineWidth;
view.startAngle = startAngle;
view.endAngle = endAngle;
view.radius = radius;
view.colorArray = colorArray;
view.trackColor = trackColor;
return view;
}
/**
- @bref 重写系统绘制视图方法
*/
- (void)drawRect:(CGRect)rect {
pragma mark - ++++++++++++++++++++++++++ 初始化属性，没有赋值就使用默认值 ++++++++++++++++++++++++++
_trackColor = isTrackColor == 0 ? DEFAULT_TRACKCOLOR : _trackColor;
_lineWidth = isLineWidth == 0 ? DEFAULT_LINE_WIDTH : _lineWidth;
_startAngle = isStartAngle == 0 ? DEFAULT_START_ANGLE : _startAngle;
_endAngle = isEndAngle == 0 ? DEFAULT_END_ANGLE : _endAngle;
_radius = isRadius == 0 ? DEFAULT_RADIUS : _radius;
_duration = isDuration == 0 ? DEFAULT_DURATION : _duration;
_colorArray = isColorArray == 0 ? DEFAULT_COLOR_ARRAY : _colorArray;
_progress = isProress == 0 ? DEFAULT_PROGRESS : _progress;
pragma mark - ++++++++++++++++++++++++++ 首先绘制轨道图层layer ++++++++++++++++++++++++++
//创建轨道图层
_trackLayer = [CAShapeLayer layer];//创建一个track shape layer
[self.layer addSublayer:_trackLayer];
_trackLayer.frame = rect;
_trackLayer.fillColor = [[UIColor clearColor] CGColor]; //轨道图层的填充颜色
//使用贝塞尔曲线给图层赋值轨道
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2, _radius+_lineWidth) radius:_radius startAngle:degreesToRadians(_startAngle) endAngle:degreesToRadians(_endAngle) clockwise:YES];//用来构建圆形，clockwise表示顺时针画图还是逆时针画图
_trackLayer.path =[path CGPath]; //把path传递給layer，然后layer会处理相应的渲染，整个逻辑和CoreGraph是一致的。
_trackLayer.strokeColor = _trackColor.CGColor;//指定path的渲染颜色
_trackLayer.lineCap = kCALineCapRound;//指定线的边缘是圆的
_trackLayer.lineWidth = _lineWidth;//线的宽度
pragma mark - ++++++++++++++++++++++++++ 得到一条轨道后圆弧后，创建进度轨道图层 ++++++++++++++++++++++++++
//创建进度图层
_progressLayer = [CAShapeLayer layer];
_progressLayer.fillColor = [[UIColor clearColor] CGColor]; //进度填充颜色
_progressLayer.strokeColor = [[UIColor whiteColor] CGColor]; //图层绘制颜色，设置了非透明色后，后面利用作为渐变图层的蒙版
_progressLayer.lineCap = kCALineCapRound;
_progressLayer.lineWidth = _lineWidth;
_progressLayer.path = [path CGPath];
pragma mark - ++++++++++++++++++++++++++ 创建好进度轨道图层后，创建一个渐变图层 ++++++++++++++++++++++++++
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = rect;
[gradientLayer setColors:_colorArray];
[gradientLayer setStartPoint:CGPointMake(0, 1)];
[gradientLayer setEndPoint:CGPointMake(1,1)];
[self.layer addSublayer:gradientLayer];
pragma mark - ++++++++++++++++++++++++++ 创建好渐变层后，添加一个图层蒙版，显示蒙版有颜色的部分 +++++++++++++++++++++
//蒙版的作用可以想象成就是一张纸，可以看到下层图层的部分就是那张纸（蒙版层）的有颜色部分。
[gradientLayer setMask:_progressLayer]; //progressLayer有颜色的部分，即时轨道部分，
_progressLayer.strokeEnd = _progress/100.0;
}
pragma mark - ++++++++++++++++++++++++++ 进度设置 ++++++++++++++++++++++++++
-(void)setProgress:(CGFloat)progress{
isProress = YES;
_progress = progress;
_progressLayer.strokeEnd = progress/100.0;
}
-(void)setProgress:(CGFloat)progress andAnimated:(BOOL)animated{
isProress = YES;
_progress = progress;
[CATransaction begin];
[CATransaction setDisableActions:!animated];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[CATransaction setAnimationDuration:_duration];
_progressLayer.strokeEnd = _progress/100.0;
[CATransaction commit];
}
pragma mark - ++++++++++++++++++++++++++ 属性赋值 ++++++++++++++++++++++++++
-(void)setTrackColor:(UIColor *)trackColor{
isTrackColor = YES;
_trackColor = trackColor;
}
-(void)setLineWidth:(CGFloat)lineWidth{
isLineWidth = YES;
_lineWidth = lineWidth;
}
-(void)setStartAngle:(CGFloat)startAngle{
isStartAngle = YES;
_startAngle = startAngle;
}
-(void)setEndAngle:(CGFloat)endAngle{
isEndAngle = YES;
_endAngle = endAngle;
}
-(void)setRadius:(CGFloat)radius{
isRadius = YES;
_radius = radius;
}
-(void)setDuration:(CGFloat)duration{
isDuration = YES;
_duration = duration;
}
-(void)setColorArray:(NSArray *)colorArray{
isColorArray = YES;
_colorArray = colorArray;
}
@end
</pre>
效果图
网友评论