iOS可复用控件之表盘

GitHub地址：https://github.com/runThor/HTDial

效果：

实现：

// 实际应用中，整个区域经常需要分为偏低区域、适中区域、偏高区域等不同的划分区域，要用不同的颜色标识，这里我们默认划分低、中、高三个区域，所以需要两个区域的间隔值

//  HTDialView.h

#import <UIKit/UIKit.h>

@interface HTDialView : UIView

@property (nonatomic,assign)CGFloat minValue;  // 表盘下限值

@property (nonatomic,assign)CGFloat maxValue;  // 表盘上限值

@property (nonatomic,assign)CGFloat firstSeparationValue;  // 第一个区域间隔值

@property (nonatomic,assign)CGFloat secondSeparationValue;  // 第二个区域间隔值

// 设置指针指向的值

- (void)pointValue:(CGFloat)value;

@end

//  HTDialView.m

#import "HTDialView.h"

@interface HTDialView ()

@property (nonatomic,strong)UIView *pointerView;  // 指针

@end

@implementation HTDialView

- (void)drawRect:(CGRect)rect {

    // 绘制划分区域

    [self drawAreas];

    

}

- (instancetype)initWithFrame:(CGRect)frame {

    

    if (self = [super initWithFrame:frame]) {

        // 初始化视图

        [self configViews];

        

    }

    

    return self;

}

// 初始化视图方法

- (void)configViews {

    

    // 表盘轮廓

    UIImageView *dialBgImgView = [[UIImageView alloc] initWithFrame:self.bounds];

    dialBgImgView.image = [UIImage imageNamed:@"dial_bg"];

    [self addSubview:dialBgImgView];

    

    // 初始化指针

    self.pointerView = [[UIView alloc]initWithFrame:CGRectMake(0,0,3,80)];

    [self.pointerView setCenter:dialBgImgView.center];

    self.pointerView.backgroundColor = [UIColor yellowColor];

    self.pointerView.layer.anchorPoint = CGPointMake(0.5,0.25);  // 指针旋转的支点

    self.pointerView.layer.masksToBounds = YES;

    // 优化渲染性能

    self.pointerView.layer.shouldRasterize = YES;  

    self.pointerView.layer.rasterizationScale = [UIScreen mainScreen].scale;

    [self addSubview:self.pointerView];

}

// 绘制划分区域及颜色

- (void)drawAreas {

    

    if (self.minValue ==self.maxValue) {

        

        return;

    

    }

    

    CGContextRef contextRef =UIGraphicsGetCurrentContext();

    CGSize viewSize =self.bounds.size;

    CGPoint center =CGPointMake(viewSize.width/2, viewSize.height/2);

    CGFloat radius = viewSize.width/2;

    

    // 绘制低值区域

    CGFloat lowAreaAngle = (self.firstSeparationValue -self.minValue)/(self.maxValue -self.minValue) * (1.5 *M_PI);

    

    CGContextBeginPath(contextRef);

    CGContextMoveToPoint(contextRef, center.x, center.y);

    CGContextAddArc(contextRef, center.x, center.y, radius,M_PI_2,M_PI_2 + lowAreaAngle,0);

    CGContextSetFillColorWithColor(contextRef, [UIColor colorWithRed:0/255.0 green:102.0/255.0 blue:255.0/255.0 alpha:1.0].CGColor);

    CGContextFillPath(contextRef);

    

    // 绘制中值区域

    CGFloat middleAreaAngle = (self.secondSeparationValue -self.firstSeparationValue)/(self.maxValue -self.minValue) * (1.5 *M_PI);

    

    CGContextBeginPath(contextRef);

    CGContextMoveToPoint(contextRef, center.x, center.y);

    CGContextAddArc(contextRef, center.x, center.y, radius,M_PI_2 + lowAreaAngle, M_PI_2 + lowAreaAngle + middleAreaAngle,0);

    CGContextSetFillColorWithColor(contextRef, [UIColor colorWithRed:13/255.0 green:142/255.0 blue:0/255.0 alpha:1.0].CGColor);

    CGContextFillPath(contextRef);

    

    // 绘制高值区域

    CGContextBeginPath(contextRef);

    CGContextMoveToPoint(contextRef, center.x, center.y);

    CGContextAddArc(contextRef, center.x, center.y, radius,M_PI_2 + lowAreaAngle + middleAreaAngle,M_PI *2,0);

    CGContextSetFillColorWithColor(contextRef, [UIColor colorWithRed:250/255.0 green:47/255.0 blue:47/255.0 alpha:1.0].CGColor);

    CGContextFillPath(contextRef);

    

    // 绘制遮罩圆，只展示环形区域

    CGContextBeginPath(contextRef);

    CGContextMoveToPoint(contextRef, center.x, center.y);

    CGContextAddArc(contextRef, center.x, center.y, radius *0.8,0,M_PI *2,0);

    CGContextSetFillColorWithColor(contextRef,self.backgroundColor.CGColor);

    CGContextFillPath(contextRef);

    

}

// 设置指针指向的值

- (void)pointValue:(CGFloat)value {

    

    if (self.minValue ==self.maxValue || value <self.minValue || value >self.maxValue) {

        

        return;

        

    }

    

    // 指针旋转动画

    [UIView animateWithDuration:1.0 animations:^{

        

        CGFloat angle = ((value -self.minValue)/(self.maxValue -self.minValue)) * (M_PI *1.5);

        

        if (angle >M_PI) {

            

            // 旋转角度大于180度，需要分两步旋转，否则会逆向旋转

            self.pointerView.transform =CGAffineTransformMakeRotation(M_PI);

            self.pointerView.transform =CGAffineTransformMakeRotation(angle);

            

        } else {

            

            // 旋转角度小于等于180度，旋转一次即可

            self.pointerView.transform =CGAffineTransformMakeRotation(angle);

        }

    }];

}

使用：

//  ViewController.m

#import "ViewController.h"

#import "HTDialView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    

    self.view.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1];

    

    HTDialView *dialView = [[HTDialView alloc] initWithFrame:CGRectMake(0,0, 200,200)];

    dialView.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1];

    [dialView setCenter:CGPointMake([UIScreen mainScreen].bounds.size.width/2, [UIScreen mainScreen].bounds.size.height/2)];

    dialView.minValue =0;  // 下限

    dialView.maxValue =100;  // 上限

    dialView.firstSeparationValue =30;  // 第一间隔值

    dialView.secondSeparationValue =60;  // 第二间隔值

    [dialView pointValue:50];  // 指针指向50

    [self.view addSubview:dialView];

}