【IOS】IOS上实现的自定义仪表盘(可以用在流量监控之类的应用上)

最新推荐文章于 2022-11-08 15:12:25 发布
最新推荐文章于 2022-11-08 15:12:25 发布
阅读量70 收藏
点赞数

【原创作品， 欢迎转载，转载请在明显处注明！ 谢谢。

原文地址：http://blog.youkuaiyun.com/toss156/article/details/7407770】


今天给大家带来一个自定义的仪表盘，效果图如下。

Demo中用到了 QuartzCore类首先继承一个UIView。

//
//  Gauge.h
//  GaugeDemo
//
//  Created by 海锋 周 on 12-3-27.
//  Copyright (c) 2012年 CJLU rights reserved.
//

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@interface Gauge : UIView
{
    UIImage *gaugeView;
    UIImageView *pointer;
    
    CGFloat maxNum;
    CGFloat minNum;
    
    CGFloat maxAngle;
    CGFloat minAngle;
    
    CGFloat gaugeValue;
    CGFloat gaugeAngle;
    
    CGFloat angleperValue;
    CGFloat scoleNum;
    
    NSMutableArray *labelArray;
    CGContextRef context;
}

@property (nonatomic,retain) UIImage *gaugeView;
@property (nonatomic,retain) UIImageView *pointer;
@property (nonatomic,retain) NSMutableArray *labelArray;
@property (nonatomic) CGContextRef context;
-(void)setGaugeValue:(CGFloat)value animation:(BOOL)isAnim;

@end


指针的旋转是通过QuartzCore.framework中的CATransform3DRotate 来实现的，所以一定要记得把框架添加进来。当然在旋转之前，我们还需要把指针的中心pointer.layer.anchorPoint 移动到你需要的转动中心。

在设置旋转动画的时候，我们用的不是CABaseAnimiation 而是用 CAKeyframeAnimation。这是因为如果使用中的 toValue 来实现旋转的话，它默认是以最小的旋转的，如果要实现控制旋转的方向的话，我们就只能用关键帧来设置旋转的路径。用关键帧的好处还有一个，就是可以给指针添加，旋转到指定位置以后的左右摆动的效果。

绘制仪表盘是通过Quartz2D来实现的，首先我们需要用UIGraphicsGetCurrentContext函数来获取一个Context上下文，就是相当于获取一个画布。然后就可以在上面通过三角函数的计算，画出背景图片，和上面的刻度线了。


 
//
//  Gauge.m
//  GaugeDemo
//
//  Created by 海锋 周 on 12-3-27.
//  Copyright (c) 2012年 CJLU. All rights reserved.
//

#import "Gauge.h"
#import <QuartzCore/QuartzCore.h>

#define MAXOFFSETANGLE 120.0f
#define POINTEROFFSET  90.0f
#define MAXVALUE       120.0f
#define CELLMARKNUM    5
#define CELLNUM        12
#define GAUGESTRING    @"单位:Km/h"
#define DEFLUATSIZE    300        
/************************************************
    仪表盘的大小不建议设置的太小。
    长宽都是300是最适合的
    如果要更小的需要自行修改刻度长度和文字大小
                            ---powered by 周海锋
                                2012-3-29
 ***********************************************/


@implementation Gauge

@interface Gauge (private)
- (CGFloat) parseToX:(CGFloat) radius Angle:(CGFloat)angle;
- (CGFloat) parseToY:(CGFloat) radius Angle:(CGFloat)angle;
- (CGFloat) transToRadian:(CGFloat)angel;
- (CGFloat) parseToAngle:(CGFloat) val;
- (CGFloat) parseToValue:(CGFloat) val;
- (void)setTextLabel:(NSInteger)labelNum;
- (void)setLineMark:(NSInteger)labelNum;
- (void) pointToAngle:(CGFloat) angle Duration:(CGFloat) duration;
@end

