Android 开发实例简单涂鸦板

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

  涂鸦板应用的代码实现

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

XML/HTML代码

<?xml version="1.0" encoding="utf-8"?> 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
> 

<SurfaceView
android:id="@+id/surfaceview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/line"
android:layout_alignParentTop="true"
/>

<LinearLayout
android:id="@+id/line"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>

<Button
android:id="@+id/flushbutton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="清屏"
/>

<Button
android:id="@+id/colorbutton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="颜色"
/>
</LinearLayout>
</RelativeLayout> 

接着，修改MyWallActivity.java文件，最主要是重写了onTouchEvent()函数，在这个函数里过滤出触屏拖动事件，然后获取其相应的坐标和画线。完整的内容如下：

Java代码

package com.nan.wall;   

import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.content.DialogInterface;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;
import android.widget.Button;    

public class MyWallActivity extends Activity
{
private SurfaceView mSurfaceView = null;
private SurfaceHolder mSurfaceHolder = null;
private Button cleanButton = null;
private Button colorButton = null;    

private float oldX = 0f;
private float oldY = 0f;    

private boolean canDraw = false;
private Paint mPaint = null;
//用来记录当前是哪一种颜色
private int whichColor = 0;    

/** Called when the activity is first created. */
  @Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);   

mSurfaceView = (SurfaceView)this.findViewById(R.id.surfaceview);
mSurfaceHolder = mSurfaceView.getHolder();   

mPaint = new Paint();
//画笔的颜色
mPaint.setColor(Color.RED);
//画笔的粗细
mPaint.setStrokeWidth(2.0f);
cleanButton = (Button)this.findViewById(R.id.flushbutton);
//按钮监听
cleanButton.setOnClickListener(new View.OnClickListener()
{    

@Override
public void onClick(View v)
{
// TODO Auto-generated method stub
//锁定整个SurfaceView
Canvas mCanvas = mSurfaceHolder.lockCanvas();
mCanvas.drawColor(Color.BLACK);
//绘制完成，提交修改
mSurfaceHolder.unlockCanvasAndPost(mCanvas);
//重新锁一次
mSurfaceHolder.lockCanvas(new Rect(0, 0, 0, 0));
mSurfaceHolder.unlockCanvasAndPost(mCanvas);
}
});     

colorButton = (Button)this.findViewById(R.id.colorbutton);
//按钮监听
colorButton.setOnClickListener(new View.OnClickListener()
{    

@Override
public void onClick(View v)
{
 // TODO Auto-generated method stub   

Dialog mDialog = new AlertDialog.Builder(MyWallActivity.this)
.setTitle("颜色设置")
.setSingleChoiceItems(new String[]{"红色","绿色","蓝色"}, whichColor, new DialogInterface.OnClickListener()
{
@Override
public void onClick(DialogInterface dialog, int which)
{
 // TODO Auto-generated method stub
switch(which)
{
case 0:
{
//画笔的颜色
mPaint.setColor(Color.RED);
whichColor = 0;
break;
}
case 1:
{
//画笔的颜色
mPaint.setColor(Color.GREEN);
whichColor = 1;
break;
}
case 2:
{
//画笔的颜色106
mPaint.setColor(Color.BLUE);
whichColor = 2;
break;
}
}
}
})
.setPositiveButton("确定", new DialogInterface.OnClickListener()
{
@Override
public void onClick(DialogInterface dialog, int which)
{
// TODO Auto-generated method stub
dialog.dismiss();
}
})
.create();
mDialog.show();
}
});   

@Override
public boolean onTouchEvent(MotionEvent event)
{
//获取x坐标
float x = event.getX();
//获取y坐标（不知道为什么要减去一个偏移值才对得准屏幕）
float y = event.getY()-50;
//第一次进来先不管
if(canDraw)
{
//获取触屏事件
switch(event.getAction())
{
//如果是拖动事件
case MotionEvent.ACTION_MOVE:
{
//锁定整个SurfaceView
Canvas mCanvas = mSurfaceHolder.lockCanvas();
mCanvas.drawLine(x, y, oldX, oldY, mPaint);
mSurfaceHolder.unlockCanvasAndPost(mCanvas);
//重新锁一次
mSurfaceHolder.lockCanvas(new Rect(0, 0, 0, 0));
mSurfaceHolder.unlockCanvasAndPost(mCanvas);
break;
}
}
}
//保存目前的x坐标值
oldX = x;
//保存目前的y坐标值
oldY = y;   

canDraw = true;   

return true;
}   

}   

应用测试

在模拟器上运行此应用是如下效果：

在Android手机上运行效果则是这样的：

字写的有点丑，但是功能实现了。在获取了Y坐标后减去一个偏移值50，这个值是猜出来的，没想到在模拟器和真机上定位得都还蛮准的。

应用比较简易，但是大家可以在此基础上丰富它的功能，使其成为一个像样的Android应用。

以上就是Android 简单涂鸦板的简单示例，后续继续整理相关资料，谢谢大家对本站的支持！