Android 實(shí)戰(zhàn)簡(jiǎn)易教程-第三槍（實(shí)現(xiàn)簡(jiǎn)單繪圖組件）

首先我們要了解觸摸事件（OnTouchListener）指的是當(dāng)用戶接觸到屏幕之后所產(chǎn)生的一種事件形式，而當(dāng)用戶在屏幕上劃過時(shí)，可以使用觸摸事件取得用戶當(dāng)前的坐標(biāo)。

一、坐標(biāo)顯示

在實(shí)現(xiàn)畫圖功能之前，我們先利用觸摸事件獲得當(dāng)前觸摸的坐標(biāo)。

main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/text"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" ></TextView>

</LinearLayout>

代碼非常簡(jiǎn)單，只引入一個(gè) TextView 控件，下面看一下 MainActivity 代碼：

package org.yayun.demo;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.TextView;

public class MainActivity extends Activity {
    private TextView textView;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState); // 生命周期方法
        super.setContentView(R.layout.main); // 設(shè)置要使用的布局管理器
    textView=(TextView)findViewById(R.id.text);
    textView.setOnTouchListener(new OnTouchListener() {//觸摸事件

        public boolean onTouch(View v, MotionEvent event) {
            textView.setText("X="+event.getX()+",Y="+event.getY());//獲取坐標(biāo)
            return false;
        }
    });

    }
}

運(yùn)行實(shí)例：

http://wiki.jikexueyuan.com/project/android-in-action/images/6.png" alt="" />

上面可以看到實(shí)時(shí)獲得當(dāng)前觸摸的坐標(biāo)。

二、實(shí)現(xiàn)畫圖功能

由于 OnTouch 事件是在 View 類中定義的，所以如果想要完成繪圖的操作，首先應(yīng)該定義一個(gè)屬于自己的組件，該組件專門進(jìn)行繪圖板的功能實(shí)現(xiàn)，而且組件類一定要繼承 View 類，同時(shí)要覆寫 View 類的 onDraw() 繪圖方法。

代碼如下：

package org.yayun.demo;

import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class MyPaintView extends View{

    private List<Point> allPoints=new ArrayList<Point>();//保存所有的坐標(biāo)點(diǎn)
    public MyPaintView(Context context, AttributeSet attrs) {
        super(context, attrs);
        super.setBackgroundColor(Color.WHITE);
        super.setOnTouchListener(new OnTouchListener() {

            public boolean onTouch(View v, MotionEvent event) {
                Point point=new Point((int)event.getX(),(int)event.getY());
                if(event.getAction()==MotionEvent.ACTION_DOWN){//判斷按下
                    allPoints=new ArrayList<Point>();//開始新的記錄
                    allPoints.add(point);
                }else if(event.getAction()==MotionEvent.ACTION_UP){
                    allPoints.add(point);
                }else if(event.getAction()==MotionEvent.ACTION_MOVE){
                    allPoints.add(point);
                    MyPaintView.this.postInvalidate();//重繪
                }
                return true;//表示下面的不再執(zhí)行了
            }
        });
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Paint paint=new Paint();
        paint.setColor(Color.RED);
        if(allPoints.size()>1){
            Iterator<Point> iterator=allPoints.iterator();
            Point firstPoint=null;//開始點(diǎn)
            Point lastpPoint=null;//結(jié)束點(diǎn)
            while (iterator.hasNext()) {
                if(firstPoint==null){//找到開始點(diǎn)
                    firstPoint=(Point)iterator.next();
                }else{
                    if(lastpPoint!=null){
                        firstPoint=lastpPoint;
                    }
                    lastpPoint=(Point)iterator.next();
                    canvas.drawLine(firstPoint.x, firstPoint.y, lastpPoint.x, lastpPoint.y, paint);//畫線
                }

            }
        }
        super.onDraw(canvas);
    }

}

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <org.yayun.demo.MyPaintView
        android:id="@+id/paintView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </org.yayun.demo.MyPaintView>

</LinearLayout>

MainActivity 不用加入任何東西：

package org.yayun.demo;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.TextView;

public class MainActivity extends Activity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState); // 生命周期方法
        super.setContentView(R.layout.main); // 設(shè)置要使用的布局管理器

    }
}

運(yùn)行實(shí)例：

http://wiki.jikexueyuan.com/project/android-in-action/images/7.png" alt="" />

總結(jié)

1. 觸摸事件 OnTouchListener 及 onTouch() 方法；
2. event.getX()//利用 MotionEvent 獲取坐標(biāo)的方法 getX()
3. onDraw() 方法和如何使用 Canvas 進(jìn)行繪圖的操作，而本次繪制是一條線（canvas.drawLine()）。