@synthesize gaugeView,pointer,context;
@synthesize labelArray;

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        //设置背景透明
        [self setBackgroundColor:[UIColor clearColor]];
        
        scoleNum = DEFLUATSIZE/frame.size.width;
        maxNum = MAXVALUE;
        minNum = 0.0f;
        minAngle = -MAXOFFSETANGLE;
        maxAngle = MAXOFFSETANGLE;
        gaugeValue = 0.0f;
        gaugeAngle = -MAXOFFSETANGLE;
        angleperValue = (maxAngle - minAngle)/(maxNum - minNum);
        
        gaugeView= [UIImage imageNamed:@"gaugeback.png"];
        //添加指针
        UIImage *_pointer = [UIImage imageNamed:@"pointer2.png"];
        pointer = [[UIImageView alloc] initWithImage:_pointer];
        pointer.layer.anchorPoint = CGPointMake(0.5, 0.78);
        pointer.center = self.center;
        pointer.transform = CGAffineTransformMakeScale(scoleNum, scoleNum);
        [self addSubview:pointer];
        //设置文字标签
        [self setTextLabel:CELLNUM];
        //设置指针到0位置
        pointer.layer.transform = CATransform3DMakeRotation([self transToRadian:-MAXOFFSETANGLE], 0, 0, 1);
    }
    return self;
}

/*
 * setTextLabel 绘制刻度值
 * @labelNum NSInteger 刻度值的数目
 */
-(void)setTextLabel:(NSInteger)labelNum
{
     labelArray = [NSMutableArray arrayWithCapacity:labelNum];
    
    CGFloat textDis = (maxNum - minNum)/labelNum;
    CGFloat angelDis = (maxAngle - minAngle)/labelNum;
    CGFloat radius = (self.center.x - 75)*scoleNum;
    CGFloat currentAngle;
    CGFloat currentText = 0.0f;
    CGPoint centerPoint = self.center;
    
    for(int i=0;i<=labelNum;i++)
    {
        currentAngle = minAngle + i * angelDis - POINTEROFFSET;
        currentText = minNum + i * textDis;
        UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0 , 0 , 30, 50)];
        label.autoresizesSubviews = YES;
        label.textColor = [UIColor whiteColor];
        label.backgroundColor = [UIColor clearColor];
        //设置刻度的文字的格式
        if(i<labelNum/2){
            label.textAlignment = UITextAlignmentLeft;
        }else if (i==labelNum/2){
            label.textAlignment = UITextAlignmentCenter;
        }else{
            label.textAlignment = UITextAlignmentRight;
        }
        label.text = [NSString stringWithFormat:@"%d",(int)currentText];
        label.center = CGPointMake(centerPoint.x+[self parseToX:radius Angle:currentAngle],centerPoint.y+[self parseToY:radius Angle:currentAngle]);
        
        [labelArray addObject:label];
        [self addSubview:label];        
    }
    // 设置刻度表的名称
    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0 , 0 ,100, 40)];
    label.autoresizesSubviews = YES;
    label.textColor = [UIColor whiteColor];
    label.backgroundColor = [UIColor clearColor];
    label.textAlignment = UITextAlignmentCenter;
    label.text = GAUGESTRING;
    label.center = CGPointMake(centerPoint.x,centerPoint.y*3/2);
    [self addSubview:label];    
}

/*
 * setLineMark 绘制刻度的标记
 * @labelNum NSInteger 刻度是数目
 */
