Android - Custom View

在很多時候，Android自帶的控件並不能滿足我們編程的需求。這個時候就需要我們開發出美觀，功能完善的自定義控件。在智能燈泡的APP這個項目中，需要SlideMenu控件使得界面更加充實，需要ColorPickerView控件來自定義燈泡顏色。因此瞭解如何開發Android自定義View就顯得很有必要。Android的自定義控件的開發步驟如下：

①View的工作原理
Android中所有的控件的基類都是View，ViewGroup也是對View類擴展成的視圖容器類（……Layout）。View定義了繪圖的基本操作，主要包括onMeasure(), onLayout(), onDraw()這三個子方法：

onMeasure()：確定視圖的大小，通過setMeasuredDimension(width, heght)方法設置視圖大小。
onLayout()：決定視圖的佈局座標。在View類中定義爲final類型，要求子類不能修改。其中setFrame(x0,y0,x1,y1)設置子View的具體位置(x0,y0) (x1,y1)爲父View的座標；onLayout()設置子View的佈局類型。
OnDraw()：利用前兩部份得到的參數，將自定義視圖繪製在屏幕上。

②創建自定義控件
創建自定義控件有3種主要實現方式：

a. 繼承已有的控件來實現，主要是當要實現的控件和已有的控件在很多方面的功能比較類似, 這是就可以通過對已有控件的擴展來滿足要求。
b. 通過繼承一個佈局文件來實現自定義控件。此時不用onDraw方法繪製界面，在構造函數中通過inflater加載自定義控件的佈局文件，再addView(view)，自定義控件的圖形界面就加載進來了[14]。
c. 通過直接繼承View類來實現自定義控件，使用GDI中的圖形API來繪製出組件界面。

③自定義控件增加屬性
爲Android自定義控件增加屬性有兩種方法：

a. 在View類中申明屬性，然後通過構造函數中引入的AttributeSet來得到XLM佈局文件中的屬性名稱。
b. 按照Android API提供的標準寫法，通過XML(Values. attr.xml)爲View註冊屬性。（常用的方法）

④繪製控件
使用Android. Graphics API在onDraw()函數中繪製控件。

⑤響應用戶動作
定義以下函數來響應用戶動作：onKeyDown()按鍵按下事件，onKeyUp()按鍵擡起事件，onTrackballEvent()軌跡球事件，onTouchEvent()響應觸屏事件

⑥定義回調函數
在自定義控件類中定義一個接口，這個接口用於在某個情景下執行相應的操作。然後在類中的合適位置調用接口中的方法，但是這個方法並沒有實現。最後在使用這個控件的UI Activity中實現這個接口中的方法。這種接口回調機制會使得自定義控件更加靈活、適用。

側滑菜單的例子

public class SlideMenu extends HorizontalScrollView {
    private LinearLayout mWapper; //整體頁面
    private ViewGroup mMenu; //菜單頁面
    private ViewGroup mContent; //內容頁面
    private int mMenuWidth; //菜單的寬度

    public SildeMenu(Context context, AttributeSet attrs) { 
……………//初始化內容和菜單偏移量  
}

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 設置 菜單頁面 和 內容頁面的 大小
        if (!once) { //在一開始運行，防止多次調用該方法
            mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth
                    - mMenuRightPaddding;  //設置菜單寬度
            mContent.getLayoutParams().width = mScreenWidth; //設置內容的寬度
            once = true;
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // 設置 菜單頁面開始的偏移量
        super.onLayout(changed, l, t, r, b);
        if (changed) {
          //將頁面左移整個菜單的寬度，就可以將菜單隱藏在屏幕左側
            this.scrollTo(mMenuWidth, 0);
        }
    }
    public boolean onTouchEvent(MotionEvent ev) { ….. // 響應用戶動作事件 }
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        // l =getScrollX(); 菜單當前的偏移量
        //在滾動發生時，調用屬性動畫，設置transaction，
        super.onScrollChanged(l, t, oldl, oldt);
        ViewHelper.setTranslationX(mMenu, l);
    }
}

取色盤例子

