今天给大家带来一个自定义的仪表盘，效果图如下。
demo中用到了 quartzcore类 首先继承一个uiview。
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// 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上下文，就是相当于获取一个画布。然后就可以在上面通过三角函数的计算，画出背景图片，和上面的刻度线了。
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 |
// 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的下载地址：gaugedemo.rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：http://blog.csdn.net/toss156/article/details/7407770
如果您对该产品感兴趣，请填写办理（客服微信：xiaoxiongyidong）
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。