Android 自定义View修炼-Android开发之自定义View开发及实例详解

在开发Android应用的过程中，难免需要自定义View，其实自定义View不难，只要了解原理，实现起来就没有那么难。

其主要原理就是继承View，重写构造方法、onDraw，（onMeasure）等函数。我自定义了个虚拟按键的View，效果图如下：

首先得自己写个自定义View类，这里我写了个VirtualKeyView类，继承自View类，实现了构造方法以及onDraw方法，以及实现了键盘按键的接口事件，实现代码如下：

package com.czm.customview;


import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.util.AttributeSet;
import android.util.Log;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;

public class VirtualKeyView extends View{

    private static final boolean bDebug = true;
    private static final String TAG = VirtualKeyView.class.getSimpleName();
    
    private Context mContext;
    
    private Bitmap bmpRound;
    private Bitmap bmpRound_press;
    private Bitmap bmpOk;
    private Bitmap bmpOk_press;

    private int mWidth;//真实宽度
    
    private int widthBg = 584;
    //private int widthItemBg = 292;
    private int widthMid = 220;//中心宽度
    
    private int cir_Centre_X = 292;//圆心位置
    private int cir_Centre_Y = 292;//圆心位置
    private int bigRadius = 292;
    private int smallRadius = 110;
    private int smallCir_X = 182;
    private int smallCir_Y = 182;
    private float scale = 1.0f;
    
    private boolean isInit = false;
    
    private int inputPress = -1;//显示点击了哪个键
    

    public VirtualKeyView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        mContext = context;
    }
    
    public VirtualKeyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        mContext = context;
    }

