自定义ToggleButton

很久之前就想写博客对自己的过去进行总结，由于个人比较懒这一原因而导致一直都未开始。现在鼓起勇气，克服这一懒惰心理开始写下第一篇博文。另外个人也是技术比较差，有什么写得不够好，不够详细的请各位同学多多指出，我将逐一改正。
好了，下面开始我们的自定义ToggleButton。那么我们先上图
首先ToggleButton这个view控件由一张可拖动，可点击的小圆点和背景图组成。
上代码： 那么我们开始代码实战，逐一解析

package com.example.togglebutton;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Paint;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;import android.view.View.OnClickListener;public class MyToggleButton extends View implements OnClickListener {    // 背景图    private Bitmap backgroundBitmap;    // 拖动的button    private Bitmap slideBtn;    private Paint paint;    private float slideBtn_left;    // slideBtn的状态    private boolean currState = false;    // 是否为拖动状态    private boolean isDrag = false;    public MyToggleButton(Context context) {        super(context);    }    public MyToggleButton(Context context, AttributeSet attrs) {        super(context, attrs);        initView();        initData();        initListener();    }    private void initView() {        backgroundBitmap = BitmapFactory.decodeResource(getResources(),                R.drawable.radio_i);        slideBtn = BitmapFactory.decodeResource(getResources(),                R.drawable.radio_slider_big);    }    private void initData() {        paint = new Paint();        paint.setAntiAlias(true);    }    private void initListener() {        setOnClickListener(this);    }    @Override    /**     * 设置view的测量值     */    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        setMeasuredDimension(backgroundBitmap.getWidth(),                backgroundBitmap.getHeight());    }    @Override    protected void onDraw(Canvas canvas) {        // draw背景        canvas.drawBitmap(backgroundBitmap, 0, 0, paint);        // draw拖动的按钮        canvas.drawBitmap(slideBtn, slideBtn_left, 2, paint);    }    @Override    /**     * 完整的一次down和up就是onclick事件     */    public void onClick(View v) {        if (!isDrag) {            currState = !currState;            flushState();        }    }    private int firstX;    private int lastX;    @Override    public boolean onTouchEvent(MotionEvent event) {        super.onTouchEvent(event);        switch (event.getAction()) {        case MotionEvent.ACTION_DOWN:            firstX = (int) event.getX();            isDrag = false;            break;        case MotionEvent.ACTION_MOVE:            lastX = (int) event.getX();            int distance = (int) (lastX - firstX);            if (Math.abs(distance) > 5) {// 如果移动距离超过5，则认为拖动了按钮                isDrag = true;            }            slideBtn_left = slideBtn_left + distance;            firstX = lastX;            break;        case MotionEvent.ACTION_UP:// 不管是onclick还是拖动都会触发up事件，所以在这里设置view的最终状态即可            if (isDrag) {                int maxLeft = backgroundBitmap.getWidth() - slideBtn.getWidth();                if (slideBtn_left > maxLeft / 2) {// 如果拖动的距离超过可拖动距离的一半                    currState = true;                } else {                    currState = false;                }                flushState();            }            break;        }        // move与up事件时刷新view        refreshView();        return true;    }    private void flushState() {        if (currState) {            slideBtn_left = backgroundBitmap.getWidth() - slideBtn.getWidth();        } else {            slideBtn_left = 0;        }        refreshView();        switchChangedListener.currState(this, currState);    }    private void refreshView() {        int maxLeft = backgroundBitmap.getWidth() - slideBtn.getWidth();        slideBtn_left = (slideBtn_left > 0) ? slideBtn_left : 0;        slideBtn_left = (slideBtn_left < maxLeft) ? slideBtn_left : maxLeft;        invalidate();    }    private MySwitchChangedListener switchChangedListener;    public interface MySwitchChangedListener {        void currState(View view, boolean state);    }    // 注册回调    public void setOnSwitchChangedListener(            MySwitchChangedListener switchChangedListener) {        this.switchChangedListener = switchChangedListener;    }}

ToggleButton使用时就是可点击，可拖动。
那么我们先在构造方法中初始化2张图，再初始化画笔paint，再对该view（ToggleButton）注册单击事件，仿照SDK原生的togglebutton，再复写onTouchEvent方法监听3种事件down，move，up。

首先draw背景图是不变的，我们只需要draw小圆点的位置

onclick时，比较简单，小圆点要么在整个view的最左边，要么在最右边。关键是这个draw图的距离 算好 即可。

捕捉移动事件：
down时，我们只需要记录初始时的X坐标，以及设置为非拖动状态。
move时，如果移动的距离超过5我们则认为拖动了小圆点，获取拖动的距离再从新绘制一遍view即可，设置为拖动状态。
up时，如果触发过move事件则不是onclick事件，注意：一次onclick就是完整的一次down和up组成，中间不包含move事件。onclick事件这个是比较好绘制的，如果触发过move时可能有点困难，这里可以取的distance其实是背景图的width减去小圆点的width这段距离，如上图。当拖动的距离超过这段距离的一半时，我们就在up这边直接设置小圆点到view的最左边或者最右边。

好了，其实就那么多东西了，还有就是在添加一个回调接口返回开关的状态。回调也即是设计模式中的观察者模式，在Android中很多地方都有用到，这个是必须要掌握的。

最后在xml布局文件中引用该view

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <com.example.togglebutton.MyToggleButton        android:id="@+id/toggle"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:text="开关状态" /></RelativeLayout>

还需要在Activity中注册togglebutton的切换监听

第一次写文章，文章写得很丑，很多功能都还不知道，以后再慢慢改进。今天就到这了！

源码点击下载