自定义可滑动的按钮

自定义实现可滑动的按钮

实现逻辑

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);
    }
    }