toggleButton

自定義toggleButtong

版權聲明：轉載請保留原文連結及作者
最近剛好在寫UI順便記錄一下

效果

程式碼

• 程式碼分成兩類
• 圖片繪製
• 點擊事件

布局XML

• 直接打上自定義原件類別名就可

<com.togg.toggiebutton.CustomToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/tb_backround"
    android:id="@+id/view">

</com.togg.toggiebutton.CustomToggleButton>

onMeasure

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        //底層圖片
        backBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.tb_backround);
        //上層圖片
        overBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.slide_backround);
        //寬高和底層圖片一樣
        setMeasuredDimension(backBitmap.getWidth(), backBitmap.getHeight());
    }

onDraw

protected void onDraw(Canvas canvas) {


       //2.繪制上層圖片
       if (isTounching) {//上層圖片跟随滑動
           /**
            * * 防止上層圖片滑動出下層圖片的范围
            */
           //算出當前觸碰點為上層圖片的中心點時，上層圖片的左侧座標距離
           int left = currentX - overBitmap.getWidth() / 2;
           System.out.println(left + "left 數值" + currentX + "currentx");
           if (left < 0) {//防止左侧出界
               left = 0;
           } else if (left > backBitmap.getWidth() - overBitmap.getWidth()) {//防止右侧出界
               left = backBitmap.getWidth() - overBitmap.getWidth();
           }
           canvas.drawBitmap(overBitmap, left, 0, null);

       } else {//上層圖片直接跳到開或關的位置
           if (state) {
               //開
               canvas.drawBitmap(overBitmap, backBitmap.getWidth() - overBitmap.getWidth(), 0, null);

               listener.rightClick();
           } else {
               //關
               canvas.drawBitmap(overBitmap, 0, 0, null);
               listener.leftClick();

           }
       }
   }

onTouchEvent

public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //按下為true
                isTounching = true;
                //當前觸碰點的x座標
                currentX = (int) event.getX();
                break;
            case MotionEvent.ACTION_MOVE:
                isTounching = true;
                currentX = (int) event.getX();
                break;
            case MotionEvent.ACTION_UP:
                //抬起時觸碰狀態為false
                isTounching = false;
                currentX = (int) event.getX();
                break;
        }
        //觸碰點超過底層圖片的一半，則state為true,開的狀態
        state = currentX > backBitmap.getWidth() / 2;
        //重新繪制
        invalidate();
        return true;
    }

點擊

private topbarClickListener listener;

    public interface topbarClickListener {
        public void leftClick();

        public void rightClick();
    }

    public void setOntopbarClickListener(topbarClickListener listener) {
        this.listener = listener;
    }

MainActivity

CustomToggleButton cust = (CustomToggleButton) findViewById(R.id.view);
       cust.setOntopbarClickListener(new CustomToggleButton.topbarClickListener() {
           @Override
           public void leftClick() {
               Toast.makeText(MainActivity.this, "left click", Toast.LENGTH_SHORT).show();
           }

           @Override
           public void rightClick() {
               Toast.makeText(MainActivity.this,"right click",Toast.LENGTH_SHORT).show();
           }
       });

結尾

• 這個樣子可直接在你要使用的類 直接new就可以直接使用了
• 如果要使用各式各樣的開關 只需更改圖片 就可直接使用了
• 如果一個程式要使用多種開關 把onMeasure 裡面的底層 上層圖寫成外部輸入圖就可