Android开发:简单涂鸦板的实例

涂鸦板应用的代码实现

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

<?xmlversion="1.0"encoding="utf-8"?>  
<RelativeLayoutxmlns: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()函数，在这个函数里过滤出触屏拖动事件，然后获取其相应的坐标和画线。完整的内容如下：

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;        
publicclass MyWallActivity extends Activity         
{       
private SurfaceView mSurfaceView = null;        
private SurfaceHolder mSurfaceHolder = null;        
private Button cleanButton = null;        
private Button colorButton = null;        
privatefloat oldX = 0f;        
privatefloat oldY = 0f;        
privateboolean canDraw = false;       
private Paint mPaint = null;       
//用来记录当前是哪一种颜色      
privateint whichColor = 0;        
/** Called when the activity is first created. */ 
@Override 
publicvoid 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 
publicvoid 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 
publicvoid onClick(View v)        
{        
// TODO Auto-generated method stub     
Dialog mDialog = new AlertDialog.Builder(MyWallActivity.this)        
.setTitle("颜色设置")        
.setSingleChoiceItems(new String[]{"红色","绿色","蓝色"}, whichColor, new DialogInterface.OnClickListener()         
{        
@Override 
publicvoid onClick(DialogInterface dialog, int which)         
{        
// TODO Auto-generated method stub      
switch(which)        
{        
case0:        
{        
//画笔的颜色      
mPaint.setColor(Color.RED);        
whichColor = 0;        
break;        
}        
case1:        
{        
//画笔的颜色     
mPaint.setColor(Color.GREEN);       
whichColor = 1;       
break;       
}       
case2:       
{       
//画笔的颜色106                                  
mPaint.setColor(Color.BLUE); 
whichColor = 2;                                  
break;                                   
}       
}       
}       
})       
.setPositiveButton("确定", new DialogInterface.OnClickListener()       
{       
@Override 
publicvoid onClick(DialogInterface dialog, int which)        
{       
// TODO Auto-generated method stub     
dialog.dismiss();       
}       
})       
.create();       
mDialog.show();       
}       
});       
@Override 
publicboolean 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;       
returntrue;       
}       
}      

应用测试

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

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

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

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