Android应用开发实例篇（1）-----简易涂鸦板
一、概述
这次要做一个简单的涂鸦板应用，以前在Qt上实现过，突然想到要把它在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（）函数，在这个函数里过滤出触屏拖动事件，然后获取其相应的坐标和画线，关于SurfaceView的用法在基础篇里有讲到。完整的内容如下：
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
49 cleanButton = (Button)this.findViewById(R.id.flushbutton);
50 //按钮监听
51 cleanButton.setOnClickListener(new View.OnClickListener()
52 {
53
54 @Override
55 public void onClick(View v)
56 {
57 // TODO Auto-generated method stub
58 //锁定整个SurfaceView
59 Canvas mCanvas = mSurfaceHolder.lockCanvas();
60 mCanvas.drawColor(Color.BLACK);
61 //绘制完成，提交修改
62 mSurfaceHolder.unlockCanvasAndPost(mCanvas);
63 //重新锁一次
64 mSurfaceHolder.lockCanvas(new Rect(0, 0, 0, 0));
65 mSurfaceHolder.unlockCanvasAndPost(mCanvas);
66 }
67 });
68
69 colorButton = (Button)this.findViewById(R.id.colorbutton);
70 //按钮监听
71 colorButton.setOnClickListener(new View.OnClickListener()
72 {
73
74 @Override
75 public void onClick(View v)
76 {
77 // TODO Auto-generated method stub
78 Dialog mDialog = new AlertDialog.Builder(MyWallActivity.this)
79 .setTitle("颜色设置")
80 .setSingleChoiceItems(new String[]{"红色","绿色","蓝色"}, whichColor, new DialogInterface.OnClickListener()
81 {
82
83 @Override
84 public void onClick(DialogInterface dialog, int which)
85 {
86 // TODO Auto-generated method stub
87 switch(which)
88 {
89 case 0:
90 {
91 //画笔的颜色
92 mPaint.setColor(Color.RED);
93 whichColor = 0;
94 break;
95 }
96 case 1:
97 {
98 //画笔的颜色
99 mPaint.setColor(Color.GREEN);
100 whichColor = 1;
101 break;
102 }
103 case 2:
104 {
105 //画笔的颜色
106 mPaint.setColor(Color.BLUE);
107 whichColor = 2;
108 break;
109 }
110 }
111 }
112 })
113 .setPositiveButton("确定", new DialogInterface.OnClickListener()
114 {
115
116 @Override
117 public void onClick(DialogInterface dialog, int which)
118 {
119 // TODO Auto-generated method stub
120 dialog.dismiss();
121 }
122 })
123 .create();
124 mDialog.show();
125 }
126 });
127
128 }
129
130
131 @Override
132 public boolean onTouchEvent(MotionEvent event)
133 {
134 //获取x坐标
135 float x = event.getX();
136 //获取y坐标（不知道为什么要减去一个偏移值才对得准屏幕）
137 float y = event.getY()-50;
138
139 //第一次进来先不管
140 if(canDraw)
141 {
142 //获取触屏事件
143 switch(event.getAction())
144 {
145 //如果是拖动事件
146 case MotionEvent.ACTION_MOVE:
147 {
148
149 //锁定整个SurfaceView
150 Canvas mCanvas = mSurfaceHolder.lockCanvas();
151 mCanvas.drawLine(x, y, oldX, oldY, mPaint);
152 mSurfaceHolder.unlockCanvasAndPost(mCanvas);
153 //重新锁一次
154 mSurfaceHolder.lockCanvas(new Rect(0, 0, 0, 0));
155 mSurfaceHolder.unlockCanvasAndPost(mCanvas);
156 break;
157 }
158 }
159
160 }
161 //保存目前的x坐标值
162 oldX = x;
163 //保存目前的y坐标值
164 oldY = y;
165
166 canDraw = true;
167
168 return true;
169 }
170
171 }
好了，在模拟器上运行效果如下：
在真机上运行效果如下：
呵呵，写得比较丑。
在获取了Y坐标后减去一个偏移值50，这个值是我直接猜出来的，没想到在模拟器和真机上定位得还蛮准的，哈哈。当然这个应用的功能不多，不过有兴趣的话可以再完善它，希望能起到抛砖引玉的作用。
