iOS 动态绘制渐变色圆环

思路

• 画静态圆的方法有不少,例如UIBezierPath或者UIBezierPath + CAShapeLayer等等,本文也会用到.

• 动态效果即不断的更新圆环的角度(弧度),而后不断的绘制圆,达到动态效果,使用Quartz2d在drawRect中绘制

• CGContextDrawLinearGradient画圆,参数CGGradientRef设置渐变色,startPoint和endPoint设置渐变色方向

• 封装到一个自定义View,快速使用(文章末尾附Demo)

最终效果

手动绘制

使用:

//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
复制代码

2. 绘制灰色的背景圆环

//绘制背景圆
- (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即表明正上方

  

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);
    
}
复制代码

4. 动态画圆

• 利用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即渐变色的终点位置

在"使用"中:

//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];
复制代码

注意:

1.configure.colorSize数组中元素个数要和configure.colorArr相等,即颜色的个数和颜色区域值要一一对应,不然最终绘制的渐变色效果可能和指望的不一样

2.configure.colorSize数组中每一个元素表明了对应颜色的从分布方向(本demo中即Y轴方向)的起始位置,整个区域的值为1,颜色的区域值必须介于0和1之间才有效

3.若是configure.colorSize数组中的元素没有按照必定的大小顺序排列,颜色的位置就会出现错乱的现象

结语

1.关于其余解释代码中的注释也比较详细,有不懂的地方能够留言和我交流

2.Demo地址:github.com/TynnPassBy/…

3.码字不易,若是帮助到你得话,请点个赞吧~