-(void)setLineMark:(NSInteger)labelNum
{

    CGFloat angelDis = (maxAngle - minAngle)/labelNum;
    CGFloat radius = self.center.x;
    CGFloat currentAngle;
    CGPoint centerPoint = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);
    
    for(int i=0;i<=labelNum;i++)
    {
        currentAngle = minAngle + i * angelDis - POINTEROFFSET;
        //给刻度标记绘制不同的颜色
        if(i>labelNum*2/3)
        {
            CGContextSetStrokeColorWithColor(context, [[UIColor colorWithRed:1 green:0 blue:0 alpha:0.8] CGColor]);
        }else if(i>labelNum*1/3){
            CGContextSetStrokeColorWithColor(context, [[UIColor colorWithRed:1 green:1 blue:0 alpha:0.8] CGColor]);
        }else{
            CGContextSetStrokeColorWithColor(context, [[UIColor colorWithRed:0 green:1 blue:0 alpha:0.8] CGColor]);
        }
        //绘制不同的长短的刻度
        if(i%5==0)
        {     
            CGContextSetLineCap(context, kCGLineCapSquare);
            CGContextSetLineWidth(context, 3);
            CGContextStrokePath(context);   
            CGContextMoveToPoint(context,centerPoint.x+[self parseToX:radius-25*scoleNum Angle:currentAngle], centerPoint.y+[self parseToY:radius-25*scoleNum Angle:currentAngle]);
            CGContextAddLineToPoint(context,centerPoint.x+[self parseToX:radius-65*scoleNum Angle:currentAngle], centerPoint.y+[self parseToY:radius-65*scoleNum Angle:currentAngle]);
        }else{
            CGContextSetLineWidth(context, 2);
            CGContextSetLineCap(context, kCGLineCapSquare);
            CGContextStrokePath(context); 
            CGContextMoveToPoint(context,centerPoint.x+[self parseToX:radius-25*scoleNum Angle:currentAngle], centerPoint.y+[self parseToY:radius-25*scoleNum Angle:currentAngle]);
            CGContextAddLineToPoint(context,centerPoint.x+[self parseToX:radius-40*scoleNum Angle:currentAngle], centerPoint.y+[self parseToY:radius-40*scoleNum Angle:currentAngle]);   
        }
    }
}

/*
 * setGaugeValue 移动到某个数值
 * @value CGFloat 移动到的数值
 * @isAnim BOOL   是否执行动画
 */
-(void)setGaugeValue:(CGFloat)value animation:(BOOL)isAnim
{
    CGFloat tempAngle = [self parseToAngle:value];
    gaugeValue = value;
    //设置转动时间和转动动画
    if(isAnim){
        [self pointToAngle:tempAngle Duration:0.6f];
    }else
    {
        [self pointToAngle:tempAngle Duration:0.0f];
    }
}

/*
 * pointToAngle 按角度旋转
 * @angel CGFloat 角度
 * @duration CGFloat 动画执行时间
 */
- (void) pointToAngle:(CGFloat) angle Duration:(CGFloat) duration
{
    CAKeyframeAnimation *anim=[CAKeyframeAnimation animationWithKeyPath:@"transform"]; 
    NSMutableArray *values=[NSMutableArray array]; 
    anim.duration = duration;
    anim.autoreverses = NO;
    anim.fillMode = kCAFillModeForwards;
    anim.removedOnCompletion= NO;
    
    CGFloat distance = angle/10;
    //设置转动路径，不能直接用 CABaseAnimation 的toValue，那样是按最短路径的，转动超过180度时无法控制方向
    int i = 1;
    for(;i<=10;i++){
        [values addObject:[NSValue valueWithCATransform3D:CATransform3DRotate(CATransform3DIdentity, [self transToRadian:(gaugeAngle+distance*i)], 0, 0, 1)]];
        }
    //添加缓动效果
     [values addObject:[NSValue valueWithCATransform3D:CATransform3DRotate(CATransform3DIdentity, [self transToRadian:(gaugeAngle+distance*(i))], 0, 0, 1)]];
     [values addObject:[NSValue valueWithCATransform3D:CATransform3DRotate(CATransform3DIdentity, [self transToRadian:(gaugeAngle+distance*(i-2))], 0, 0, 1)]];     
     [values addObject:[NSValue valueWithCATransform3D:CATransform3DRotate(CATransform3DIdentity, [self transToRadian:(gaugeAngle+distance*(i-1))], 0, 0, 1)]];
                                                                           
    anim.values=values; ;
    [pointer.layer addAnimation:anim forKey:@"cubeIn"];
    
    gaugeAngle = gaugeAngle+angle;
    
}