private void initData() {
        
        mWidth = getWidth();
        scale = mWidth*1.0f/widthBg;
        
        cir_Centre_X = (int) (cir_Centre_X*scale);
        cir_Centre_Y = (int) (cir_Centre_Y*scale);
        bigRadius = (int) (bigRadius*scale);
        smallRadius = (int) (smallRadius*scale);
        smallCir_X = (int) (smallCir_X*scale);
        smallCir_Y = (int) (smallCir_Y*scale);
        
        initView();
        isInit = true;
    }
    
    private void initView() {
        if(mWidth == widthBg){
            bmpRound = Utils.decodeCustomRes(mContext, R.drawable.controller_round);
            bmpRound_press= Utils.decodeCustomRes(mContext, R.drawable.controller_round_bg_pressed);
            bmpOk= Utils.decodeCustomRes(mContext, R.drawable.controller_ok);
            bmpOk_press= Utils.decodeCustomRes(mContext, R.drawable.controller_ok_pressed);
        } else {
            int mid = (int) (widthMid*scale);
            Bitmap bitmapTmp = Utils.decodeCustomRes(mContext, R.drawable.controller_round);
            bmpRound = Bitmap.createScaledBitmap(bitmapTmp, mWidth, mWidth, true);
            bitmapTmp.recycle();
            bitmapTmp = null;
            
            bitmapTmp = Utils.decodeCustomRes(mContext, R.drawable.controller_round_bg_pressed);
            bmpRound_press = Bitmap.createScaledBitmap(bitmapTmp, mWidth, mWidth, true);
            bitmapTmp.recycle();
            bitmapTmp = null;

            bitmapTmp = Utils.decodeCustomRes(mContext, R.drawable.controller_ok);
            bmpOk = Bitmap.createScaledBitmap(bitmapTmp, mid, mid, true);
            bitmapTmp.recycle();
            bitmapTmp = null;
            
            bitmapTmp = Utils.decodeCustomRes(mContext, R.drawable.controller_ok_pressed);
            bmpOk_press = Bitmap.createScaledBitmap(bitmapTmp, mid, mid, true);
            bitmapTmp.recycle();
            bitmapTmp = null;
        }
        System.gc();
    }
    
    public void  recycle() {
        if (bmpRound != null && !bmpRound.isRecycled()) {
            bmpRound.recycle();
            bmpRound = null;
        }
        if (bmpRound_press != null && !bmpRound_press.isRecycled()) {
            bmpRound_press.recycle();
            bmpRound_press = null;
        }
        if (bmpOk != null && !bmpOk.isRecycled()) {
            bmpOk.recycle();
            bmpOk = null;
        }
        if (bmpOk_press != null && !bmpOk_press.isRecycled()) {
            bmpOk_press.recycle();
            bmpOk_press = null;
        }
        System.gc();
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        if(!isInit){
            initData();
        }
        canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG
                | Paint.FILTER_BITMAP_FLAG));// 抗锯齿
        drawCir(canvas);
    }
    
    private void drawCir(Canvas canvas) {
        switch (inputPress) {
        case -1:
            //无按键
            canvas.drawBitmap(bmpRound, 0, 0, null);
            canvas.drawBitmap(bmpOk, smallCir_X , smallCir_Y, null);
            break;
        case KeyEvent.KEYCODE_DPAD_CENTER:
            //中心Ok键
            canvas.drawBitmap(bmpRound, 0, 0, null);
            canvas.drawBitmap(bmpOk_press, smallCir_X , smallCir_Y, null);
            break;
        case KeyEvent.KEYCODE_DPAD_UP:
            //上
            drawBg(canvas,180);
            canvas.drawBitmap(bmpOk, smallCir_X , smallCir_Y, null);
            break;
        case KeyEvent.KEYCODE_DPAD_DOWN:
            //下
            drawBg(canvas,0);
            canvas.drawBitmap(bmpOk, smallCir_X , smallCir_Y, null);
            break;
        case KeyEvent.KEYCODE_DPAD_LEFT:
            //左
            drawBg(canvas,90);
            canvas.drawBitmap(bmpOk, smallCir_X , smallCir_Y, null);
            break;
        case KeyEvent.KEYCODE_DPAD_RIGHT:
            //右
            drawBg(canvas,270);
            canvas.drawBitmap(bmpOk, smallCir_X , smallCir_Y, null);
            break;
            
        default:
            break;
        }
    }
    
    private void drawBg(Canvas canvas,int rotate) {
        canvas.save();    //保存canvas状态
        canvas.rotate(rotate,cir_Centre_X,cir_Centre_Y);
        canvas.drawBitmap(bmpRound_press, 0, 0, null);//这里画的是旋转后的
        canvas.restore();// 恢复canvas状态
    }
    
    public boolean onTouchEvent(MotionEvent event) {
        if (bDebug)
            Log.d(TAG, "event.getAction() = " + event.getAction());
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
                // 计算圆选择的哪个字母
                int x1 = (int) (event.getX() - cir_Centre_X);
                int y1 = (int) (event.getY() - cir_Centre_Y);
                if (bDebug)
                    Log.d(TAG, "x= " + x1 + ", y = " + y1);
                int x2 = x1 * x1;
                int y2 = y1 * y1;
                int bigRadius2 = bigRadius * bigRadius;
                int smallRadius2 = smallRadius * smallRadius;
                if (x2 + y2 < bigRadius2) {
                    // 表示在画圆形之内，才有继续计算的必要
                    if (x2 + y2 < smallRadius2) {
                        // 如果再小圆内
                        setOnKeyDown(KeyEvent.KEYCODE_DPAD_CENTER);
                    } else if (y1 > x1) {
                        if (y1 > -x1) {
                            // 下
                            setOnKeyDown(KeyEvent.KEYCODE_DPAD_DOWN);
                        } else {
                            // 左
                            setOnKeyDown(KeyEvent.KEYCODE_DPAD_LEFT);
                        }
                    } else if (y1 < x1) {
                        if (y1 > -x1) {
                            // 右
                            setOnKeyDown(KeyEvent.KEYCODE_DPAD_RIGHT);
                        } else {
                            // 上
                            setOnKeyDown(KeyEvent.KEYCODE_DPAD_UP);
                        }
                    }
                }
                // isShowCir = false;
                postInvalidate();
            return true;
        }

        if (event.getAction() == MotionEvent.ACTION_UP) {
                // 计算圆选择的哪个字母

                int x1 = (int) (event.getX() - cir_Centre_X);
                int y1 = (int) (event.getY() - cir_Centre_Y);
                if (bDebug)
                    Log.d(TAG, "x= " + x1 + ", y = " + y1);
                int x2 = x1 * x1;
                int y2 = y1 * y1;
                int bigRadius2 = bigRadius * bigRadius;
                int smallRadius2 = smallRadius * smallRadius;
                if (x2 + y2 < bigRadius2) {
                    // 表示在画圆形之内，才有继续计算的必要
                    if (x2 + y2 < smallRadius2) {
                        // 如果再小圆内
                        setOnKeyUp(KeyEvent.KEYCODE_DPAD_CENTER);
                    } else if (y1 > x1) {
                        if (y1 > -x1) {
                            // 下
                            setOnKeyUp(KeyEvent.KEYCODE_DPAD_DOWN);
                        } else {
                            // 左
                            setOnKeyUp(KeyEvent.KEYCODE_DPAD_LEFT);
                        }
                    } else if (y1 < x1) {
                        if (y1 > -x1) {
                            // 右
                            setOnKeyUp(KeyEvent.KEYCODE_DPAD_RIGHT);
                        } else {
                            // 上
                            setOnKeyUp(KeyEvent.KEYCODE_DPAD_UP);
                        }
                    }

                }
                postInvalidate();
        }
        return true;
    }
    
    private void setOnKeyDown(int keyCode) {
        if(bDebug)
            Log.d(TAG, "keyCode = "+keyCode);
        inputPress = keyCode;
        if(myIntputCallBack != null){
            myIntputCallBack.intputDown(keyCode);
        }
    }
    
    private void setOnKeyUp(int keyCode) {
        inputPress = -1;
        if(myIntputCallBack != null){
            myIntputCallBack.intputUp(keyCode);
        }
    }
    
    /******************* 输入回调函数 ********************/
    private IntputCallBack myIntputCallBack = null;

    public interface IntputCallBack {
        void intputDown(int keyCode);
        void intputUp(int keyCode);
    }

    public void setOnInputCallBack(IntputCallBack myIntputCallBack) {
        this.myIntputCallBack = myIntputCallBack;
    }
}

