Android 自定义简洁高效SwithButton（画图方式实现）

虽然有很多开源的，但还是不如自己做的定制性强，最起码自己最清楚。。哈哈。，简约的风格我也很喜欢，使用也很方便。

先看一下效果

自定义属性文件

values下面的attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="customSwith">
        <attr name="lineCheckedColor" format="color"></attr><!-- 中间线条颜色 -->
        <attr name="lineUnCheckedColor" format="color"></attr><!-- 没有选中时中间线条颜色 -->
        <attr name="lineHeight" format="dimension"></attr><!-- 中间线条高度 -->
        <attr name="innerCheckedBroderColor" format="color" /><!-- 里面按钮边框选中颜色 -->
        <attr name="innerUnCheckedBroderColor" format="color" /><!-- 里面按钮边框未选中状态 -->
        <attr name="innerBroderWidth" format="dimension" /><!-- 里面按钮边框宽度 -->
        <attr name="btnCheckedColor" format="color" /><!-- 按钮选中颜色 -->
        <attr name="btnUnCheckedColor" format="color" /><!-- 按钮没有选中颜色 -->
        <attr name="innerPadding" format="dimension" /><!-- 按钮没有选中颜色 -->
    </declare-styleable>

</resources>

控件的实现方式

CustomSwitch.java

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.os.Handler;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewTreeObserver;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.CompoundButton;

/**
 * 自定义Switch
 * 
 * @author edhlily@163.com
 * 
 */
public class CustomSwitch extends CompoundButton implements OnTouchListener, OnGlobalLayoutListener {
    private static final String TAG = "Switch";

    private int currentClickFlag = 0;// 避免一次按钮滑动没有完成又点击一次造成冲突
    private Paint paint;
    private int width; // 控件宽度
    private int height; // 高度
    private float startPosition; // 按钮起点位置
    private float endPosition; // 按钮终点位置
    private int btnWidth; // 按钮高度
    private float nowX; // 按钮当前位置
    private float preX;// 按钮点击之前的位置，用于再手指抬起时候做判断（因为手指点击的时候nowX就改变了）
    private boolean isChecked = true; // 按钮是否被选中

    int lineCheckedColor;// 中间线条颜色
    int lineUnCheckedColor;// 没有选中时中间线条颜色
    int lineHeight;// 中间线条高度
    int innerCheckedBroderColor;// 里面按钮边框选中颜色
    int innerUnCheckedBroderColor;// 里面按钮边框未选中状态
    int innerBroderWidth;// 里面按钮边框宽度
    int btnCheckedColor;// 按钮选中颜色
    int btnUnCheckedColor;// 按钮没有选中颜色
    int innerPadding;

    private Rect lineRect; // 中间线

    private RectF buttonRect; // 按钮外面的圆范围
    private RectF buttonInnerRect; // 按钮里面的圆范围

    public CustomSwitch(Context context) {
	super(context);
	init();
    }

