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

先来展示下界面效果图:

Dashboard

相关知识点:

  • 使用CAShapeLayer 结合 UIBezierPath绘制特殊图层。
  • 使用CAGradientLayer渐变图层来渲染渐变的背景色。
  • 使用CGContextRef 上下文对象绘制文字。
  • CAShapeLayeranchorPoint锚点属性。
  • 结合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

推荐阅读更多精彩内容

  • 图层树 在UIKit中所有的视图都是基于UIView派生而来,UIView支持触摸时间,可以支持基于CoreGra...
    maguns阅读 445评论 1 2
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 3,697评论 4 21
  • 今天,是很意外的一天,因为我不知道走了狗屎运到底是幸运还是倒霉,是的 没有错,是狗屎运。 但是比狗屎运更让我意...
    上天的XLG阅读 17评论 0 0
  • K在灯下看书 午夜了 抬头看着玻璃窗外 对面LED显示屏是不停地换着广告 午夜了还这么忙 街道两边灯亮着 不时还传...
    Fecuay阅读 12评论 0 0
  • 折气球的小丑,给望着他的小姑娘,折了一把冲锋枪。 他穿着一身彩衣裳,挂着一脸彩妆,又红又大的笑脸,看不清他嘴角的上...
    歌德爱科技阅读 127评论 0 0