思路
- 画静态圆的方法有很多,例如UIBezierPath或者UIBezierPath + CAShapeLayer等等,本文也会用到.
- 动态效果即不断的更新圆环的角度(弧度),然后不断的绘制圆,达到动态效果,使用Quartz2d在drawRect中绘制
- CGContextDrawLinearGradient画圆,参数CGGradientRef设置渐变色,startPoint和endPoint设置渐变色方向
- 封装到一个自定义View,快速使用(文章末尾附Demo)
最终效果
手动绘制
手动画圆效果图.gif
手动画圆效果图.gif
使用:
//1.创建圆环
TYCircleViewConfigure *configure = [[TYCircleViewConfigure alloc]init];
configure.lineColor = [UIColor lightGrayColor];//圆环背景色
configure.circleLineWidth = 10;//圆环宽度
configure.isClockwise = YES;//设置顺时针方向画圆
configure.startPoint = CGPointMake(width / 2, 0);
configure.endPoint = CGPointMake(width / 2 , width);//渐变色分布方向
//渐变色的颜色
configure.colorArr = @[
(id)TYColorFromRGB(0x349CF7).CGColor,//浅蓝色
(id)TYColorFromRGB(0xFE5858).CGColor,//深橙色
(id)TYColorFromRGB(0x72DC4F).CGColor //浅绿色
];
//每个颜色区域值
configure.colorSize = @[@0,@0.3,@0.8];
TYCircleView *circleView = [[TYCircleView alloc]initWithFrame:CGRectMake(x , y, width, width) configure:configure];
[self.view addSubview:circleView];
自动绘制
- 自动绘制圆环其实只要把slider的value和圆环中心label的显示数值结合起来就可以,即动态改变圆环中心label的数值
- 怎么动态改变label的数值呢,推荐轮子:UICountingLabel,具体实现相对简单,不再介绍,结合中有坑不能逾越的,欢迎评论下方留言~
主要过程
1.文件.h中创建需要用到的属性的配置类
//配置属性
/********************* TYCircleViewConfigure ************************/
@interface TYCircleViewConfigure : NSObject
/** 圆环线条宽度 */
@property (nonatomic, assign) CGFloat circleLineWidth;
/** 圆环的颜色 */
@property (nonatomic, strong) UIColor *lineColor;
/** 是否是顺时针 默认是NO:逆时针 */
@property (nonatomic, assign) BOOL isClockwise;
/** 渐变色方向 起始坐标 */
@property (nonatomic, assign) CGPoint startPoint;
/** 渐变色方向 结束坐标 */
@property (nonatomic, assign) CGPoint endPoint;
/** 渐变色的颜色数组 */
@property (nonatomic, strong) NSArray *colorArr;
/** 每个颜色的起始位置数组 注:每个元素 0 <= item < 1 */
@property (nonatomic, strong) NSArray *colorSize;
//注意: colorArr.count 和 colorSize.count 必须相等
//不相等时,渐变色最终显示出来的样子和期望的会有差异
@end
- 绘制灰色的背景圆环
//绘制背景圆
- (void)drawBackCircleView {
//1.UIBezierPath创建一个圆环路径
//圆心
CGPoint arcCenter = CGPointMake(self.frame.size.width/2.0, self.frame.size.height/2.0);
//半径 , circleLineWidth = 圆环线条宽度
CGFloat radius = (self.frame.size.width - _configure.circleLineWidth)/2.0;
//开始弧度:-M_PI_2,竖直向上; 结束弧度:-M_PI_2 + M_PI*2,一圈 clockwise:YES逆时针 NO顺时针
//clockwise = NO时,若结束弧度 = -M_PI_2 + M_PI*2, 则圆环消失归零
UIBezierPath *circle = [UIBezierPath bezierPathWithArcCenter:arcCenter radius:radius startAngle:-M_PI_2 endAngle:-M_PI_2 + M_PI*2 clockwise:YES];
//2.创建一个ShapeLayer
CAShapeLayer *bgLayer = [CAShapeLayer layer];
bgLayer.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.width);
bgLayer.fillColor = [UIColor clearColor].CGColor;//圆环路径填充颜色
bgLayer.lineWidth = _configure.circleLineWidth;//圆环宽度
bgLayer.strokeColor = _configure.lineColor.CGColor;//路径颜色
bgLayer.strokeStart = 0.f;//路径开始位置
bgLayer.strokeEnd = 1.f;//路径结束位置
bgLayer.path = circle.CGPath;
//3.把路径设置到layer上,换出背景圆环
[self.layer addSublayer:bgLayer];
}
-
关于弧度的起始位置的弧度值(开始弧度和结束弧度)我们可以用一张图来描述,这个图描述了顺时针方向的弧度值,那么如果是逆时针的话,则-M_PI_2即代表正上方
angles_location
3.在TYDrawCircleView的实现中,重写drawRect,绘制圆环
- (void)drawRect:(CGRect)rect {
//获取图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//设置线的宽度
CGContextSetLineWidth(ctx, _configure.circleLineWidth);
//设置圆环线条的两个端点做圆滑处理
CGContextSetLineCap(ctx, kCGLineCapRound);
//设置画笔颜色
CGContextSetFillColorWithColor(ctx, [UIColor blackColor].CGColor);
//设置圆心
CGFloat originX = rect.size.width / 2;
CGFloat originY = rect.size.height / 2;
//计算半径
CGFloat radius = MIN(originX, originY) - _configure.circleLineWidth/2.0;
//建立一个最小初始弧度值,避免进度progress为0或1时圆环消失
CGFloat minAngle = M_PI/90 - self.progress * M_PI/80;
//逆时针画一个圆弧
if (self.configure.isClockwise) {
CGContextAddArc(ctx, rect.size.width / 2, rect.size.height / 2, radius, -M_PI_2, -M_PI_2 + minAngle + (2 * M_PI)*self.progress, NO);
}else{
CGContextAddArc(ctx, rect.size.width / 2, rect.size.height / 2, radius, -M_PI_2, -M_PI_2 - minAngle + (2 * M_PI)*(1-self.progress), YES);
}
//2. 创建一个渐变色
CGFloat locations[_configure.colorSize.count];
for (NSInteger index = 0; index < _configure.colorSize.count; index++) {
locations[index] = [_configure.colorSize[index] floatValue];
}
//创建RGB色彩空间，创建这个以后，context里面用的颜色都是用RGB表示
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace,(__bridge CFArrayRef _Nonnull)_configure.colorArr, _configure.colorSize.count==0?NULL:locations);
//释放色彩空间
CGColorSpaceRelease(colorSpace);
colorSpace = NULL;
//3.画出圆环路径
CGContextReplacePathWithStrokedPath(ctx);
//剪裁路径
CGContextClip(ctx);
//4.用渐变色填充,修改填充色的方向
CGContextDrawLinearGradient(ctx, gradient, _configure.startPoint, _configure.endPoint, 1);
//释放渐变色
CGGradientRelease(gradient);
}
- 动态画圆
- 利用slider手动改变其value,关联slider的value到progress,当progress改变时:
- (void)setProgress:(CGFloat)progress {
_progress = progress;
_circleView.progress = progress;
[_circleView setNeedsDisplay]; //重绘TYDrawCircleView,即调用TYDrawCircleView的DrawRect方法
}
渐变色讲解
-
渐变色方向
我们在TYDrawCircleView的重DrawRect方法中用CGContextDrawLinearGradient方法来画出圆环,并设置圆环的渐变色gradient和渐变色分布方向, startPoint即渐变色的起始点位置, endPoint即渐变色的终点位置
image.png
在"使用"中:
//width = 圆的直径
configure.startPoint = CGPointMake(width / 2, 0);
configure.endPoint = CGPointMake(width / 2 , width);//渐变色分布方向
我们设置tartPoint = CGPointMake(width / 2, 0)即点A的位置,configure.endPoint = CGPointMake(width / 2 , width)即点B的位置,其他位置的话大家可以自行尝试
-
渐变色分布区域
我们在"使用"中,设置了三种渐变色
//渐变色的颜色
configure.colorArr = @[
(id)TYColorFromRGB(0x349CF7).CGColor,//浅蓝色
(id)TYColorFromRGB(0xFE5858).CGColor,//深橙色
(id)TYColorFromRGB(0x72DC4F).CGColor //浅绿色
];
在不设置configure.colorSize (每个颜色区域值)时,三个颜色根据渐变色方向,依次均等分布
当我们不需要三个颜色均等分布时,可以通过设置configure.colorSize分别给三个颜色设置起始位置和结束位置
//每个颜色区域值
configure.colorSize = @[@0,@0.3,@0.8];
颜色分布.png
注意:
1.configure.colorSize数组中元素个数要和configure.colorArr相等,即颜色的个数和颜色区域值要一一对应,否则最终绘制的渐变色效果可能和期望的不同
2.configure.colorSize数组中每个元素代表了对应颜色的从分布方向(本demo中即Y轴方向)的起始位置,整个区域的值为1,颜色的区域值必须介于0和1之间才有效
3.如果configure.colorSize数组中的元素没有按照一定的大小顺序排列,颜色的位置就会出现错乱的现象
结语
1.关于其他解释代码中的注释也比较详细,有不懂的地方可以留言和我交流
2.Demo地址:https://github.com/TynnPassBy/TYCircleView
3.码字不易,如果帮助到你得话,请点个赞吧~
表情包.jpeg