    public CustomSwitch(Context context, AttributeSet attrs) {
	super(context, attrs);
	TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.customSwith);
	lineCheckedColor = a.getColor(R.styleable.customSwith_lineCheckedColor, Color.parseColor("#00000000"));// 选中时中间线条颜色
	lineUnCheckedColor = a.getColor(R.styleable.customSwith_lineUnCheckedColor, Color.parseColor("#00000000"));// 没有选中时中间线条颜色
	lineHeight = a.getDimensionPixelSize(R.styleable.customSwith_lineHeight, 0);// 中间线条高度
	innerCheckedBroderColor = a.getColor(R.styleable.customSwith_innerCheckedBroderColor, Color.parseColor("#00000000"));// 里面按钮边框选中颜色
	innerUnCheckedBroderColor = a.getColor(R.styleable.customSwith_innerUnCheckedBroderColor, Color.parseColor("#00000000"));// 里面按钮边框未选中状态
	innerBroderWidth = a.getDimensionPixelSize(R.styleable.customSwith_innerBroderWidth, 0);// 里面按钮边框宽度
	btnCheckedColor = a.getColor(R.styleable.customSwith_btnCheckedColor, Color.parseColor("#2ECC71"));// 按钮选中颜色
	btnUnCheckedColor = a.getColor(R.styleable.customSwith_btnUnCheckedColor, Color.parseColor("#BDC3C7"));// 按钮没有选中颜色
	innerPadding = a.getDimensionPixelSize(R.styleable.customSwith_innerPadding, 0);// 里面按钮边框的距离
	init();
    }

    public void init() {
	paint = new Paint();
	paint.setAntiAlias(true);// 抗锯齿效果
	setOnTouchListener(this);
	ViewTreeObserver vo = this.getViewTreeObserver();
	vo.addOnGlobalLayoutListener(this);
    }

    @Override
    public void onGlobalLayout() {
	width = getWidth();
	height = getHeight();
	btnWidth = height - getPaddingTop() - getPaddingBottom(); // 按钮宽度距控件上下5个单位
	startPosition = getPaddingLeft() + innerPadding;
	endPosition = width - btnWidth - getPaddingRight() - innerPadding; // 终点位置
	lineRect = new Rect(btnWidth / 2 + getPaddingLeft(), (height - lineHeight) / 2, width - btnWidth / 2 - getPaddingRight(), (height + lineHeight) / 2); // 画线的矩形
	if (isChecked) {
	    nowX = endPosition;
	    buttonRect = new RectF(endPosition, getPaddingTop() + innerPadding, btnWidth + endPosition, height - getPaddingBottom() - innerPadding); // 外面按钮的矩形
	} else {
	    nowX = startPosition;
	    buttonRect = new RectF(startPosition, getPaddingTop() + innerPadding, btnWidth + startPosition, height - getPaddingTop() - innerPadding); // 外面按钮的矩形
	}
	Log.d(TAG, "innerBroderWidth :" + innerBroderWidth);
	buttonInnerRect = new RectF(buttonRect.left + innerBroderWidth, buttonRect.top + innerBroderWidth, buttonRect.right - innerBroderWidth, buttonRect.bottom - innerBroderWidth);// 里面按钮的矩形
	invalidate();
    }

    /**
     * 设置按钮是否被选中
     */
    public void setChecked(boolean isChecked) {
	Log.d(TAG, "isChecked :" + isChecked);
	this.isChecked = isChecked;
	if (isChecked) {
	    nowX = endPosition;
	} else {
	    nowX = startPosition;
	}
	dX = 0;
	invalidate();
    }

    /**
     * 获取按钮选中状态
     */
    public boolean isChecked() {
	return isChecked;
    }

    /**
     * 状态改变监听
     */
    OnCheckedChangeListener changeListener;

    public void setOnCheckedChangeListener(OnCheckedChangeListener changeListener) {
	this.changeListener = changeListener;
    }

    @Override
    protected void onDraw(Canvas canvas) {
	super.onDraw(canvas);
	buttonRect.left = nowX + dX;
	buttonRect.right = nowX + dX + btnWidth;
	buttonInnerRect.left = buttonRect.left + innerBroderWidth;
	buttonInnerRect.right = buttonRect.right - innerBroderWidth;
	Log.d(TAG, "isRight :" + isRight() + "nowX : " + nowX);
	if (isRight()) {
	    paint.setColor(lineCheckedColor);
	    canvas.drawRect(lineRect, paint);
	    paint.setColor(innerCheckedBroderColor);
	    canvas.drawOval(buttonRect, paint);
	    paint.setColor(btnCheckedColor);
	    canvas.drawOval(buttonInnerRect, paint);
	} else {
	    paint.setColor(lineUnCheckedColor);
	    canvas.drawRect(lineRect, paint);
	    paint.setColor(innerUnCheckedBroderColor);
	    canvas.drawOval(buttonRect, paint);
	    paint.setColor(btnUnCheckedColor);
	    canvas.drawOval(buttonInnerRect, paint);
	}
    }

    /**
     * 检查当前按钮的是否被选中
     */
    public boolean isRight() {
	return nowX + dX > (width - btnWidth) / 2;
    }

    /**
     * 检查触摸是否超出范围
     */
    public int isOut(float x) {
	boolean b1 = x >= 0;
	boolean b2 = x <= width - btnWidth;
	if (b1 && b2) {
	    return 0;
	} else if (!b1) {
	    return -1;
	} else {
	    return 1;
	}
    }

    /**
     * 检查按钮状态
     */
    public int getBtnStatus(float x) {
	if (x < (width - btnWidth) / 2) {
	    return -1; // 左边
	} else {
	    return 1; // 右边
	}
    }

    public float downX;
    public float dX;

    @Override
    public boolean onTouch(View v, MotionEvent event) {
	float x = event.getX();
	int outCode = 0;
	switch (event.getAction()) {
	case MotionEvent.ACTION_DOWN:
	    preX = nowX;
	    downX = event.getX();
	    outCode = isOut(downX - btnWidth / 2);
	    if (outCode == 0) {
		nowX = downX - btnWidth / 2;
	    } else if (outCode == -1) {
		nowX = startPosition;
	    } else {
		nowX = endPosition;
	    }
	    break;
	case MotionEvent.ACTION_MOVE:
	    dX = x - downX;
	    outCode = isOut(nowX + dX);
	    if (outCode == 0) {

	    } else if (outCode == -1) {
		dX = 0;
		nowX = startPosition;
	    } else {
		dX = 0;
		nowX = endPosition;
	    }
	    invalidate();
	    break;
	case MotionEvent.ACTION_CANCEL:
	case MotionEvent.ACTION_UP:
	    currentClickFlag++;
	    nowX += dX;
	    boolean tChecked = false;
	    if (Math.abs(dX) < 3) {
		dX = 0;
		if (getBtnStatus(preX) < 0) {
		    scroll(nowX, endPosition, 1, currentClickFlag);
		    tChecked = true;
		} else {
		    scroll(nowX, startPosition, -1, currentClickFlag);
		    tChecked = false;
		}
	    } else {
		dX = 0;
		if (getBtnStatus(nowX) < 0) {
		    scroll(nowX, startPosition, -1, currentClickFlag);
		    tChecked = false;
		} else {
		    scroll(nowX, endPosition, 1, currentClickFlag);
		    tChecked = true;
		}
	    }
	    if (tChecked != isChecked) {
		isChecked = tChecked;
		if (changeListener != null)
		    changeListener.onCheckedChanged(this, isChecked);
		Log.e(TAG, "isChecked : " + isChecked);
	    }
	    break;
	}
	return true;
    }

    public void scroll(final float scrollStart, final float scrollEnd, final int status, final int flag) {
	handler.postDelayed(new Runnable() {
	    @Override
	    public void run() {
		if (currentClickFlag != flag) {
		    return;
		}
		if (status == 1 && nowX < endPosition) {
		    nowX += 5;
		    if (nowX > endPosition) {
			nowX = endPosition;
		    }
		    invalidate();
		    scroll(scrollStart + 5, scrollEnd, status, flag);
		} else if (status == -1 && nowX > startPosition) {
		    nowX -= 5;
		    if (nowX < startPosition) {
			nowX = startPosition;
		    }
		    invalidate();
		    scroll(scrollStart - 5, scrollEnd, status, flag);
		}
	    }
	}, 10);
    }

    private Handler handler = new Handler();

    private int convertDpToPixel(Context context, float dp) {
	DisplayMetrics metrics = context.getResources().getDisplayMetrics();
	float px = dp * (metrics.densityDpi / 160f);
	return (int) px;
    }

    // 根据手机的分辨率从 dp 的单位 转成为 px(像素)
    private int dip2px(Context context, float dpValue) {
	final float scale = context.getResources().getDisplayMetrics().density;
	return (int) (dpValue * scale + 0.5f);
    }

    /**
     * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
     */
    private int px2dip(Context context, float pxValue) {
	final float scale = context.getResources().getDisplayMetrics().density;
	return (int) (pxValue / scale + 0.5f);
    }

}

下面是Demo下载地址：

http://download.csdn.net/detail/edhlily/8257047

最后，各位有什么问题或者建议可以在下面提问的哦。