Android 自定義UI元件

在Android中，所有的UI介面都是由View類和ViewGroup類及其子類組合而成，其中View類是所有UI元件的基類，而ViewGroup是容納這些UI元件的容器，其本身也是View類的子類。在ViewGroup中，除了可以包含普通的View外，還可以再次包含ViewGroup。

雖然Android提供了許多繼承了View類的UI元件，但有時還是不能滿足開發者的需求，這時，我們就需要通過繼承View類來開發自己的UI元件。

開發自定義的UI元件大致可以分為以下3個步驟：

1、  建立一個繼承android.view.View類的View子類，並且重寫構造方法。

2、  根據需要重寫相應的方法。

3、  在專案的Activity中，建立並例項化自定義的View子類。

下面我們來看一個例子，該程式執行效果如下圖所示：

上圖中的這隻dog就是我們自定義的UI元件，它不僅能顯示一個dog的圖片，還能響應觸控事件，根據觸控點的座標動態改變顯示位置。

主佈局main.xml檔案內容如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    android:id="@+id/mylayout"
    >
</FrameLayout>

程式使用FrameLayout，指定了背景圖片是@drawable/background。

下面我們建立自定義UI元件，將其程式碼放在單獨的DogView.java檔案中：

package com.liuhaoyu;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.View;

public class DogView extends View {
	public float bitmapX; // 儲存dog顯示的X座標
	public float bitmapY; // 儲存dog顯示的Y座標

	public DogView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		Paint paint = new Paint(); // 建立並例項化Paint的物件
		Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(),
				R.drawable.dog); // 根據圖片生成點陣圖物件
		canvas.drawBitmap(bitmap, bitmapX, bitmapY, paint); // 繪製
		if (bitmap.isRecycled()) { // 判斷圖片是否回收
			bitmap.recycle(); // 強制回收圖片
		}
	}
}

這個自定義的UI元件是一隻能顯示在指定座標上的dog。可以看到類DogView繼承了 View類，重寫了一個帶引數Context的構造方法和onDrow()方法。這對應我們上面所講的步驟的第1和第2步。

最後，對應第3步，我們來看主Activity，它定義在MainActivity.java檔案中：

package com.liuhaoyu;

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

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        FrameLayout frameLayout = (FrameLayout) findViewById(R.id.mylayout);
        final DogView dog = new DogView(MainActivity.this); // 建立自定義DogView類物件dog。 

        dog.setOnTouchListener(new OnTouchListener() {
        	@Override
        	public boolean onTouch(View v, MotionEvent event) {
        		dog.bitmapX = event.getX(); // 設定dog顯示位置的X座標
        		dog.bitmapY = event.getY(); // 設定dog顯示位置的Y座標
        		dog.invalidate(); // 重繪dog元件
        		return true;
        	}
        });  
        
        frameLayout.addView(dog); // 將dog新增到佈局管理器中   

    }
}

可以看到，我們new了一個自定義元件DogView類的物件dog放在主佈局控制中，並讓該物件監聽觸控事件，根據觸控點的座標，設定dog物件的顯示位置。