Android應用開發執行個體篇（1）-----簡易塗鴉板

標籤：

連結地址：http://www.cnblogs.com/lknlfy/archive/2012/03/03/2378328.html

一、概述

      這次要做一個簡單的塗鴉板應用，以前在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，這個值是我直接猜出來的，沒想到在模擬器和真機上定位得還蠻準的，哈哈。當然這個應用的功能不多，不過有興趣的話可以再完善它，希望能起到拋磚引玉的作用。

 

Android應用開發執行個體篇（1）-----簡易塗鴉板