快捷導(dǎo)航

Android 開發(fā)實(shí)例簡單涂鴉板

更新時(shí)間：2016年08月22日 15:02:44 投稿：lqh

本文主要介紹 Android 簡單涂鴉板,這里提供了代碼示例和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下

在Android上開發(fā)一些小應(yīng)用既可以積累知識(shí)又可以增加樂趣，與任務(wù)式開發(fā)不同，所以想到在Android系統(tǒng)上實(shí)現(xiàn)一個(gè)簡單的涂鴉板，這是我們練手的一種好的方法。

涂鴉板應(yīng)用的代碼實(shí)現(xiàn)

新建工程MyWall，修改/res/layout/main.xml文件，在里面添加一個(gè)SurfaceView和兩個(gè)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()函數(shù)，在這個(gè)函數(shù)里過濾出觸屏拖動(dòng)事件，然后獲取其相應(yīng)的坐標(biāo)和畫線。完整的內(nèi)容如下：

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;   
//用來記錄當(dāng)前是哪一種顏色    
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);    
//畫筆的粗細(xì)    
mPaint.setStrokeWidth(2.0f);   
cleanButton = (Button)this.findViewById(R.id.flushbutton);    
//按鈕監(jiān)聽    
cleanButton.setOnClickListener(new View.OnClickListener()    
{    
   
@Override    
public void onClick(View v)    
{    
// TODO Auto-generated method stub    
//鎖定整個(gè)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);   
//按鈕監(jiān)聽    
colorButton.setOnClickListener(new View.OnClickListener()    
{    
   
@Override    
public void onClick(View v)    
{    
 // TODO Auto-generated method stub   
   
Dialog mDialog = new AlertDialog.Builder(MyWallActivity.this)    
.setTitle("顏色設(shè)置")    
.setSingleChoiceItems(new String[]{"紅色","綠色","藍(lán)色"}, 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坐標(biāo)   
float x = event.getX();   
//獲取y坐標(biāo)（不知道為什么要減去一個(gè)偏移值才對(duì)得準(zhǔn)屏幕）   
float y = event.getY()-50;   
//第一次進(jìn)來先不管   
if(canDraw)   
{      
//獲取觸屏事件   
switch(event.getAction())   
{   
//如果是拖動(dòng)事件   
case MotionEvent.ACTION_MOVE:   
{   
//鎖定整個(gè)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坐標(biāo)值   
oldX = x;   
//保存目前的y坐標(biāo)值   
oldY = y;   
   
canDraw = true;   
   
return true;   
}   
   
}

應(yīng)用測試

在模擬器上運(yùn)行此應(yīng)用是如下效果：