IOS自定義儀表盤

時間  2019-12-02
標籤 ios 自定義 儀表盤 欄目 iOS 简体版
原文   原文鏈接
2016軟考項目經理實戰班      學院週年禮-頂尖課程鉅惠呈現      Hadoop英雄會—暨Hadoop 10週年生日大趴      【博客專家】有獎試讀—Windows PowerShell實戰指南
 
 

[置頂] 【IOS】IOS上實現的自定義儀表盤(能夠用在流量監控之類的應用上)

標籤： iosdistanceanimationuiviewinterfacequartz
2012-03-29 16:54 8583人閱讀 評論(17) 收藏 舉報
 分類：

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。ios

 

 【原創做品， 歡迎轉載，轉載請在明顯處註明！ 謝謝。app

 

 

 

 

 

 

 

 

 

 

              原文地址：http://blog.csdn.net/toss156/article/details/7407770】框架

今天給你們帶來一個自定義的儀表盤，效果圖以下。iview

 

 Demo中用到了 QuartzCore類 首先繼承一個UIView。函數

 

[cpp]  view plain  copy
 
  1. <span style="font-size:10px;">//  
  2. //  Gauge.h  
  3. //  GaugeDemo  
  4. //  
  5. //  Created by 海鋒 周 on 12-3-27.  
  6. //  Copyright (c) 2012年 CJLU rights reserved.  
  7. //  
  8.   
  9. #import <UIKit/UIKit.h>  
  10. #import <QuartzCore/QuartzCore.h>  
  11.   
  12. @interface Gauge : UIView  
  13. {  
  14.     UIImage *gaugeView;  
  15.     UIImageView *pointer;  
  16.       
  17.     CGFloat maxNum;  
  18.     CGFloat minNum;  
  19.       
  20.     CGFloat maxAngle;  
  21.     CGFloat minAngle;  
  22.       
  23.     CGFloat gaugeValue;  
  24.     CGFloat gaugeAngle;  
  25.       
  26.     CGFloat angleperValue;  
  27.     CGFloat scoleNum;  
  28.       
  29.     NSMutableArray *labelArray;  
  30.     CGContextRef context;  
  31. }  
  32.   
  33. @property (nonatomic,retain) UIImage *gaugeView;  
  34. @property (nonatomic,retain) UIImageView *pointer;  
  35. @property (nonatomic,retain) NSMutableArray *labelArray;  
  36. @property (nonatomic) CGContextRef context;  
  37. -(void)setGaugeValue:(CGFloat)value animation:(BOOL)isAnim;  
  38.   
  39. @end</span><span style="font-size: 14px;">  
  40. </span>  

 

 

        指針的旋轉是經過QuartzCore.framework中的CATransform3DRotate 來實現的，因此必定要記得把框架添加進來。固然在旋轉以前，咱們還須要把指針的中心pointer.layer.anchorPoint 移動到你須要的轉動中心。

       在設置旋轉動畫的時候，咱們用的不是CABaseAnimiation 而是用  CAKeyframeAnimation。這是由於若是使用中的 toValue 來實現旋轉的話，它默認是以最小的旋轉的，若是要實現控制旋轉的方向的話，咱們就只能用關鍵幀來設置旋轉的路徑。用關鍵幀的好處還有一個，就是能夠給指針添加，旋轉到指定位置之後的左右擺動的效果。oop

