涂鸦板应用的代码实现
新建工程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>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
接着,修改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;
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
应用测试
在模拟器上运行此应用是如下效果:
在Android手机上运行效果则是这样的:
字写的有点丑,但是功能实现了。在获取了Y坐标后减去一个偏移值50,这个值是猜出来的,没想到在模拟器和真机上定位得都还蛮准的。
应用比较简易,但是大家可以在此基础上丰富它的功能,使其成为一个像样的Android应用。