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;
3. import java.util.Random;
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;
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();
33. setContentView(new BallView(this));
34. }
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]; //定義畫筆默認顏色
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. }
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. }
73. //為畫筆設置隨機顏色
74. private void setPaintRandomColor(){
75. Random rand = new Random();
76. int randomIndex = rand.nextInt(colorArray.length);
77. paint.setColor(colorArray[randomIndex]);
78. }
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. }
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. }
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區別與應用場景。