繪製儀表盤是經過Quartz2D來實現的，首先咱們須要用UIGraphicsGetCurrentContext函數來獲取一個Context上下文，就是至關於獲取一個畫布。而後就能夠在上面經過三角函數的計算，畫出背景圖片，和上面的刻度線了。post
[cpp]  view plain  copy
 
  1. //  
  2. //  Gauge.m  
  3. //  GaugeDemo  
  4. //  
  5. //  Created by 海鋒 周 on 12-3-27.  
  6. //  Copyright (c) 2012年 CJLU. All rights reserved.  
  7. //  
  8.   
  9. #import "Gauge.h"  
  10. #import <QuartzCore/QuartzCore.h>  
  11.   
  12. #define MAXOFFSETANGLE 120.0f  
  13. #define POINTEROFFSET  90.0f  
  14. #define MAXVALUE       120.0f  
  15. #define CELLMARKNUM    5  
  16. #define CELLNUM        12  
  17. #define GAUGESTRING    @"單位:Km/h"  
  18. #define DEFLUATSIZE    300          
  19. /************************************************ 
  20.     儀表盤的大小不建議設置的過小。 
  21.     長寬都是300是最適合的 
  22.     若是要更小的須要自行修改刻度長度和文字大小 
  23.                             ---powered by 周海鋒 
  24.                                 2012-3-29 
  25.  ***********************************************/  
  26.   
  27.   
  28. @implementation Gauge  
  29.   
  30. @interface Gauge (private)  
  31. - (CGFloat) parseToX:(CGFloat) radius Angle:(CGFloat)angle;  
  32. - (CGFloat) parseToY:(CGFloat) radius Angle:(CGFloat)angle;  
  33. - (CGFloat) transToRadian:(CGFloat)angel;  
  34. - (CGFloat) parseToAngle:(CGFloat) val;  
  35. - (CGFloat) parseToValue:(CGFloat) val;  
  36. - (void)setTextLabel:(NSInteger)labelNum;  
  37. - (void)setLineMark:(NSInteger)labelNum;  
  38. - (void) pointToAngle:(CGFloat) angle Duration:(CGFloat) duration;  
  39. @end  
  40.   
  41. @synthesize gaugeView,pointer,context;  
  42. @synthesize labelArray;  
  43.   
  44. - (id)initWithFrame:(CGRect)frame  
  45. {  
  46.     self = [super initWithFrame:frame];  
  47.     if (self) {  
  48.         //設置背景透明  
  49.         [self setBackgroundColor:[UIColor clearColor]];  
  50.           
  51.         scoleNum = DEFLUATSIZE/frame.size.width;  
  52.         maxNum = MAXVALUE;  
  53.         minNum = 0.0f;  
  54.         minAngle = -MAXOFFSETANGLE;  
  55.         maxAngle = MAXOFFSETANGLE;  
  56.         gaugeValue = 0.0f;  
  57.         gaugeAngle = -MAXOFFSETANGLE;  
  58.         angleperValue = (maxAngle - minAngle)/(maxNum - minNum);  
  59.           
  60.         gaugeView= [UIImage imageNamed:@"gaugeback.png"];  
  61.         //添加指針  
  62.         UIImage *_pointer = [UIImage imageNamed:@"pointer2.png"];  
  63.         pointer = [[UIImageView alloc] initWithImage:_pointer];  
  64.         pointer.layer.anchorPoint = CGPointMake(0.5, 0.78);  
  65.         pointer.center = self.center;  
  66.         pointer.transform = CGAffineTransformMakeScale(scoleNum, scoleNum);  
  67.         [self addSubview:pointer];  
  68.         //設置文字標籤  
  69.         [self setTextLabel:CELLNUM];  
  70.         //設置指針到0位置  
  71.         pointer.layer.transform = CATransform3DMakeRotation([self transToRadian:-MAXOFFSETANGLE], 0, 0, 1);  
  72.     }  
  73.     return self;  
  74. }  
  75.   
  76. /* 
  77.  * setTextLabel 繪製刻度值 
  78.  * @labelNum NSInteger 刻度值的數目 
  79.  */  
  80. -(void)setTextLabel:(NSInteger)labelNum  
  81. {  
  82.      labelArray = [NSMutableArray arrayWithCapacity:labelNum];  
  83.       
  84.     CGFloat textDis = (maxNum - minNum)/labelNum;  
  85.     CGFloat angelDis = (maxAngle - minAngle)/labelNum;  
  86.     CGFloat radius = (self.center.x - 75)*scoleNum;  
  87.     CGFloat currentAngle;  
  88.     CGFloat currentText = 0.0f;  
  89.     CGPoint centerPoint = self.center;  
  90.       
  91.     for(int i=0;i<=labelNum;i++)  
  92.     {  
  93.         currentAngle = minAngle + i * angelDis - POINTEROFFSET;  
  94.         currentText = minNum + i * textDis;  
  95.         UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0 , 0 , 30, 50)];  
  96.         label.autoresizesSubviews = YES;  
  97.         label.textColor = [UIColor whiteColor];  
  98.         label.backgroundColor = [UIColor clearColor];  
  99.         //設置刻度的文字的格式  
  100.         if(i<labelNum/2){  
  101.             label.textAlignment = UITextAlignmentLeft;  
  102.         }else if (i==labelNum/2){  
  103.             label.textAlignment = UITextAlignmentCenter;  
  104.         }else{  
  105.             label.textAlignment = UITextAlignmentRight;  
  106.         }  
  107.         label.text = [NSString stringWithFormat:@"%d",(int)currentText];  
  108.         label.center = CGPointMake(centerPoint.x+[self parseToX:radius Angle:currentAngle],centerPoint.y+[self parseToY:radius Angle:currentAngle]);  
  109.           
  110.         [labelArray addObject:label];  
  111.         [self addSubview:label];          
  112.     }  
  113.     // 設置刻度表的名稱  
  114.     UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0 , 0 ,100, 40)];  
  115.     label.autoresizesSubviews = YES;  
  116.     label.textColor = [UIColor whiteColor];  
  117.     label.backgroundColor = [UIColor clearColor];  
  118.     label.textAlignment = UITextAlignmentCenter;  
  119.     label.text = GAUGESTRING;  
  120.     label.center = CGPointMake(centerPoint.x,centerPoint.y*3/2);  
  121.     [self addSubview:label];      
  122. }  
  123.   
  124. /* 
  125.  * setLineMark 繪製刻度的標記 
  126.  * @labelNum NSInteger 刻度是數目 
  127.  */  
  128. -(void)setLineMark:(NSInteger)labelNum  
  129. {  
  130.   
  131.     CGFloat angelDis = (maxAngle - minAngle)/labelNum;  
  132.     CGFloat radius = self.center.x;  
  133.     CGFloat currentAngle;  
  134.     CGPoint centerPoint = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);  
  135.       
  136.     for(int i=0;i<=labelNum;i++)  
  137.     {  
  138.         currentAngle = minAngle + i * angelDis - POINTEROFFSET;  
  139.         //給刻度標記繪製不一樣的顏色  
  140.         if(i>labelNum*2/3)  
  141.         {  
  142.             CGContextSetStrokeColorWithColor(context, [[UIColor colorWithRed:1 green:0 blue:0 alpha:0.8] CGColor]);  
  143.         }else if(i>labelNum*1/3){  
  144.             CGContextSetStrokeColorWithColor(context, [[UIColor colorWithRed:1 green:1 blue:0 alpha:0.8] CGColor]);  
  145.         }else{  
  146.             CGContextSetStrokeColorWithColor(context, [[UIColor colorWithRed:0 green:1 blue:0 alpha:0.8] CGColor]);  
  147.         }  
  148.         //繪製不一樣的長短的刻度  
  149.         if(i%5==0)  
  150.         {       
  151.             CGContextSetLineCap(context, kCGLineCapSquare);  
  152.             CGContextSetLineWidth(context, 3);  
  153.             CGContextStrokePath(context);     
  154.             CGContextMoveToPoint(context,centerPoint.x+[self parseToX:radius-25*scoleNum Angle:currentAngle], centerPoint.y+[self parseToY:radius-25*scoleNum Angle:currentAngle]);  
  155.             CGContextAddLineToPoint(context,centerPoint.x+[self parseToX:radius-65*scoleNum Angle:currentAngle], centerPoint.y+[self parseToY:radius-65*scoleNum Angle:currentAngle]);  
  156.         }else{  
  157.             CGContextSetLineWidth(context, 2);  
  158.             CGContextSetLineCap(context, kCGLineCapSquare);  
  159.             CGContextStrokePath(context);   
  160.             CGContextMoveToPoint(context,centerPoint.x+[self parseToX:radius-25*scoleNum Angle:currentAngle], centerPoint.y+[self parseToY:radius-25*scoleNum Angle:currentAngle]);  
  161.             CGContextAddLineToPoint(context,centerPoint.x+[self parseToX:radius-40*scoleNum Angle:currentAngle], centerPoint.y+[self parseToY:radius-40*scoleNum Angle:currentAngle]);     
  162.         }  
  163.     }  
  164. }  
  165.   
  166. /* 
  167.  * setGaugeValue 移動到某個數值 
  168.  * @value CGFloat 移動到的數值 
  169.  * @isAnim BOOL   是否執行動畫 
  170.  */  
  171. -(void)setGaugeValue:(CGFloat)value animation:(BOOL)isAnim  
  172. {  
  173.     CGFloat tempAngle = [self parseToAngle:value];  
  174.     gaugeValue = value;  
  175.     //設置轉動時間和轉動動畫  
  176.     if(isAnim){  
  177.         [self pointToAngle:tempAngle Duration:0.6f];  
  178.     }else  
  179.     {  
  180.         [self pointToAngle:tempAngle Duration:0.0f];  
  181.     }  
  182. }  
  183.   
  184. /* 
  185.  * pointToAngle 按角度旋轉 
  186.  * @angel CGFloat 角度 
  187.  * @duration CGFloat 動畫執行時間 
  188.  */  
  189. - (void) pointToAngle:(CGFloat) angle Duration:(CGFloat) duration  
  190. {  
  191.     CAKeyframeAnimation *anim=[CAKeyframeAnimation animationWithKeyPath:@"transform"];   
  192.     NSMutableArray *values=[NSMutableArray array];   
  193.     anim.duration = duration;  
  194.     anim.autoreverses = NO;  
  195.     anim.fillMode = kCAFillModeForwards;  
  196.     anim.removedOnCompletion= NO;  
  197.       
  198.     CGFloat distance = angle/10;  
  199.     //設置轉動路徑，不能直接用 CABaseAnimation 的toValue，那樣是按最短路徑的，轉動超過180度時沒法控制方向  
  200.     int i = 1;  
  201.     for(;i<=10;i++){  
  202.         [values addObject:[NSValue valueWithCATransform3D:CATransform3DRotate(CATransform3DIdentity, [self transToRadian:(gaugeAngle+distance*i)], 0, 0, 1)]];  
  203.         }  
  204.     //添加緩動效果  
  205.      [values addObject:[NSValue valueWithCATransform3D:CATransform3DRotate(CATransform3DIdentity, [self transToRadian:(gaugeAngle+distance*(i))], 0, 0, 1)]];  
  206.      [values addObject:[NSValue valueWithCATransform3D:CATransform3DRotate(CATransform3DIdentity, [self transToRadian:(gaugeAngle+distance*(i-2))], 0, 0, 1)]];       
  207.      [values addObject:[NSValue valueWithCATransform3D:CATransform3DRotate(CATransform3DIdentity, [self transToRadian:(gaugeAngle+distance*(i-1))], 0, 0, 1)]];  
  208.                                                                              
  209.     anim.values=values; ;  
  210.     [pointer.layer addAnimation:anim forKey:@"cubeIn"];  
  211.       
  212.     gaugeAngle = gaugeAngle+angle;  
  213.       
  214. }  
  215.   
  216. /* 
  217.  * parseToX 角度轉弧度 
  218.  * @angel CGFloat 角度 
  219.  */  
  220. -(CGFloat)transToRadian:(CGFloat)angel  
  221. {  
  222.     return angel*M_PI/180;  
  223. }  
  224.   
  225.   
  226. /* 
  227.  * parseToX 根據角度，半徑計算X座標 
  228.  * @radius CGFloat 半徑   
  229.  * @angle  CGFloat 角度 
  230.  */  
  231. - (CGFloat) parseToX:(CGFloat) radius Angle:(CGFloat)angle  
  232. {  
  233.     CGFloat tempRadian = [self transToRadian:angle];  
  234.     return radius*cos(tempRadian);  
  235. }  
  236.   
  237. /* 
  238.  * parseToY 根據角度，半徑計算Y座標 
  239.  * @radius CGFloat 半徑   
  240.  * @angle  CGFloat 角度 
  241.  */  
  242. - (CGFloat) parseToY:(CGFloat) radius Angle:(CGFloat)angle  
  243. {  
  244.     CGFloat tempRadian = [self transToRadian:angle];  
  245.     return radius*sin(tempRadian);  
  246. }  
  247.   
  248. /* 
  249.  * parseToAngle 根據數據計算須要轉動的角度 
  250.  * @val CGFloat 要移動到的數值 
  251.  */  
  252. -(CGFloat) parseToAngle:(CGFloat) val  
  253. {  
  254.     //異常的數據  
  255.     if(val<minNum){  
  256.         return minNum;  
  257.     }else if(val>maxNum){  
  258.         return maxNum;  
  259.     }  
  260.     CGFloat temp =(val-gaugeValue)*angleperValue;  
  261.     return temp;  
  262. }  
  263.   
  264. /* 
  265.  * parseToValue 根據角度計算數值 
  266.  * @val CGFloat 要移動到的角度 
  267.  */  
  268. -(CGFloat) parseToValue:(CGFloat) val  
  269. {  
  270.     CGFloat temp=val/angleperValue;  
  271.     CGFloat temp2=maxNum/2+temp;  
  272.     if(temp2>maxNum){  
  273.         return maxNum;  
  274.     }else if(temp2<maxNum){  
  275.         return maxNum;  
  276.     }  
  277.     return temp2;  
  278. }  
  279.   
  280. - (void)drawRect:(CGRect)rect   
  281. {  
  282.     //獲取上下文  
  283.     context = UIGraphicsGetCurrentContext();  
  284.     //設置背景透明  
  285.     CGContextSetFillColorWithColor(context,self.backgroundColor.CGColor);  
  286.     CGContextFillRect(context, rect);  
  287.     //繪製儀表背景      
  288.     [[self gaugeView ]drawInRect:self.bounds];  
  289.     //繪製刻度  
  290.     [self setLineMark:CELLNUM*CELLMARKNUM];  
  291.           
  292.     CGContextStrokePath(context);  
  293. }  
  294.   
  295. @end  

Demo的下載地址：http://download.csdn.net/detail/toss156/4183721
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程