iOS 动态绘制渐变色圆环

思路

  • 画静态圆的方法有很多,例如UIBezierPath或者UIBezierPath + CAShapeLayer等等,本文也会用到.
  • 动态效果即不断的更新圆环的角度(弧度),然后不断的绘制圆,达到动态效果,使用Quartz2d在drawRect中绘制
  • CGContextDrawLinearGradient画圆,参数CGGradientRef设置渐变色,startPoint和endPoint设置渐变色方向
最终效果

手动绘制

手动画圆效果图.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
  1. 绘制灰色的背景圆环
//绘制背景圆
- (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);
    
}
  1. 动态画圆
  • 利用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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249