Android應用實例之跟隨手指的小球——自定義View應用

實現的功能：手指在屏幕上滑動，變幻顏色的小球始終跟隨手指移動。

實現的思路：1）自定義View，在onDraw中畫圓作為小球；2）重寫自定義View的onTouchEvent方法，記錄觸屏坐標，用新的坐標重新繪制小球。

關鍵技術點：自定義View應用、觸摸事件處理、canvas繪圖、Paint應用

第一步：新建一個工程，命名為BallViewDemo，Activity命名為BallActivity。

第二步：編寫自定義View類BallView，本例中將BallView作為BallActivity的內部類，BallActivity代碼如下：

1. package com.zyg.customview.ball;  
2.   
3. import java.util.Random;  
4.   
5. import Android.app.Activity;  
6. import android.content.Context;  
7. import android.graphics.Canvas;  
8. import android.graphics.Color;  
9. import android.graphics.Paint;  
10. import android.os.Bundle;  
11. import android.view.Display;  
12. import android.view.MotionEvent;  
13. import android.view.View;  
14. import android.view.Window;  
15. import android.view.WindowManager;  
16.   
17. public class BallActivity extends Activity {  
18.     private int screenW;        //屏幕寬度   
19.     private int screenH;        //屏幕高度   
20.     @Override  
21.     public void onCreate(Bundle savedInstanceState) {  
22.         super.onCreate(savedInstanceState);  
23.         Display dis = this.getWindowManager().getDefaultDisplay();  
24.         // 設置全屏   
25.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
26.         this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,  
27.                 WindowManager.LayoutParams.FLAG_FULLSCREEN);  
28.         // 獲取屏幕寬度   
29.         screenW = dis.getWidth();  
30.         // 獲取屏幕高度   
31.         screenH = dis.getHeight();  
32.           
33.         setContentView(new BallView(this));  
34.     }  
35.       
36.     //自定義繪圖類   
37.     class BallView extends View{  
38.         private Paint paint;        //定義畫筆   
39.         private float cx = 50;      //圓點默認X坐標   
40.         private float cy = 50;      //圓點默認Y坐標   
41.         private int radius = 20;  
42.         //定義顏色數組   
43.         private int colorArray[] = {Color.BLACK,Color.BLACK,Color.GREEN,Color.YELLOW, Color.RED};  
44.         private int paintColor = colorArray[0]; //定義畫筆默認顏色   
45.           
46.         public BallView(Context context) {  
47.             super(context);  
48.             //初始化畫筆   
49.             initPaint();  
50.         }  
51.         private void initPaint(){  
52.             paint = new Paint();  
53.             //設置消除鋸齒   
54.             paint.setAntiAlias(true);  
55.             //設置畫筆顏色   
56.             paint.setColor(paintColor);  
57.         }  
58.           
59.         //重寫onDraw方法實現繪圖操作   
60.         @Override  
61.         protected void onDraw(Canvas canvas) {  
62.             super.onDraw(canvas);  
63.             //將屏幕設置為白色   
64.             canvas.drawColor(Color.WHITE);  
65.             //修正圓點坐標   
66.             revise();  
67.             //隨機設置畫筆顏色   
68.             setPaintRandomColor();  
69.             //繪制小圓作為小球   
70.             canvas.drawCircle(cx, cy, radius, paint);  
71.         }  
72.           
73.         //為畫筆設置隨機顏色   
74.         private void setPaintRandomColor(){  
75.             Random rand = new Random();  
76.             int randomIndex = rand.nextInt(colorArray.length);  
77.             paint.setColor(colorArray[randomIndex]);  
78.         }  
79.           
80.         //修正圓點坐標   
81.         private void revise(){  
82.             if(cx <= radius){  
83.                 cx = radius;  
84.             }else if(cx >= (screenW-radius)){  
85.                 cx = screenW-radius;  
86.             }  
87.             if(cy <= radius){  
88.                 cy = radius;  
89.             }else if(cy >= (screenH-radius)){  
90.                 cy = screenH-radius;  
91.             }  
92.         }  
93.           
94.         @Override  
95.         public boolean onTouchEvent(MotionEvent event) {  
96.             switch (event.getAction()) {  
97.             case MotionEvent.ACTION_DOWN:  
98.                 // 按下   
99.                 cx = (int) event.getX();  
100.                 cy = (int) event.getY();  
101.                 // 通知重繪   
102.                 postInvalidate();   //該方法會調用onDraw方法，重新繪圖   
103.                 break;  
104.             case MotionEvent.ACTION_MOVE:  
105.                 // 移動   
106.                 cx = (int) event.getX();  
107.                 cy = (int) event.getY();  
108.                 // 通知重繪   
109.                 postInvalidate();  
110.                 break;  
111.             case MotionEvent.ACTION_UP:  
112.                 // 抬起   
113.                 cx = (int) event.getX();  
114.                 cy = (int) event.getY();  
115.                 // 通知重繪   
116.                 postInvalidate();  
117.                 break;  
118.             }  
119.               
120.             /* 
121.              * 備注1：此處一定要將return super.onTouchEvent(event)修改為return true，原因是： 
122.              * 1）父類的onTouchEvent(event)方法可能沒有做任何處理，但是返回了false。 
123.              * 2)一旦返回false，在該方法中再也不會收到MotionEvent.ACTION_MOVE及MotionEvent.ACTION_UP事件。 
124.              */  
125.             //return super.onTouchEvent(event);   
126.             return true;    
127.         }  
128.     }  
129. }  

main.xml與AndroidManifest.xml未作修改，不再貼出~

備注：代碼中的備注1介紹���onTouchEvent方法在實際開發中的一個Bug的解決方法，詳見代碼。

第三步：運行程序，效果如下：

下一篇將用自定義SurfaceView代替自定義View實現該實例功能（http://www.linuxidc.com/Linux/2011-10/44495.htm），並總結一下自定義View與自定義SurfaceView區別與應用場景。