自定义开关按钮

1.定义一个类ToggleButton，继承View 

2.在布局文件中使用该自定义view  

3.创建与父类相同的构造器。 

4.重写onMesuer和onDraw方法

5.在自定义ToggleButton中定义设置开关按钮图片方法，设置开关按钮背景方法 

6.在MainActivity类中使用该view，给该自定义view设置背景图片和按钮图片

具体实现代码如下： 

自定义ToggleButton

package cn.ning.test.toggledemo.view;

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;

/**
 * ==================================================================
 * <p/>
 * 项  目  名  称：  ToggleDemo
 * <p/>
 * 包    名：  cn.ning.test.toggledemo.view
 * <p/>
 * 文   件   名：   ToggleButton
 * <p/>
 * 版    权：
 * <p/>
 * 作    者 ：宁显宏
 * <p/>
 * 版    本 ：1.0
 * <p/>
 * 创 建 日 期 ： 2015/9/19    14:13.
 * <p/>
 * 描    述 ：完成一个自定义的开关按钮
 * <p/>
 * <p/>
 * 修 订 历 史：
 * <p/>
 * ==================================================================
 */
public class ToggleButton extends View {
    private Bitmap mSlideBackgroundResource;
    private ToggleState toggleState = ToggleState.Open;//开关状态
    private Bitmap mSwitchBackground;

    private int currentX;//当前触摸点坐标
    private boolean isSliding = false;
    private int centerx;

    /**
     * 动态创建view时使用
     *
     * @param context
     */
    public ToggleButton(Context context) {
        super(context);
    }

    /**
     * 如果view只是在布局文件中使用，只需要重写该构造方法
     *
     * @param context
     * @param attrs
     */
    public ToggleButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ToggleButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    /**
     * 设置滑动块的背景图片
     *
     * @param slideBackgroundResource
     */
    public void setSlideBackgroundResource(int slideBackgroundResource) {
        mSlideBackgroundResource = BitmapFactory.decodeResource(getResources(), slideBackgroundResource);
    }

    /**
     * 设置滑动开关的背景图片
     *
     * @param switch_background
     */
    public void setSwitchBackgroundResource(int switch_background) {
        mSwitchBackground = BitmapFactory.decodeResource(getResources(), switch_background);
    }

    public void setToggleState(ToggleState state) {
        toggleState = state;
    }

    /**
     * 开关的状态
     */
    public enum ToggleState {
        Open, Close
    }

    /**
     * 设置控件在屏幕上显示的宽高
     *
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(mSwitchBackground.getWidth(), mSwitchBackground.getHeight());
    }

    /**
     * 绘制自定义view在屏幕上显示的样子
     *
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制背景图片
        /**
         * @param  mSwitchBackground  绘制的背景图片
         * @param  left 图片的左边的x坐标
         * @param  top  图顶部的y坐标
         * @param paint 画笔  绘制图片不需要画笔
         */
        canvas.drawBitmap(mSwitchBackground, 0, 0, null);
        //绘制滑动块图片
        if (isSliding) {
            int left = currentX - mSlideBackgroundResource.getWidth() / 2;    //控制滑动块与滑块重合
            if (left < 0) {
                left = 0;
            }
            if (left > mSwitchBackground.getWidth() - mSlideBackgroundResource.getWidth()) {
                left = mSwitchBackground.getWidth() - mSlideBackgroundResource.getWidth();
            }
            canvas.drawBitmap(mSlideBackgroundResource, currentX, 0, null);
        } else {
            if (toggleState == ToggleState.Open) {
                canvas.drawBitmap(mSlideBackgroundResource,
                        mSwitchBackground.getWidth() - mSlideBackgroundResource.getWidth(),
                        0, null);
            } else {
                canvas.drawBitmap(mSlideBackgroundResource, 0, 0, null);
            }
        }
       /* if (toggleState == ToggleState.Open) {
            canvas.drawBitmap(mSlideBackgroundResource,
                    mSwitchBackground.getWidth() - mSlideBackgroundResource.getWidth(),
                    0, null);
        } else {
            canvas.drawBitmap(mSlideBackgroundResource, 0, 0, null);
        }*/


    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        currentX = (int) event.getX();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                isSliding = true;
                break;
            case MotionEvent.ACTION_MOVE:
                break;
            case MotionEvent.ACTION_UP:
                isSliding = false;
                centerx = mSwitchBackground.getWidth() / 2;
                if (currentX > centerx) {
                    toggleState = ToggleState.Open;
                } else {
                    toggleState = ToggleState.Close;
                }

                if (listener != null){
                    listener.onToggleStateChangeState(toggleState);
                }

                break;
        }
        invalidate();//重绘view
        return true;
    }


    private  OnToggleStateChangeListener  listener;
    public  void setOnToggleStateChangeListener(OnToggleStateChangeListener  listener){
        this.listener = listener;
    }
    public interface OnToggleStateChangeListener{
        void onToggleStateChangeState(ToggleState state);
    }
}

布局文件如下

<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"
                tools:context=".MainActivity">

    <cn.ning.test.toggledemo.view.ToggleButton
        android:id="@+id/toggleButton"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>

MainActivity代码如下  

package cn.ning.test.toggledemo;

import android.app.Activity;
import android.os.Bundle;

import cn.ning.test.toggledemo.view.ToggleButton;

public class MainActivity extends Activity {
    private ToggleButton toggleButton;

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

    private void initView() {
        toggleButton = (ToggleButton) this.findViewById(R.id.toggleButton);
        toggleButton.setSlideBackgroundResource(R.mipmap.slide_button_background);
        toggleButton.setSwitchBackgroundResource(R.mipmap.switch_background);
        toggleButton.setToggleState(ToggleButton.ToggleState.Open);
    }
}

使用到的图片资源