今天给大家带来一个自定义的仪表盘，效果图如下。
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
|