一個簡單塗鴉板的Android開發實例

       在Android上開發一些小應用既可以積累知識又可以增加樂趣，與任務式開發不同，所以想到在Android系統上實現一個簡單的塗鴉板，這是我們練手的一種好的方法。

       塗鴉板應用的代碼實現

       新建工程MyWall，修改/res/layout/main.xml文件，在裡面添加一個SurfaceView和兩個Button，用到了RelativeLayout布局，完整的main.xml文件如下：

1. <?xml version="1.0" encoding="utf-8"?> 
2.  
3. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
4. android:layout_width="fill_parent" 
5. android:layout_height="fill_parent" 
6. android:orientation="vertical" 
7. > 
8.  
9. <SurfaceView 
10. android:id="@+id/surfaceview"
11. android:layout_width="fill_parent"
12. android:layout_height="wrap_content"
13. android:layout_above="@+id/line"
14. android:layout_alignParentTop="true"
15. />
16.  
17. <LinearLayout
18. android:id="@+id/line"
19. android:layout_width="fill_parent"
20. android:layout_height="wrap_content"
21. android:layout_alignParentBottom="true"
22. >
23.  
24. <Button
25. android:id="@+id/flushbutton"
26. android:layout_width="fill_parent"
27. android:layout_height="wrap_content"
28. android:layout_weight="1"
29. android:text="清屏"
30. />
31.  
32. <Button
33. android:id="@+id/colorbutton"
34. android:layout_width="fill_parent"
35. android:layout_height="wrap_content"
36. android:layout_weight="1" 
37. android:text="顏色"
38. />
39. </LinearLayout>
40. </RelativeLayout>  

       接著，修改MyWallActivity.java文件，最主要是重寫了onTouchEvent()函數，在這個函數裡過濾出觸屏拖動事件，然後獲取其相應的坐標和畫線。完整的內容如下：

