自定義控件(模仿微信ToggleButton控件)

弄過android開發的都知道，系統有一個默認的ToggleButton，但很多人都覺得他很難看，當然也包括我。如果你感覺他不難看，那你就繼續使用系統的吧，這篇文章對你來說是多余的了。

今天來寫一個模仿微信的ToggleButton控件，是啊，模仿都是模仿"大家之作"，騰訊、360等等，也確實，他們設計出來的東西確實好看。

下面看效果圖打開狀態，關閉狀態

先奉獻上三張圖片的素材，打開背景圖，關閉背景圖，滑塊背景圖。這里背景圖高度是小於前兩個背景圖2個像素的。這樣才能出現最終的打開和關閉后的滑塊上下出現1個像素背景的效果。

開始我們的控件代碼，這里我們自定義一個ToggleButton控件，當然要繼承自View，下面貼出我的代碼

public class ToggleButton extends View {

    private Bitmap onBackgroundImage;
    private Bitmap offBackgroundImage;
    private Bitmap blockImage;
    private ToggleState state = ToggleState.Open;
    private int currentX;
    private int mouseDownX = -1;
    private boolean isMove = false;
    private ToggleState preState;
    private boolean isInvalidate = true;
     public ToggleButton(Context context) {
     super(context);
     // TODO Auto-generated constructor stub
     }

    
    private OnClickListener clickListener = null;

    /*
     * 其實應該是stateChange事件，懶得改了
     */
    public void SetOnClickListener(OnClickListener listener) {
        if (listener != null)
            clickListener = listener;
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        // TODO Auto-generated method stub
        super.onLayout(changed, left, top, right, bottom);
        //layout方法是在ondraw方法之前執行，
        //在這個做判斷是防止用戶在設置Image之前setState，
        //這樣Image為null，系統無法獲取block寬度，也就無法設置currentX坐標,
        //系統將采用默認Open狀態,會出現即使用戶設置狀態為close，而界面顯示仍未open狀態,
        //在這里判斷，是因為當前image和state肯定已經設置完畢了
        if (state == ToggleState.Open) {
            currentX = 2;
        } else {
            if (blockImage == null || offBackgroundImage == null || onBackgroundImage == null)
                return;
            currentX=offBackgroundImage.getWidth()-blockImage.getWidth()-2;
        }
    }
    public enum ToggleState {
        Open, Close
    }

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

    public void setOnBackgroundResource(int id) {

        onBackgroundImage = BitmapFactory.decodeResource(getResources(), id);
    }

    public void setOffBackgroundResource(int id) {
        offBackgroundImage = BitmapFactory.decodeResource(getResources(), id);

    }

    public void setState(ToggleState state) {
        preState = this.state = state;
        if (state == ToggleState.Open) {
            currentX = 2;
        } else {
            if (blockImage != null && offBackgroundImage != null)
                currentX = offBackgroundImage.getWidth() - blockImage.getWidth() - 2;
        }
        invalidate();
    }

    public ToggleState getState() {
        return state;
    }

    public void setBlockResource(int id) {
        blockImage = BitmapFactory.decodeResource(getResources(), id);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(onBackgroundImage.getWidth(), onBackgroundImage.getHeight());

    }

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        // 有效性判斷，如果其中有一個為空，拒絕繪制，繼續繪制也沒有意義
        if (blockImage == null || offBackgroundImage == null || onBackgroundImage == null)
            return;
        if ((currentX + blockImage.getWidth() / 2) > onBackgroundImage.getWidth() / 2) {
            canvas.drawBitmap(offBackgroundImage, 0, 0, null);
        } else {
            canvas.drawBitmap(onBackgroundImage, 0, 0, null);
        }
        canvas.drawBitmap(blockImage, currentX, 1, null);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        currentX = (int) event.getX();
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            // 記錄鼠標按下時的x
            mouseDownX = (int) event.getX();
            // 按下的時候不進行重繪
            isInvalidate = false;
            break;
        case MotionEvent.ACTION_MOVE:
            // 記錄鼠標發生了移動
            isMove = true;
            break;
        case MotionEvent.ACTION_UP:
            // 判斷鼠標按下和抬起過程中是否發生了移動
            // 鼠標抬起時，判斷當前x坐標位置
            if (isMove) {
                // 發生了移動，判斷當前位置
                if ((currentX + blockImage.getWidth() / 2) > onBackgroundImage.getWidth() / 2) {
                    // 背景圖的后半段
                    currentX = onBackgroundImage.getWidth() - blockImage.getWidth();
                    state = ToggleState.Close;
                } else {
                    // 背景圖的前半段
                    currentX = 2;
                    state = ToggleState.Open;
                }
            } else {
                // 沒有發生移動,即為點擊事件，更改狀態，同時改變滑塊位置
                if (state == ToggleState.Open) {
                    state = ToggleState.Close;
                    currentX = onBackgroundImage.getWidth() - blockImage.getWidth() - 2;
                } else {
                    state = ToggleState.Open;
                    currentX = 2;
                }
            }
            // 復位，以免影響下一次的觸摸事件
            isMove = false;
            if (preState != state && clickListener != null) {
                clickListener.onClick(this);
                preState = state;
            }
            break;
        }
        if (currentX < 2)
            currentX = 2;
        if (currentX + blockImage.getWidth() >= onBackgroundImage.getWidth())
            currentX = onBackgroundImage.getWidth() - blockImage.getWidth() - 2;
        // 通知控件繪制
        if (isInvalidate)
            invalidate();
        else
            isInvalidate = true;
        return true;
    }

}

代碼里的注釋夠多吧，哈哈，所以就不進行講解了。

接下來我們在activity布局文件里面使用這個ToggleButton 控件

<包名.ToggleButton 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/testToggleButton"
        />

我們在activity里面使用吧

final ToggleButton toggle=(ToggleButton) findViewById(R.id.testToggleButton);
        toggle.setState(ToggleState.Close);
        toggle.setOnBackgroundResource(R.drawable.on);
        toggle.setOffBackgroundResource(R.drawable.off);
        toggle.setBlockResource(R.drawable.block);
        
        toggle.SetOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                String state=(toggle.getState()==ToggleState.Open?"打開":"關閉");
                Toast.makeText(MainActivity.this, "當前狀態:"+state, Toast.LENGTH_SHORT).show();
            }
        });

注意啊，我上面的一行代碼的位置

toggle.setState(ToggleState.Close);

設置狀態這行代碼放在了設置圖片之前，但效果仍然是關閉狀態。

但ToggleButton里面如果不重寫OnLayout方法，顯示出來的狀態就只能是打開狀態。