自定義可滑動的按鈕

自定義實現可滑動的按鈕

實現邏輯

1. 創建一個類繼承view類,實現裏面的onMeasure() onDraw()方法
2. 在 onMeasure() 中需要調用setMeasuredDimension(viewWidth,viewheight),用來繪製按鈕的位置區域
3. 需要加載按鈕的背景和滑塊資源 並且轉化爲bitmap對象
4. 獲取背景圖片的寬和高作爲自定義控件的寬和高
5. 獲取滑塊的寬度,用來調整按鈕的開和關
6. 在onDraw()方法中繪製出背景圖片和滑塊,並展示在頁面中
7. 創建一個觸摸事件,用來監聽按鈕所在的位置
8. 創建drawSlide方法,用來限制滑塊的運行區間,防止滑塊劃出指定的區域,並限制按鈕只有兩個結果,開和關
9. 根據drawSlide方法得到開關的結果,設置開關的狀態
10. 根據開關的狀態設置開關中滑塊的位置
11. 設置一個回調接口,用來監聽按鈕的狀態是否發生改變

佈局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="com.example.a3_.MainActivity">

<com.example.a3_.MyToggleButton
    android:id="@+id/myToggle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<com.example.a3_.MyToggleButton
    android:id="@+id/myToggle2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
</LinearLayout>

核心代碼

package com.example.a3_;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

private MyToggleButton toggleButton;
private MyToggleButton toggleButton2;

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

    //初始化控件
    toggleButton = (MyToggleButton) findViewById(R.id.myToggle);
    //設置按鈕的狀態
    toggleButton.setToggleStste(true);
    //創建一個監聽
    MyListener myListener = new MyListener();
    //設置監聽
    toggleButton.setOnToggleStateChangedListener(myListener);

    //初始化控件
    toggleButton2 = (MyToggleButton) findViewById(R.id.myToggle2);
    //設置按鈕的狀態
    toggleButton2.setToggleStste(true);
    //創建一個監聽
    MyListener myListener2 = new MyListener();
    //設置監聽
    toggleButton2.setOnToggleStateChangedListener(myListener2);

}

//創建一個監聽
class MyListener implements MyToggleButton.onToggleStateChangedListener {

    @Override
    public void onToggleStateChange(MyToggleButton button, boolean isToggleOn) {

        //判定是哪個按鈕觸發了監聽
        switch (button.getId()) {
            case R.id.myToggle:
                Toast.makeText(MainActivity.this, isToggleOn ? "開1" : "關1", Toast.LENGTH_SHORT).show();
                break;
            case R.id.myToggle2:
                Toast.makeText(MainActivity.this, isToggleOn ? "開2" : "關2", Toast.LENGTH_SHORT).show();
        }

    }
}
}

自定義控件代碼

package com.example.a3_;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * Created by Administrator on 2017.05.27.0027.
 */

public class MyToggleButton extends View {

private Bitmap bgBitmap;
private Bitmap slidebg;
private final int viewWidth;
private final int viewheight;
private float slidebgleft;
private final int slideWidth;
private final int slideMaxLeft;
//設置一個成員變量,用來判定開關的狀態
private boolean toggleStste = false;
private boolean canChangeToggleState = false;

private onToggleStateChangedListener monToggleStateChangedListener = null;

//創建一個開關狀態改變的監聽,當狀態改變時觸發,否則不觸發
public void setOnToggleStateChangedListener(onToggleStateChangedListener monToggleStateChangedListener) {
    this.monToggleStateChangedListener = monToggleStateChangedListener;
}


public MyToggleButton(Context context, AttributeSet attrs) {
    super(context, attrs);
    //設置按鈕的背景和滑塊資源
    setBackgroundAndSlideResource(R.mipmap.toogle_background, R.mipmap.toogle_slidebg);
    //獲取背景的高度和寬度
    viewWidth = bgBitmap.getWidth();
    viewheight = bgBitmap.getHeight();
    //背景的寬和高就是這個自定義按鈕的寬和高
    //獲取滑塊的寬度
    slideWidth = slidebg.getWidth();
    //計算滑塊的右邊最大值
    slideMaxLeft = viewWidth - slideWidth;
}

//定義一個方法,用來顯示按鈕是開還是關
public void setToggleStste(boolean toggleStste) {
    this.toggleStste = toggleStste;
    if (toggleStste) {
        slidebgleft = slideMaxLeft;
    } else {
        slidebgleft = 0;
    }
    //重新繪製
    invalidate();
}

//設置按鈕的背景和滑塊資源
private void setBackgroundAndSlideResource(int toogle_background, int toogle_slidebg) {
    bgBitmap = BitmapFactory.decodeResource(getResources(), toogle_background);
    slidebg = BitmapFactory.decodeResource(getResources(), toogle_slidebg);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    //調用setMeasuredDimension繪製按鈕的區域
    setMeasuredDimension(viewWidth, viewheight);
}

@Override
protected void onDraw(Canvas canvas) {

    //重寫drawBitmap,將控件的背景和滑塊繪製到頁面中
    canvas.drawBitmap(bgBitmap, 0, 0, null);
    drawSlide(canvas);

}

//通過控制slidebgleft,來控制滑塊的位置
private void drawSlide(Canvas canvas) {
    //限制滑塊的運行區間,防止滑塊移動到界外
    if (slidebgleft < 0) {
        slidebgleft = 0;
    } else if (slidebgleft > slideMaxLeft) {
        slidebgleft = slideMaxLeft;
    }
    canvas.drawBitmap(slidebg, slidebgleft, 0, null);
    if (canChangeToggleState) {
        canChangeToggleState = false;
        //記錄上一次開關的狀態
        boolean lastToggleState = toggleStste;
        //根據當前滑塊的位置更新開關的狀態
        if (slidebgleft == 0) {
            toggleStste = false;
        } else {
            toggleStste = true;
        }

        //如果當前的狀態與上一次狀態不同時,纔會觸發監聽事件
        if (lastToggleState != toggleStste && monToggleStateChangedListener != null) {
            monToggleStateChangedListener.onToggleStateChange(this, toggleStste);
        }
    }
}

//設置按鈕的觸摸事件
@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            slidebgleft = event.getX() - slideWidth / 2;
            break;
        case MotionEvent.ACTION_MOVE:
            slidebgleft = event.getX() - slideWidth / 2;
            break;
        case MotionEvent.ACTION_UP:
            if (event.getX() > viewWidth / 2) {
                slidebgleft = slideMaxLeft;
            } else {
                slidebgleft = 0;
            }
            //只有當手機離開屏幕的是否纔可以觸發監聽
            canChangeToggleState = true;
            break;
    }
    //重複不斷地繪製
    invalidate();
    return true;
}

interface onToggleStateChangedListener {
    void onToggleStateChange(MyToggleButton button, boolean isToggleOn);
}
}