1. package com.nan.wall;      
2.      
3. import android.app.Activity;      
4. import android.app.AlertDialog;      
5. import android.app.Dialog;      
6. import android.content.DialogInterface;      
7. import android.graphics.Canvas;      
8. import android.graphics.Color;      
9. import android.graphics.Paint;      
10. import android.graphics.Rect;      
11. import android.os.Bundle;      
12. import android.view.MotionEvent;      
13. import android.view.SurfaceHolder;       
14. import android.view.SurfaceView;      
15. import android.view.View;       
16. import android.widget.Button;       
17.      
18. public class MyWallActivity extends Activity        
19. {       
20. private SurfaceView mSurfaceView = null;       
21. private SurfaceHolder mSurfaceHolder = null;       
22. private Button cleanButton = null;       
23. private Button colorButton = null;       
24.      
25. private float oldX = 0f;       
26. private float oldY = 0f;       
27.      
28. private boolean canDraw = false;      
29. private Paint mPaint = null;      
30. //用來記錄當前是哪一種顏色       
31. private int whichColor = 0;       
32.      
33. /** Called when the activity is first created. */      
34.     @Override       
35. public void onCreate(Bundle savedInstanceState)        
36. {       
37. super.onCreate(savedInstanceState);      
38. setContentView(R.layout.main);      
39.             
40. mSurfaceView = (SurfaceView)this.findViewById(R.id.surfaceview);      
41. mSurfaceHolder = mSurfaceView.getHolder();      
42.      
43. mPaint = new Paint();       
44. //畫筆的顏色       
45. mPaint.setColor(Color.RED);       
46. //畫筆的粗細       
47. mPaint.setStrokeWidth(2.0f);      
48. cleanButton = (Button)this.findViewById(R.id.flushbutton);       
49. //按鈕監聽       
50. cleanButton.setOnClickListener(new View.OnClickListener()        
51. {       
52.      
53. @Override       
54. public void onClick(View v)        
55. {       
56. // TODO Auto-generated method stub       
57. //鎖定整個SurfaceView       
58. Canvas mCanvas = mSurfaceHolder.lockCanvas();       
59. mCanvas.drawColor(Color.BLACK);       
60. //繪制完成，提交修改      
61. mSurfaceHolder.unlockCanvasAndPost(mCanvas);       
62. //重新鎖一次       
63. mSurfaceHolder.lockCanvas(new Rect(0, 0, 0, 0));       
64. mSurfaceHolder.unlockCanvasAndPost(mCanvas);       
65. }      
66. });          
67.      
68. colorButton = (Button)this.findViewById(R.id.colorbutton);      
69. //按鈕監聽       
70. colorButton.setOnClickListener(new View.OnClickListener()        
71. {       
72.      
73. @Override       
74. public void onClick(View v)       
75. {       
76.  // TODO Auto-generated method stub      
77.      
78. Dialog mDialog = new AlertDialog.Builder(MyWallActivity.this)       
79. .setTitle("顏色設置")       
80. .setSingleChoiceItems(new String[]{"紅色","綠色","藍色"}, whichColor, new DialogInterface.OnClickListener()        
81. {       
82. @Override      
83. public void onClick(DialogInterface dialog, int which)        
84. {       
85.  // TODO Auto-generated method stub       
86. switch(which)       
87. {       
88. case 0:       
89. {       
90. //畫筆的顏色       
91. mPaint.setColor(Color.RED);       
92. whichColor = 0;       
93. break;       
94. }       
95. case 1:       
96. {       
97. //畫筆的顏色      
98. mPaint.setColor(Color.GREEN);      
99. whichColor = 1;      
100. break;      
101. }      
102. case 2:      
103. {      
104. //畫筆的顏色106                                 
105. mPaint.setColor(Color.BLUE);      
106. whichColor = 2;                                 
107. break;                                  
108. }      
109. }      
110. }      
111. })      
112. .setPositiveButton("確定", new DialogInterface.OnClickListener()      
113. {      
114. @Override      
115. public void onClick(DialogInterface dialog, int which)       
116. {      
117. // TODO Auto-generated method stub      
118. dialog.dismiss();      
119. }      
120. })      
121. .create();      
122. mDialog.show();      
123. }      
124. });      
125.      
126.      
127. @Override      
128. public boolean onTouchEvent(MotionEvent event)      
129. {            
130. //獲取x坐標      
131. float x = event.getX();      
132. //獲取y坐標（不知道為什麼要減去一個偏移值才對得准屏幕）      
133. float y = event.getY()-50;      
134. //第一次進來先不管      
135. if(canDraw)      
136. {           
137. //獲取觸屏事件      
138. switch(event.getAction())      
139. {      
140. //如果是拖動事件      
141. case MotionEvent.ACTION_MOVE:      
142. {      
143. //鎖定整個SurfaceView      
144. Canvas mCanvas = mSurfaceHolder.lockCanvas();          
145. mCanvas.drawLine(x, y, oldX, oldY, mPaint);      
146. mSurfaceHolder.unlockCanvasAndPost(mCanvas);      
147. //重新鎖一次      
148. mSurfaceHolder.lockCanvas(new Rect(0, 0, 0, 0));      
149. mSurfaceHolder.unlockCanvasAndPost(mCanvas);      
150. break;      
151. }      
152. }      
153. }      
154. //保存目前的x坐標值      
155. oldX = x;      
156. //保存目前的y坐標值      
157. oldY = y;      
158.      
159. canDraw = true;      
160.      
161. return true;      
162. }      
163.      
164. }     

       應用測試

       在模擬器上運行此應用是如下效果：

       在Android手機上運行效果則是這樣的：

       字寫的有點丑，但是功能實現了。在獲取了Y坐標後減去一個偏移值50，這個值是猜出來的，沒想到在模擬器和真機上定位得都還蠻准的。

       應用比較簡易，但是大家可以在此基礎上豐富它的功能，使其成為一個像樣的Android應用。