package com.example.controlbulb;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class ColorPickerView extends View {

    public interface OnColorChangedListener {
        void colorChanged(int color);
    }

    public boolean flag;

    private Paint mPaint;
    private Paint mCenterPaint;
    private final int[] mColors;
    private OnColorChangedListener mListener;

    public void setOnColorChangedListener(OnColorChangedListener l){
        mListener = l;
    }

    public ColorPickerView(Context context, AttributeSet attrs) {
        super(context,attrs,0);
        //mListener = l;
        mColors = new int[] { 0xFFFF0000, 0xFFFF00FF, 0xFF0000FF, 0xFF00FFFF,
                0xFF00FF00, 0xFFFFFF00, 0xFFFF0000 };
        Shader s = new SweepGradient(0, 0, mColors, null);

        //初始化漸變色畫筆 
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setShader(s);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(50);

        //初始化中心園畫筆
        mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mCenterPaint.setColor(0);
        mCenterPaint.setStrokeWidth(5);
    }

    private boolean mTrackingCenter;//點擊了中間的圓形區域
    private boolean mHighlightCenter;//從點擊了圓環之後，移動

    private static final int CENTER_X = 170;
    private static final int CENTER_Y = 170;
    private static final int CENTER_RADIUS = 40;

    @Override
    protected void onDraw(Canvas canvas) {
        float r = CENTER_X - mPaint.getStrokeWidth() * 0.5f;

        //移動中心
        canvas.translate(CENTER_X, CENTER_X);

        //畫出色環和中心園
        canvas.drawOval(new RectF(-r, -r, r, r), mPaint);
        canvas.drawCircle(0, 0, CENTER_RADIUS, mCenterPaint);

        if (mTrackingCenter) {
            int c = mCenterPaint.getColor();
            mCenterPaint.setStyle(Paint.Style.STROKE);

            if (mHighlightCenter) {
                mCenterPaint.setAlpha(0xFF);
            } else {
                mCenterPaint.setAlpha(0x80);
            }
            canvas.drawCircle(0, 0,
                    CENTER_RADIUS + mCenterPaint.getStrokeWidth(), mCenterPaint);

            mCenterPaint.setStyle(Paint.Style.FILL);
            mCenterPaint.setColor(c);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 視圖大小設置爲直徑
        setMeasuredDimension(CENTER_X * 2, CENTER_Y * 2);
    }



    /*private int floatToByte(float x) {
        int n = java.lang.Math.round(x);
        return n;
    }

    private int pinToByte(int n) {
        if (n < 0) {
            n = 0;
        } else if (n > 255) {
            n = 255;
        }
        return n;
    }*/


    //算出兩個值之間的指定比例的值公式爲：value = p1 + p(p2-p1)
    private int ave(int s, int d, float p) {
        return s + java.lang.Math.round(p * (d - s));
    }

    //unit爲觸發點的到圓形的角度
    //一個區域值unit到顏色數組中找到其對應的色值區域
    private int interpColor(int colors[], float unit) {
        if (unit <= 0) {
            return colors[0];
        }
        if (unit >= 1) {
            return colors[colors.length - 1];
        }

        float p = unit * (colors.length - 1);
        int i = (int) p;
        p -= i;

        // now p is just the fractional part [0...1) and i is the index
        int c0 = colors[i];
        int c1 = colors[i + 1];
        int a = ave(Color.alpha(c0), Color.alpha(c1), p);
        int r = ave(Color.red(c0), Color.red(c1), p);
        int g = ave(Color.green(c0), Color.green(c1), p);
        int b = ave(Color.blue(c0), Color.blue(c1), p);

        return Color.argb(a, r, g, b);
    }

    /*private int rotateColor(int color, float rad) {
        float deg = rad * 180 / 3.1415927f;
        int r = Color.red(color);
        int g = Color.green(color);
        int b = Color.blue(color);

        ColorMatrix cm = new ColorMatrix();
        ColorMatrix tmp = new ColorMatrix();

        cm.setRGB2YUV();
        tmp.setRotate(0, deg);
        cm.postConcat(tmp);
        tmp.setYUV2RGB();
        cm.postConcat(tmp);

        final float[] a = cm.getArray();

        int ir = floatToByte(a[0] * r + a[1] * g + a[2] * b);
        int ig = floatToByte(a[5] * r + a[6] * g + a[7] * b);
        int ib = floatToByte(a[10] * r + a[11] * g + a[12] * b);

        return Color.argb(Color.alpha(color), pinToByte(ir), pinToByte(ig),
                pinToByte(ib));
    }*/

    private static final float PI = 3.1415926f;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX() - CENTER_X;
        float y = event.getY() - CENTER_Y;
        //判斷當前觸摸點的座標是否在半徑爲CENTER_RADIUS的圓中
        boolean inCenter = java.lang.Math.sqrt(x * x + y * y) <= CENTER_RADIUS;

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            mTrackingCenter = inCenter;
            if (inCenter) {
                flag=true;
                mHighlightCenter = true;
                invalidate();
                break;
            }
        case MotionEvent.ACTION_MOVE:
            if (mTrackingCenter) {
                if (mHighlightCenter != inCenter) {
                    mHighlightCenter = inCenter;
                    invalidate();
                }
                //觸發點的到圓形的角度，然後interpColor(mColors, unit)方法算出顏色
            } else {
                float angle = (float) java.lang.Math.atan2(y, x);
                // need to turn angle [-PI ... PI] into unit [0....1]
                float unit = angle / (2 * PI);
                if (unit < 0) {
                    unit += 1;
                }
                flag=true;
                mCenterPaint.setColor(interpColor(mColors, unit));
                mListener.colorChanged(interpColor(mColors, unit));

                invalidate();
            }
            break;
        case MotionEvent.ACTION_UP:
            flag=false;
            if (mTrackingCenter) {
                if (inCenter) {
                    mListener.colorChanged(mCenterPaint.getColor());
                }
                mTrackingCenter = false; 
                invalidate();
            }
            break;
        }
        return true;
    }

}