在自定義View中，一個View會有很多屬性、監聽需要設定。而在根View中只有最基本的屬性和監聽。所以很多屬性需要自己定義。上一篇部落格道長絮叨了一下畫布實現自定義View，是以折線圖的實現為例說的。這一次道長以自定義按鈕的實現說一下自定義屬性。繫好安全帶，要開車了……

一、新增自定義屬性

• 在資原始檔夾下新增attr.xml檔案

• 在attr.xml中新增如下程式碼

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="CustomToggleButton">
        <attr name="slide_background" format="reference"/>
        <attr name="slide_icon" format="reference"/>
        <attr name="state" format="boolean"/>
    </declare-styleable>

</resources>

注意：declare-styleable的name值比較隨意，之前宣告名稱空間會用到，現在也用不到了。其中的每一條attr就是一條屬性。

• 在根佈局中宣告名稱空間

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:yushan="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</RelativeLayout>

注意：這裡的命名比較隨意，所以道長命名了“yushan”,在這個佈局檔案中就可以使用自定義屬性了。

• 在佈局中使用自定義屬性

    <com.yushan.customproperty.CustomToggleButton
        android:id="@+id/toggle_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"

        yushan:slide_background="@drawable/btn_bg"
        yushan:slide_icon="@drawable/btn_icon"
        yushan:state="false" />

• 在程式碼中讀取自定義屬性

    public CustomToggleButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 讀取自定義屬性
        String nameSpace = "http://schemas.android.com/apk/res-auto";

        isOpen = attrs.getAttributeBooleanValue(nameSpace, "state", false);
        setState(isOpen);

        slideBackgroundId = attrs.getAttributeResourceValue(nameSpace, "slide_background", -1);
        slideIconId = attrs.getAttributeResourceValue(nameSpace, "slide_icon", -1);
        if (slideBackgroundId != -1 && slideIconId != -1) {
            setSlideBackground(slideBackgroundId, slideIconId);
        }

        Log.e("yushan", isOpen + ":" + slideBackgroundId + ":" + slideIconId);
    }

新增自定義屬性就這麼簡單。關鍵是自定義屬性補全了自定義View的實現，現在才算是想怎麼定義View就怎麼定義View。我們們繼續說完補全的這方面知識。

二、實現自定義按鈕(重點)

• 在程式碼中獲取自定義屬性算是初始化屬性，還要在程式碼中新增設定自定義屬性的方法

    /**
     * 設定按鈕圖片
     *
     * @param slideBackgroundId 滑塊的背景圖片
     * @param slideIconId       滑塊icon
     */
    public void setSlideBackground(int slideBackgroundId, int slideIconId) {
        slideBackground = BitmapFactory.decodeResource(getResources(), slideBackgroundId);
        slideIcon = BitmapFactory.decodeResource(getResources(), slideIconId);
        slideBackgroundWidth = slideBackground.getWidth();
        slideBackgroundHeight = slideBackground.getHeight();

        slideIconWidth = slideIcon.getWidth();
        slideIconHeight = slideIcon.getHeight();

        slideIconMaxLeft = slideBackgroundWidth - slideIconWidth;
    }

    /**
     * 設定開關按鈕的狀態
     *
     * @param state true為開啟，false為關閉
     */
    public void setState(boolean state) {
        if (state) {
            left = slideIconMaxLeft;
        } else {
            left = 0;
        }
        invalidate();
    }

• 測量控制元件，繪製控制元件

    /**
     * 測量View的寬和高
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        // 設定View的測量的寬和高，設定MyToggleButton的大小和滑塊背景圖片一樣的大小
        setMeasuredDimension(slideBackgroundWidth, slideBackgroundHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        // 把背景畫到ToggleButton的左上角
        canvas.drawBitmap(slideBackground, 0, 0, null);

        // 預防超出範圍
        if (left < 0) {
            left = 0;
        } else if (left > slideIconMaxLeft) {
            // 滑塊往右移動時，滑塊left的最大值 = 背景寬 – 滑塊寬
            left = slideIconMaxLeft;
        }

        Log.e("yushan", "" + left);
        canvas.drawBitmap(slideIcon, left, 0, null);
    }

• 監聽事件，實現邏輯

  @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 滑動的時候計算滑塊left = 觸控位置event.getX() – 滑塊寬 / 2
                left = event.getX() - slideIconWidth / 2;
                break;
            case MotionEvent.ACTION_MOVE:
                // 滑動的時候計算滑塊left = 觸控位置event.getX() – 滑塊寬 / 2
                left = event.getX() - slideIconWidth / 2;
                break;
            case MotionEvent.ACTION_UP:
                // 手指鬆開時，計算滑塊應該滑到最左邊，還是滑到最右邊：
                if (event.getX() < slideBackgroundWidth / 2) {
                    // 如果手指抬起的位置 < 背景寬 / 2，把滑塊滑到最左邊
                    left = 0;
                    mOnStateChangedListener.onStateChanged(false);
                } else {
                    // 否則滑到最右邊
                    left = slideIconMaxLeft;
                    mOnStateChangedListener.onStateChanged(true);
                }
                break;
        }
        invalidate();
        return true;
    }

到這裡我們們的自定義View與系統自帶的View功能就差不多了，可以在佈局中新增屬性，也可以在程式碼中新增屬性，如果都新增了則以就近原則為準。

• 新增狀態監聽，監聽按鈕狀態改變
  當然還少不了監聽了，這裡道長只新增了一個按鈕狀態監聽。程式碼如下：

    public void setOnStateChangedListener(OnStateChangedListener mOnStateChangedListener) {
        this.mOnStateChangedListener = mOnStateChangedListener;
    }

    /**
     * 狀態改變的監聽器
     */
    public interface OnStateChangedListener {
        /**
         * 狀態改變時，回撥方法
         *
         * @param state
         */
        void onStateChanged(boolean state);
    }

• 在HomeActivity中初始化並使用按鈕

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

        toggle_button = (CustomToggleButton) findViewById(R.id.toggle_button);

        toggle_button.setState(true);
        toggle_button.setSlideBackground(R.drawable.btn_bg, R.drawable.btn_icon);

        toggle_button.setOnStateChangedListener(new CustomToggleButton.OnStateChangedListener() {

            @Override
            public void onStateChanged(boolean state) {
                Toast.makeText(getApplicationContext(), state ? "開啟" : "關閉", Toast.LENGTH_SHORT).show();
            }
        });

    }

• 效果圖

最後在貼一張效果圖，道長使用PS切圖簡直好像拿著菜刀砍蚊子，大家將就這看看吧，等以後道長會弄動圖了再補上……

到這裡大家就可以隨意自定義View了，希望這篇部落格可以給你提供一些幫助。

原始碼下載

CustomProprety

---