Android实战简易教程<三>（实现简单绘图组件）

首先我们要了解触摸事件（OnTouchListener）指的是当用户接触到屏幕之后所产生的一种事件形式，而当用户在屏幕上划过时，可以使用触摸事件取得用户当前的坐标。

一、坐标显示

在实现画图功能之前，我们先利用触摸事件获得当前触摸的坐标。

main.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <TextView  
8.         android:id="@+id/text"  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="fill_parent" />  
11.   
12. </LinearLayout>  

代码非常简单，只引入一个TextView控件，下面看一下MainActivity代码：

[java]  view plain copy

1. package org.yayun.demo;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.MotionEvent;  
6. import android.view.View;  
7. import android.view.View.OnTouchListener;  
8. import android.widget.TextView;  
9.   
10. public class MainActivity extends Activity {  
11.     private TextView textView;  
12.       
13.     public void onCreate(Bundle savedInstanceState) {  
14.         super.onCreate(savedInstanceState); // 生命周期方法  
15.         super.setContentView(R.layout.main); // 设置要使用的布局管理器  
16.     textView=(TextView)findViewById(R.id.text);  
17.     textView.setOnTouchListener(new OnTouchListener() {//触摸事件  
18.           
19.         public boolean onTouch(View v, MotionEvent event) {  
20.             textView.setText("X="+event.getX()+",Y="+event.getY());//获取坐标  
21.             return false;  
22.         }  
23.     });  
24.   
25.     }  
26. }  

运行实例：

上面可以看到实时获得当前触摸的坐标。

二、实现画图功能

由于OnTouch事件是在View类中定义的，所以如果想要完成绘图的操作，首先应该定义一个属于自己的组件，该组件专门进行绘图板的功能实现，而且组件类一定要继承View类，同时要覆写View类的onDraw()绘图方法。

代码如下：

[java]  view plain copy

1. package org.yayun.demo;  
2.   
3. import java.util.ArrayList;  
4. import java.util.Iterator;  
5. import java.util.List;  
6.   
7. import android.content.Context;  
8. import android.graphics.Canvas;  
9. import android.graphics.Color;  
10. import android.graphics.Paint;  
11. import android.graphics.Point;  
12. import android.util.AttributeSet;  
13. import android.view.MotionEvent;  
14. import android.view.View;  
15.   
16. public class MyPaintView extends View{  
17.   
18.     private List<Point> allPoints=new ArrayList<Point>();//保存所有的坐标点  
19.     public MyPaintView(Context context, AttributeSet attrs) {  
20.         super(context, attrs);  
21.         super.setBackgroundColor(Color.WHITE);  
22.         super.setOnTouchListener(new OnTouchListener() {  
23.               
24.             public boolean onTouch(View v, MotionEvent event) {  
25.                 Point point=new Point((int)event.getX(),(int)event.getY());  
26.                 if(event.getAction()==MotionEvent.ACTION_DOWN){//判断按下  
27.                     allPoints=new ArrayList<Point>();//开始新的记录  
28.                     allPoints.add(point);  
29.                 }else if(event.getAction()==MotionEvent.ACTION_UP){  
30.                     allPoints.add(point);  
31.                 }else if(event.getAction()==MotionEvent.ACTION_MOVE){  
32.                     allPoints.add(point);  
33.                     MyPaintView.this.postInvalidate();//重绘  
34.                 }  
35.                 return true;//表示下面的不再执行了  
36.             }  
37.         });  
38.     }  
39.       
40.     @Override  
41.     protected void onDraw(Canvas canvas) {  
42.         Paint paint=new Paint();  
43.         paint.setColor(Color.RED);  
44.         if(allPoints.size()>1){  
45.             Iterator<Point> iterator=allPoints.iterator();  
46.             Point firstPoint=null;//开始点  
47.             Point lastpPoint=null;//结束点  
48.             while (iterator.hasNext()) {  
49.                 if(firstPoint==null){//找到开始点  
50.                     firstPoint=(Point)iterator.next();  
51.                 }else{  
52.                     if(lastpPoint!=null){  
53.                         firstPoint=lastpPoint;  
54.                     }  
55.                     lastpPoint=(Point)iterator.next();  
56.                     canvas.drawLine(firstPoint.x, firstPoint.y, lastpPoint.x, lastpPoint.y, paint);//画线  
57.                 }  
58.                   
59.             }  
60.         }  
61.         super.onDraw(canvas);  
62.     }  
63.   
64. }  

修改main.xml，将新建布局引入：

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <org.yayun.demo.MyPaintView  
8.         android:id="@+id/paintView"  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="fill_parent" >  
11.     </org.yayun.demo.MyPaintView>  
12.   
13. </LinearLayout>  

MainActivity不用加入任何东西：

[java]  view plain copy

1. package org.yayun.demo;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.MotionEvent;  
6. import android.view.View;  
7. import android.view.View.OnTouchListener;  
8. import android.widget.TextView;  
9.   
10. public class MainActivity extends Activity {  
11.   
12.     public void onCreate(Bundle savedInstanceState) {  
13.         super.onCreate(savedInstanceState); // 生命周期方法  
14.         super.setContentView(R.layout.main); // 设置要使用的布局管理器  
15.   
16.     }  
17. }  

运行实例：

总结

1.触摸事件OnTouchListener及onTouch()方法；

2.event.getX()//利用MotionEvent获取坐标的方法getX()

3.onDraw()方法和如何使用Canvas进行绘图的操作，而本次绘制是一条线（canvas.drawLine()）。