/*
 * parseToX 角度转弧度
 * @angel CGFloat 角度
 */
-(CGFloat)transToRadian:(CGFloat)angel
{
    return angel*M_PI/180;
}


/*
 * parseToX 根据角度，半径计算X坐标
 * @radius CGFloat 半径  
 * @angle  CGFloat 角度
 */
- (CGFloat) parseToX:(CGFloat) radius Angle:(CGFloat)angle
{
    CGFloat tempRadian = [self transToRadian:angle];
    return radius*cos(tempRadian);
}

/*
 * parseToY 根据角度，半径计算Y坐标
 * @radius CGFloat 半径  
 * @angle  CGFloat 角度
 */
- (CGFloat) parseToY:(CGFloat) radius Angle:(CGFloat)angle
{
    CGFloat tempRadian = [self transToRadian:angle];
    return radius*sin(tempRadian);
}

/*
 * parseToAngle 根据数据计算需要转动的角度
 * @val CGFloat 要移动到的数值
 */
-(CGFloat) parseToAngle:(CGFloat) val
{
	//异常的数据
	if(val<minNum){
		return minNum;
	}else if(val>maxNum){
		return maxNum;
	}
	CGFloat temp =(val-gaugeValue)*angleperValue;
	return temp;
}

/*
 * parseToValue 根据角度计算数值
 * @val CGFloat 要移动到的角度
 */
-(CGFloat) parseToValue:(CGFloat) val
{
	CGFloat temp=val/angleperValue;
	CGFloat temp2=maxNum/2+temp;
	if(temp2>maxNum){
		return maxNum;
	}else if(temp2<maxNum){
		return maxNum;
	}
	return temp2;
}

- (void)drawRect:(CGRect)rect 
{
    //获取上下文
    context = UIGraphicsGetCurrentContext();
    //设置背景透明
    CGContextSetFillColorWithColor(context,self.backgroundColor.CGColor);
	CGContextFillRect(context, rect);
    //绘制仪表背景    
    [[self gaugeView ]drawInRect:self.bounds];
    //绘制刻度
    [self setLineMark:CELLNUM*CELLMARKNUM];
		
	CGContextStrokePath(context);
}

@end

Demo的下载地址：http://download.youkuaiyun.com/detail/toss156/4183721

