先来展示下界面效果图:
Dashboard
相关知识点：
- 使用
CAShapeLayer结合UIBezierPath绘制特殊图层。 - 使用
CAGradientLayer渐变图层来渲染渐变的背景色。 - 使用
CGContextRef上下文对象绘制文字。 -
CAShapeLayer的anchorPoint锚点属性。 - 结合
UIView的动画效果。
思路也很简单：
- 绘制外层的环形
- 绘制刻度
- 添加渐变的背景色
- 动画
具体实现代码如下：
绘制外层的环形:
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