在xml布局文件里面如何使用上面自定义的View视图控件呢？很简单就是 和 使用<TextView> 一样，只需写全路径即可：本例中如下：

在main.xml的UI布局文件中加入：

<com.czm.customview.VirtualKeyView
        android:id="@+id/virtualKeyView"
        android:layout_marginTop="20dp"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_centerHorizontal="true"
         />

在看看 如何在java类文件中使用 该 VirtualKeyView视图控件呢，这个时候就和 普通的TextView视图一样使用了，本例中

在MainActivity中使用如下：

package com.czm.customview;


import com.czm.customview.VirtualKeyView.IntputCallBack;

import android.os.Bundle;
import android.app.Activity;
import android.view.KeyEvent;
import android.widget.Toast;

public class MainActivity extends Activity {

    private VirtualKeyView virtualKeyView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        virtualKeyView = (VirtualKeyView) findViewById(R.id.virtualKeyView);

        virtualKeyView.setOnInputCallBack(new IntputCallBack() {

            @Override
            public void intputUp(int keyCode) {

            }

            @Override
            public void intputDown(int keyCode) {
                if (keyCode == KeyEvent.KEYCODE_DPAD_UP) {
                    showToast("您按了 上 键");
                } else if (keyCode == KeyEvent.KEYCODE_DPAD_DOWN) {
                    showToast("您按了 下 键");
                } else if (keyCode == KeyEvent.KEYCODE_DPAD_LEFT) {
                    showToast("您按了 左 键");
                } else if (keyCode == KeyEvent.KEYCODE_DPAD_RIGHT) {
                    showToast("您按了 右 键");
                } else if (keyCode == KeyEvent.KEYCODE_DPAD_CENTER) {
                    showToast("您按了 OK 键");
                }

            }
        });

    }
    private void showToast(String msg){
        Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
    }
    
    @Override
    public void onDestroy() {
        super.onDestroy();
        virtualKeyView.recycle();
    }

}

Utils.java文件中的decodeCustomRes方法实现如下：

package com.czm.customview;

import java.io.InputStream;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;

public class Utils {
    public static Bitmap decodeCustomRes(Context c, int res) {
        InputStream is = c.getResources().openRawResource(res);
        BitmapFactory.Options options = new BitmapFactory.Options();
        options.inJustDecodeBounds = false;
        options.inSampleSize = 1;//表示原尺寸加载图片，不缩放
        Bitmap bmp = BitmapFactory.decodeStream(is, null, options);
        return bmp;
    }
}

到此为止，自定义的View完毕了，Ctrl+F11即可运行查看效果啦~~