iteye_6233
关注
局域网网络流量监控_网工必知：用于监控企业网络的10款最佳工具，拿走！不谢！...
weixin_39786617的博客
10-21 1255
这是一个信息爆炸的时代，过多无用的信息、公众号只会让我们视觉疲劳。基于这个原因，本公众号致力于为广大网工分享知识、分享招聘信息、传播有价值的信息，运行4年多以来，已慢慢成为网工圈最受信赖的公众号。了解网工、热爱网工、找工作就关注我们这一个公众号就够了~让我们每天都进步一点点！我们都知道任何一个网络管理员的最重要任务之一是监控自己企业网络或局域网。监控，可以让我们验证一下网络是否允许正常...
IOS上实现的自定义仪表盘,可以用来做流量监控之类的应用
03-29
IOS 上实现的自定义仪表盘，像车速里程表，可以用来做流量监控之类的应用
ios制作一个仪表盘
{丸の子}
04-09 1231
我们首先看一下这个速度表盘的效果： [img]http://dl2.iteye.com/upload/attachment/0129/4726/226e1e99-53d5-36b5-a38d-c61635b92e1c.gif[/img] 为了实现上述的效果，我们首当其冲的是得了解的是贝塞尔曲线，听上去好高大上的样子，接下来我先就我了解贝塞尔曲线的知识给未接触的朋友普及一下。 [code="j...
IOS上实现的自定义仪表盘示例
xqhrs232的专栏
02-26 2258
原文地址::https://www.jb51.net/article/103817.htm   相关文章 1、手把手教你玩转iOS的仪表盘----https://blog.youkuaiyun.com/darrenzzb66/article/details/52511077 2、iOS非常漂亮的全代码绘制的仪表盘----https://download.youkuaiyun.com/download/haohao...
QT控件仪表盘等.zip
03-26
它支持诸如Windows、Linux、Mac OS、Android以及iOS等多种操作系统，这使得开发人员可以在多个平台上部署他们的应用程序。QT框架之所以受到青睐，部分原因在于其使用C++编写，且拥有一个功能强大的集成开发环境QT ...
DYChart图表库：自定义动画与仪表盘配置示例
此外，从描述中可以看出，DYChart的使用非常直观，即使是初学者也可以在短时间之内掌握其基本使用方法。但其深层次的自定义和优化可能需要开发者对iOS开发和数据可视化有一定的理解。在实际应用中，开发者需要关注...
iOS图表开发利器：Charts图表库概述
- **监控仪表盘**：在需要对数据进行实时监控的应用中，如系统监控、健康应用等，利用Charts库可以创建动态的监控仪表盘。 - **交互式教学工具**：在教育类应用中，利用图表库可以创建交互式的教学内容，帮助学生更...
iOS开发——仪表盘的制作
weixin_30795127的博客
04-28 280
从事iOS开发时间也不短了，可是却没有自己的博客，实在是惭愧。自己下定决心要坚持写自己的博客，提高自己，也能跟大家有更多的交流。今天来跟大家分享一下仪表盘的制作，希望对大家有所帮助。 废话不多说直接上代码 1 //表盘支持的最小体温数值 2 static CGFloat MIN_VALUE = 34; 3 //表盘支持的最大体温数值 4 static CGFloat MA...
ios-绘制仪表盘.zip
07-11
绘制仪表盘
ios-仪表盘.zip
07-11
一个绘制的仪表盘。在实际开发中是要根据需求去自定制的，所以未进行封装，只提供一种实现思路，内部关键代码已给出注释，很简单。。
ios-仪表盘、指示器、温度计.zip
07-11
下载地址 https://github.com/wayone/Indicator
iOS非常漂亮的全代码绘制的仪表盘
07-30
iOS端非常漂亮的全代码绘制的仪表盘，提供两种显示模式。
ios-仪表盘绘图.zip
07-11
一个简单的仪表盘 大家可以拿去改造改造 感觉自己实现的比较复杂 有什么更好的办法？ gif图没截取
iOS 非常漂亮的仪表盘和温度计
撸大师的博客
07-18 431
iOS仪表盘和温度计
iOS高仿国美商城、仪表盘、卡片日记、快速拨号、换主题、3D 动画等源码
weixin_34257076的博客
03-06 285
iOS精选源码 高仿腾讯qq浏览器探索界面的 3D UI 动画AISphereView 仪表盘、指示器、温度计 react-native-diary 模仿卡片日记 ZZFLEX-界面构建从未如此简单 几行代码实现交互式push pop动画,可以随意自定义push，pop动画 iOS快速拨号功能实现代码 swift版侧边栏抽屉效...
ios 简单实现半圆形仪表盘 (进度条)
u013712343的博客
11-08 1378
ios 简单实现半圆形仪表盘 (进度条)
iOS可复用控件之表盘
zzyeeaa的博客
10-13 653
GitHub地址：https://github.com/runThor/HTDial 效果： 实现： // 实际应用中，整个区域经常需要分为偏低区域、适中区域、偏高区域等不同的划分区域，要用不同的颜色标识，这里我们默认划分低、中、高三个区域，所以需要两个区域的间隔值 //  HTDialView.h #import @interface HTD
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值