在做Android平台开发的时候,经常会遇到安卓原生控件无法满足需求的情况,安卓允许开发者去继承已经存在的控件或者实现你自己的控件。

先来看一下效果图

android 自定义控件---圆形方向盘

 

 

采用直接集成View类,重写onDrow方法绘制。

下面附上主要代码。


1 新建一个类CircleView 继承自View

 

android 自定义控件---圆形方向盘

 

 

  1 package com.lennon.view;
  2 
  3 import android.content.Context;
  4 import android.graphics.Canvas;
  5 import android.graphics.Color;
  6 import android.graphics.Paint;
  7 import android.graphics.Path;
  8 import android.graphics.RectF;
  9 import android.util.AttributeSet;
 10 import android.view.MotionEvent;
 11 import android.view.View;
 12 /**
 13  * 自定义圆形的方向布局
 14  * 
 15  * @author 樊列龙
 16  * @since 2014-06-07
 17  */
 18 public class CircleView extends View {
 19 
 20     private int circleWidth = 100; // 圆环直径
 21     private int circleColor = Color.argb(150, 255, 0, 0);
 22     private int innerCircleColor = Color.rgb(0, 150, 0);
 23     private int backgroundColor = Color.rgb(255, 255, 255);
 24     private Paint paint = new Paint();
 25     int center = 0;
 26     int innerRadius = 0;
 27     private float innerCircleRadius = 0;
 28     private float smallCircle = 10;
 29     public Dir dir = Dir.UP;
 30 
 31     public CircleView(Context context, AttributeSet attrs) {
 32         super(context, attrs);
 33     }
 34 
 35     public CircleView(Context context) {
 36         super(context);
 37 
 38         // paint = new Paint();
 39     }
 40 
 41     public CircleView(Context context, AttributeSet attrs, int defStyle) {
 42         super(context, attrs, defStyle);
 43 
 44     }
 45 
 46     @Override
 47     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 48         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 49 
 50         int measuredHeight = measureHeight(heightMeasureSpec);
 51         int measuredWidth = measureWidth(widthMeasureSpec);
 52 
 53         setMeasuredDimension(measuredWidth, measuredHeight);
 54 
 55         center = getWidth() / 2;
 56         innerRadius = (center - circleWidth / 2 - 10);// 圆环
 57         innerCircleRadius = center / 3;
 58         this.setOnTouchListener(onTouchListener);
 59     }
 60 
 61     /**
 62      * 测量宽度
 63      * 
 64      * @param measureSpec
 65      * @return
 66      */
 67     private int measureWidth(int measureSpec) {
 68         int specMode = MeasureSpec.getMode(measureSpec);
 69         int specSize = MeasureSpec.getSize(measureSpec);
 70 
 71         int result = 0;
 72 
 73         if (specMode == MeasureSpec.AT_MOST) {
 74             result = getWidth();
 75         } else if (specMode == MeasureSpec.EXACTLY) {
 76             result = specSize;
 77         }
 78         return result;
 79     }
 80 
 81     /**
 82      * 测量高度
 83      * 
 84      * @param measureSpec
 85      * @return
 86      */
 87     private int measureHeight(int measureSpec) {
 88 
 89         int specMode = MeasureSpec.getMode(measureSpec);
 90         int specSize = MeasureSpec.getSize(measureSpec);
 91 
 92         int result = 0;
 93 
 94         if (specMode == MeasureSpec.AT_MOST) {
 95 
 96             result = specSize;
 97         } else if (specMode == MeasureSpec.EXACTLY) {
 98             result = specSize;
 99         }
100         return result;
101     }
102 
103     /**
104      * 开始绘制
105      */
106     @Override
107     protected void onDraw(Canvas canvas) {
108         super.onDraw(canvas);
109 
110         initBackGround(canvas);
111         drawDirTriangle(canvas, dir);
112 
113     }
114 
115     /**
116      * 绘制方向小箭头
117      * 
118      * @param canvas
119      */
120     private void drawDirTriangle(Canvas canvas, Dir dir) {
121         paint.setColor(innerCircleColor);
122         paint.setStrokeWidth(1);
123         paint.setStyle(Paint.Style.FILL);
124 
125         switch (dir) {
126         case UP:
127             drawUpTriangle(canvas);
128             break;
129         case DOWN:
130             drawDownTriangle(canvas);
131             break;
132         case LEFT:
133             drawLeftTriangle(canvas);
134             break;
135         case RIGHT:
136             drawRightTriangle(canvas);
137             break;
138         case CENTER:
139             invalidate();
140             break;
141         default:
142             break;
143         }
144 
145         paint.setColor(backgroundColor);
146 
147         canvas.drawCircle(center, center, smallCircle, paint);
148         // canvas.drawText(text, center, center+40, paint);
149 
150     }
151 
152     /**
153      * 绘制向右的小箭头
154      * 
155      * @param canvas
156      */
157     private void drawRightTriangle(Canvas canvas) {
158         Path path = new Path();
159         path.moveTo(center, center);
160         double sqrt2 = innerCircleRadius / Math.sqrt(2);
161         double pow05 = innerCircleRadius * Math.sqrt(2);
162         path.lineTo((float) (center + sqrt2), (float) (center - sqrt2));
163         path.lineTo((float) (center + pow05), center);
164         path.lineTo((float) (center + sqrt2), (float) (center + sqrt2));
165         canvas.drawPath(path, paint);
166         paint.setColor(backgroundColor);
167         canvas.drawLine(center, center, center + innerCircleRadius, center, paint);
168 
169         drawOnclikColor(canvas, Dir.RIGHT);
170     }
171 
172     /**
173      * 绘制想左的小箭头
174      * 
175      * @param canvas
176      */
177     private void drawLeftTriangle(Canvas canvas) {
178         Path path = new Path();
179         path.moveTo(center, center);
180         double sqrt2 = innerCircleRadius / Math.sqrt(2);
181         double pow05 = innerCircleRadius * Math.sqrt(2);
182         path.lineTo((float) (center - sqrt2), (float) (center - sqrt2));
183         path.lineTo((float) (center - pow05), center);
184         path.lineTo((float) (center - sqrt2), (float) (center + sqrt2));
185         canvas.drawPath(path, paint);
186 
187         paint.setColor(backgroundColor);
188         canvas.drawLine(center, center, center - innerCircleRadius, center, paint);
189 
190         drawOnclikColor(canvas, Dir.LEFT);
191 
192     }
193 
194     /**
195      * 绘制向下的小箭头
196      * 
197      * @param canvas
198      */
199     private void drawDownTriangle(Canvas canvas) {
200         Path path = new Path();
201         path.moveTo(center, center);
202         double sqrt2 = innerCircleRadius / Math.sqrt(2);
203         double pow05 = innerCircleRadius * Math.sqrt(2);
204         path.lineTo((float) (center - sqrt2), (float) (center + sqrt2));
205         path.lineTo(center, (float) (center + pow05));
206         path.lineTo((float) (center + sqrt2), (float) (center + sqrt2));
207         canvas.drawPath(path, paint);
208 
209         paint.setColor(backgroundColor);
210         canvas.drawLine(center, center, center, center + innerCircleRadius, paint);
211 
212         drawOnclikColor(canvas, Dir.DOWN);
213     }
214 
215     /**
216      * 点击的时候绘制黑色的扇形
217      * 
218      * @param canvas
219      * @param dir
220      */
221     private void drawOnclikColor(Canvas canvas, Dir dir) {
222         paint.setColor(Color.BLACK);
223         paint.setStyle(Paint.Style.STROKE);
224         paint.setStrokeWidth(100);
225         switch (dir) {
226         case UP:
227             canvas.drawArc(new RectF(center - innerRadius, center - innerRadius, center + innerRadius, center
228                     + innerRadius), 225, 90, false, paint);
229             break;
230         case DOWN:
231             canvas.drawArc(new RectF(center - innerRadius, center - innerRadius, center + innerRadius, center
232                     + innerRadius), 45, 90, false, paint);
233             break;
234         case LEFT:
235             canvas.drawArc(new RectF(center - innerRadius, center - innerRadius, center + innerRadius, center
236                     + innerRadius), 135, 90, false, paint);
237             break;
238         case RIGHT:
239             canvas.drawArc(new RectF(center - innerRadius, center - innerRadius, center + innerRadius, center
240                     + innerRadius), -45, 90, false, paint);
241             break;
242 
243         default:
244             break;
245         }
246 
247         paint.setStyle(Paint.Style.FILL);
248     }
249 
250     /**
251      * 绘制像向上的箭头
252      * 
253      * @param canvas
254      */
255     private void drawUpTriangle(Canvas canvas) {
256         Path path = new Path();
257         path.moveTo(center, center);
258         double sqrt2 = innerCircleRadius / Math.sqrt(2);
259         double pow05 = innerCircleRadius * Math.sqrt(2);
260 
261         path.lineTo((float) (center - sqrt2), (float) (center - sqrt2));
262         path.lineTo(center, (float) (center - pow05));
263         path.lineTo((float) (center + sqrt2), (float) (center - sqrt2));
264         canvas.drawPath(path, paint);
265 
266         paint.setColor(backgroundColor);
267         canvas.drawLine(center, center, center, center - innerCircleRadius, paint);
268 
269         drawOnclikColor(canvas, Dir.UP);
270     }
271 
272     /**
273      * 绘制基本的背景, 这包括了三个步骤:1.清空画布 2.绘制外圈的圆 3.绘制内圈的圆
274      * 
275      * @param canvas
276      */
277     private void initBackGround(Canvas canvas) {
278         clearCanvas(canvas);
279         drawBackCircle(canvas);
280         drawInnerCircle(canvas);
281 
282     }
283 
284     /**
285      * 绘制中心白色小圆
286      * 
287      * @param canvas
288      */
289     private void drawInnerCircle(Canvas canvas) {
290         paint.setColor(innerCircleColor);
291         paint.setStyle(Paint.Style.FILL);
292         paint.setStrokeWidth(1);
293         canvas.drawCircle(center, center, innerCircleRadius, paint);
294     }
295 
296     /**
297      * 绘制背景的圆圈和隔线
298      * 
299      * @param canvas
300      */
301     private void drawBackCircle(Canvas canvas) {
302         paint.setColor(circleColor);
303         paint.setStrokeWidth(circleWidth);
304         paint.setAntiAlias(true);
305         paint.setStyle(Paint.Style.STROKE);
306         canvas.drawCircle(center, center, innerRadius, paint); // 绘制圆圈
307 
308         paint.setColor(backgroundColor);
309         paint.setStyle(Paint.Style.FILL);
310         paint.setStrokeWidth(4);
311         canvas.drawLine(center, center, 0, 0, paint);
312         canvas.drawLine(center, center, center * 2, 0, paint);
313         canvas.drawLine(center, center, 0, center * 2, paint);
314         canvas.drawLine(center, center, center * 2, center * 2, paint);
315 
316     }
317 
318     /**
319      * 清空画布
320      * 
321      * @param canvas
322      */
323     private void clearCanvas(Canvas canvas) {
324         canvas.drawColor(backgroundColor);
325     }
326 
327     OnTouchListener onTouchListener = new OnTouchListener() {
328 
329         @Override
330         public boolean onTouch(View view, MotionEvent event) {
331             Dir tmp = Dir.UNDEFINE;
332             if ((tmp = checkDir(event.getX(), event.getY())) != Dir.UNDEFINE) {
333                 dir = tmp;
334                 invalidate();
335             }
336             return true;
337         }
338 
339         /**
340          * 检测方向
341          * 
342          * @param x
343          * @param y
344          * @return
345          */
346         private Dir checkDir(float x, float y) {
347             Dir dir = Dir.UNDEFINE;
348 
349             if (Math.sqrt(Math.pow(y - center, 2) + Math.pow(x - center, 2)) < innerCircleRadius) {// 判断在中心圆圈内
350                 dir = Dir.CENTER;
351                 System.out.println("----中央");
352             } else if (y < x && y + x < 2 * center) {
353                 dir = Dir.UP;
354                 System.out.println("----向上");
355             } else if (y < x && y + x > 2 * center) {
356                 dir = Dir.RIGHT;
357                 System.out.println("----向右");
358             } else if (y > x && y + x < 2 * center) {
359                 dir = Dir.LEFT;
360                 System.out.println("----向左");
361             } else if (y > x && y + x > 2 * center) {
362                 dir = Dir.DOWN;
363                 System.out.println("----向下");
364             }
365 
366             return dir;
367         }
368 
369     };
370 
371     /**
372      * 关于方向的枚举
373      * 
374      * @author Administrator
375      * 
376      */
377     public enum Dir {
378         UP, DOWN, LEFT, RIGHT, CENTER, UNDEFINE
379     }
380 
381 }
View Code

相关文章: