使用CALayer绘制类似于仪表盘效果

先来展示下界面效果图:

Dashboard

相关知识点：

• 使用CAShapeLayer 结合 UIBezierPath绘制特殊图层。
• 使用CAGradientLayer渐变图层来渲染渐变的背景色。
• 使用CGContextRef 上下文对象绘制文字。
• CAShapeLayer的anchorPoint锚点属性。
• 结合UIView的动画效果。

---

思路也很简单：

1. 绘制外层的环形
2. 绘制刻度
3. 添加渐变的背景色
4. 动画

具体实现代码如下：
绘制外层的环形:

CGFloat startAngle = M_PI_2 + (M_PI / 4); // 开始角度
CGFloat endAngle = M_PI * 2 + (M_PI / 4); // 结束角度
BOOL clockwise = YES; // 顺时针
 // 环形Layer层
CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.lineWidth = self.ringWidth;
circleLayer.lineCap = kCALineCapRound;
circleLayer.lineJoin = kCALineJoinRound;
circleLayer.fillColor = [UIColor clearColor].CGColor; // 填充颜色
circleLayer.strokeColor = [UIColor whiteColor].CGColor; // 笔画颜色
circleLayer.shadowColor = [UIColor yellowColor].CGColor; // 阴影颜色
circleLayer.shadowOffset = CGSizeMake(1, 1); // 阴影偏移量
circleLayer.shadowOpacity = 0.5; // 阴影的不透明度
circleLayer.shadowRadius = 5; // 用于渲染图层阴影的模糊半径
// path
UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:_center radius:_radius startAngle:startAngle endAngle:endAngle clockwise:clockwise];
circleLayer.path = circlePath.CGPath;

添加刻度线, 提取出方法，根据index绘制对应的刻度线：

- (void)containerLayer:(CALayer *)containerLayer addDialWithIndex:(NSInteger)index {
    CAShapeLayer *dialItemLayer = [CAShapeLayer layer]; // 刻度层
    dialItemLayer.lineWidth = 1;
    dialItemLayer.lineCap = kCALineCapSquare;
    dialItemLayer.lineJoin = kCALineJoinRound;
    dialItemLayer.strokeColor = [UIColor greenColor].CGColor;
    dialItemLayer.fillColor = [UIColor clearColor].CGColor;

    // path
    UIBezierPath *path = [UIBezierPath bezierPath];
    CGFloat outsideRadius = _radius - self.ringWidth / 2; // 刻度 外点半径
    CGFloat insideRadius = outsideRadius - self.dialLength; // 刻度 内点半径

    if (index % self.dialPieceCount == 0) { // 在特殊角度时将刻度线画长一点，利于分辨。
        dialItemLayer.strokeColor = [UIColor redColor].CGColor;
        insideRadius -= 5;
    }

    CGFloat angle = M_PI_2 + M_PI / 4 - index * (M_PI_2 + M_PI/4) *2 / _dialCount;// 角度
    CGPoint insidePoint = CGPointMake(_center.x - (insideRadius * sin(angle)), _center.y - (insideRadius * cos(angle)));// 刻度内点
    CGPoint outsidePoint = CGPointMake(_center.x - (outsideRadius * sin(angle)), _center.y - (outsideRadius * cos(angle)));// 刻度外点

    [path moveToPoint:insidePoint];
    [path addLineToPoint:outsidePoint];

    dialItemLayer.path = path.CGPath;
    [containerLayer addSublayer:dialItemLayer];
}

添加渐变的背景色, 为了能让环形和刻度线的背景颜色融合在一起，使用一个CALayer图层containerLayer，将环形图层和所有的刻度线图层都添加到containerLayer图层中，再设置为gradientLayer的遮罩。

// 渐变层
CALayer *gradientLayer = [CALayer new];// 渐变层的组合
// 生成左边渐变色
CAGradientLayer *leftLayer = [CAGradientLayer layer];
leftLayer.frame = CGRectMake(0, 0, self.bounds.size.width/2, self.bounds.size.height);
leftLayer.colors = @[(id)[UIColor yellowColor].CGColor, (id)[UIColor greenColor].CGColor];
[gradientLayer addSublayer:leftLayer];
// 生成右边渐变色
CAGradientLayer *rightLayer = [CAGradientLayer layer];
rightLayer.frame = CGRectMake(self.bounds.size.width / 2, 0, self.bounds.size.width / 2, self.bounds.size.height);
rightLayer.colors = @[(id)[UIColor yellowColor].CGColor, (id)[UIColor redColor].CGColor];
[gradientLayer addSublayer:rightLayer];
// 添加遮罩层
[gradientLayer setMask:containerLayer];
[self.layer addSublayer:gradientLayer];

为了让中间的指针图像不是按照中心点来旋转，需要设置它的锚点。

  _pointerView.layer.anchorPoint = CGPointMake(0.5f, 0.9f); // 锚点

最后使用UIView的动画效果:

- (void)animateWithProgress:(CGFloat)progress {
    CGFloat angle = (progress - 0.5) * DEGREES_TO_RADIANS(270);
    [UIView animateWithDuration:1 animations:^{
        self.dashboardView.pointerView.transform = CGAffineTransformMakeRotation(angle); // 旋转动画
        self.dashboardView.infoLabel.text = [NSString stringWithFormat:@"%.1f", progress * 2400];
    }];
}

Demo地址：DashboardDemo