Android自定義控制元件實現簡單滑動開關效果

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:itheima="http://schemas.android.com/apk/res/com.itheima.togglebuttondemo"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    <com.itheima.togglebuttondemo.view.ToggleButton
        android:id="@+id/togglebutton"
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        itheima:SwitchBtnBackgroud="@drawable/switch_background"
        itheima:SlidBtnBackgroud="@drawable/slide_button_background"
        itheima:CurrentState="false"
        android:layout_height="wrap_content"/>
</RelativeLayout>

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

    <declare-styleable name="ToggleButton">
        <!-- 滑動開關背景圖片屬性-->
        <attr
            name="SwitchBtnBackgroud"
            format="reference"/>
        <!-- 滑動塊背景圖片屬性-->
        <attr
            name="SlidBtnBackgroud"
            format="reference"/>
        <!-- 滑動開關的狀態-->
        <attr
            name="CurrentState"
            format="boolean"/>
    </declare-styleable>
</resources>

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ToggleButton togglebutton = (ToggleButton) findViewById(R.id.togglebutton);
        //設定滑動開關的背景圖片
        // togglebutton.setSwitchBtnBackgroudResource(R.drawable.switch_background);
        //設定滑動塊的背景圖片
        // togglebutton.setSlidBtnBackgroudResource(R.drawable.slide_button_background);
        //設定滑動開關的預設狀態
        // togglebutton.setCurrentState(true);
        //設定滑動開關狀態改變監聽
        Togglebutton.setToggleBtnStateChangeListener(new ToggleBtnStateChangeListener() {
            @Override
            public void onToggleBtnStateChange(boolean currentState) {
                if (currentState) {
                    Toast.makeText(getApplicationContext(), "開關開啟", 0).show();
                }else{
                    Toast.makeText(getApplicationContext(), "開關關閉", 0).show();
                }
            }
        });
    }
}

public class ToggleButton extends View {
    private Bitmap  switchBitmap;//滑動開關的背景圖片
    private Bitmap  slidBitmap;//滑動塊的背景圖片
    private boolean currentState;
    private int     currentX;//手指觸控點的X 值
    private boolean isTouching = false;
    private ToggleBtnStateChangeListener mToggleBtnStateChangeListener;//狀態改變監聽器
    //在xml 中參照該控制元件時，呼叫該方法
    public ToggleButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        String namespace = "http://schemas.android.com/apk/res/com.itheima.togglebuttondemo";
        currentState = attrs.getAttributeBooleanValue(namespace, "CurrentState", false);
        int switchBtnBackgroudId =
                attrs.getAttributeResourceValue(namespace, "SwitchBtnBackgroud", -1);
        int slidBtnBackgroudId =
                attrs.getAttributeResourceValue(namespace, "SlidBtnBackgroud", -1);
        setSwitchBtnBackgroudResource(switchBtnBackgroudId);
        setSlidBtnBackgroudResource(slidBtnBackgroudId);
    }
    //在程式碼中建立該控制元件時，呼叫該構造方法
    public ToggleButton(Context context) {
        super(context);
    }
    //設定滑動開關的背景圖片
    public void setSwitchBtnBackgroudResource(int switchBackground) {
        switchBitmap = BitmapFactory.decodeResource(getResources(), switchBackground);
    }
    // 為了可以高度自定義和增強可延伸性，我們可以給其建立一個自定義控制元件底部背景了一個方法
    // 設定滑動塊的背景圖片
    public void setSlidBtnBackgroudResource(int slideButtonBackground) {
        slidBitmap = BitmapFactory.decodeResource(getResources(), slideButtonBackground);
    }
    //設定滑動開關的預設狀態
    public void setCurrentState(boolean b) {
        currentState = b;
    }
    // 1、測量滑動開關的寬高
    // 測量控制元件的寬高
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(switchBitmap.getWidth(), switchBitmap.getHeight());
    }
    // 2、繪製，畫出我們的滑動開關
    //canvas:畫布，將圖形繪製在canvas，才能顯示到螢幕上
    @Override
    protected void onDraw(Canvas canvas) {
        //繪製滑動開關的背景圖片
        canvas.drawBitmap(switchBitmap, 0, 0, null);
        //繪製滑動塊的背景圖片
        if(isTouching){//手指觸控的時候，根據currentx 的值來繪製滑動塊
            //根據手指的X 值，來繪製滑動塊圖片
            int left = currentX - slidBitmap.getWidth()/2;
            if(left < 0){//設定左邊界
                left = 0;
            }else if(left > (switchBitmap.getWidth() - slidBitmap.getWidth())){//設定右邊界
                left = switchBitmap.getWidth() - slidBitmap.getWidth();
            }
            canvas.drawBitmap(slidBitmap, left, 0, null);
        }else{ // 手指離開控制元件的時候，根據狀態來繪製滑動塊
            // 根據狀態值，來繪製滑動塊
            if(currentState){ //當前為true，開關開啟，滑動塊顯示在最右邊
                canvas.drawBitmap(slidBitmap,switchBitmap.getWidth() - slidBitmap.getWidth(),
                        0, null);
            }else{//當前為false，開關關閉，滑動塊顯示在最左邊
                canvas.drawBitmap(slidBitmap, 0, 0, null);
            }
        }
    }
    //當控制元件被觸控後，會呼叫該方法
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN://手指按下
                isTouching = true;
                currentX = (int) event.getX();
                break;
            case MotionEvent.ACTION_MOVE://手指滑動
                isTouching= true;
                currentX = (int) event.getX();
                break;
            case MotionEvent.ACTION_UP://手指擡起
                isTouching = false;
                currentX = (int) event.getX();
                int center = switchBitmap.getWidth()/2;
                //當滑動塊中心點大於滑動開關背景圖片的中心線時，顯示到右邊，當前狀態為true
                boolean state = currentState;
                currentState = currentX > center;
                if(mToggleBtnStateChangeListener !=null&&state != currentState ){
                    mToggleBtnStateChangeListener.onToggleBtnStateChange(currentState);
                }
                break;
            default:
                break;
        }
        invalidate(); //強制讓控制元件重新繪製，ondraw；
        return true; //自己處理觸控事件
    }
    public void setToggleBtnStateChangeListener(ToggleBtnStateChangeListenerlistener){
        this.mToggleBtnStateChangeListener = listener;
    }
    // 定義滑動開關狀態改變的回撥介面
    public interface ToggleBtnStateChangeListener{
        void onToggleBtnStateChange(boolean currentState);
    }
}