在Android上开发一些小应用既可以积累知识又可以增加乐趣，与任务式开发不同，所以想到在Android系统上实现一个简单的涂鸦板，这是我们练手的一种好的方法。

       涂鸦板应用的代码实现

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

XML/HTML代码
  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()函数，在这个函数里过滤出触屏拖动事件，然后获取其相应的坐标和画线。完整的内容如下：

Java代码
  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应用。

本文发布：Android开发网
本文地址：http://www.jizhuomi.com/android/example/19.html
2012年4月28日
发布:鸡啄米 分类:Android开发实例 浏览: 评论:10