自定义滑动开关SwitchButton

在很多app中都会有滑动开关的应用场景，之前在自己的项目中也用到了，自定义了一个滑动开关，就叫SwitchButton吧。实现原理很简单，闲话不多说，直接上代码：

public class SwitchButton extends View implementsOnClickListener {private Bitmap mSwitchBottom, mSwitchThumb, mSwitchFrame, mSwitchMask;private float mCurrentX = 0;private float mCurrentY = 0;private boolean mSwitchOn = true;// 开关默认是开着的private int mMoveLength;// 最大移动距离private float mLastX = 0;private float mLastY = 0;// 第一次按下的有效区域private Rect mDest = null;// 绘制的目标区域大小private Rect mSrc = null;// 截取源图片的大小private int mDeltX = 0;// 移动的x偏移量private int mDeltY = 0;//移动的y偏移量private Paint mPaint = null;private OnChangeListener mListener = null;private boolean mFlag = false;private MyDrawerLayout mdl;private MainScrollView msv;public SwitchButton(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);init();}public SwitchButton(Context context, AttributeSet attrs) {this(context, attrs, 0);}public SwitchButton(Context context) {this(context, null);}/** * 初始化相关资源 */public void init() {mSwitchBottom = BitmapFactory.decodeResource(getResources(),R.drawable.switch_bottom);mSwitchThumb = BitmapFactory.decodeResource(getResources(),R.drawable.switch_btn_pressed);mSwitchFrame = BitmapFactory.decodeResource(getResources(),R.drawable.switch_frame);mSwitchMask = BitmapFactory.decodeResource(getResources(),R.drawable.switch_mask);setOnClickListener(this);setOnTouchListener(new OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {return false;}});mMoveLength = mSwitchBottom.getWidth() - mSwitchFrame.getWidth();mDest = new Rect(0, 0, mSwitchFrame.getWidth(),mSwitchFrame.getHeight());mSrc = new Rect();mPaint = new Paint();mPaint.setAntiAlias(true);mPaint.setAlpha(255);mPaint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {setMeasuredDimension(mSwitchFrame.getWidth(), mSwitchFrame.getHeight());}@Overrideprotected void onDraw(Canvas canvas) {// TODO Auto-generated method stubsuper.onDraw(canvas);if (mDeltX > 0 || mDeltX == 0 && mSwitchOn) {if (mSrc != null) {mSrc.set(mMoveLength - mDeltX, 0, mSwitchBottom.getWidth()- mDeltX, mSwitchFrame.getHeight());}} else if (mDeltX < 0 || mDeltX == 0 && !mSwitchOn) {if (mSrc != null) {mSrc.set(-mDeltX, 0, mSwitchFrame.getWidth() - mDeltX,mSwitchFrame.getHeight());}}int count = canvas.saveLayer(new RectF(mDest), null,Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG| Canvas.HAS_ALPHA_LAYER_SAVE_FLAG| Canvas.FULL_COLOR_LAYER_SAVE_FLAG| Canvas.CLIP_TO_LAYER_SAVE_FLAG);canvas.drawBitmap(mSwitchBottom, mSrc, mDest, null);canvas.drawBitmap(mSwitchThumb, mSrc, mDest, null);canvas.drawBitmap(mSwitchFrame, 0, 0, null);canvas.drawBitmap(mSwitchMask, 0, 0, mPaint);canvas.restoreToCount(count);}@Overridepublic boolean onTouchEvent(MotionEvent event) {// TODO Auto-generated method stubswitch (event.getAction()) {case MotionEvent.ACTION_DOWN:mLastX = event.getX();mLastY = event.getY();break;case MotionEvent.ACTION_MOVE:mCurrentX = event.getX();mCurrentY = event.getY();mDeltX = (int) (mCurrentX - mLastX);mDeltY = (int) (mCurrentY-mLastY);// 如果开关开着向左滑动，或者开关关着向右滑动（这时候是不需要处理的）if ((mSwitchOn && mDeltX < 0) || (!mSwitchOn && mDeltX > 0)) {mFlag = true;mDeltX = 0;}if (Math.abs(mDeltX) > mMoveLength) {mDeltX = mDeltX > 0 ? mMoveLength : -mMoveLength;}invalidate();return true;case MotionEvent.ACTION_UP:if (Math.abs(mDeltX) > 0 && Math.abs(mDeltX) < mMoveLength / 2) {mDeltX = 0;invalidate();return true;} else if (Math.abs(mDeltX) > mMoveLength / 2&& Math.abs(mDeltX) <= mMoveLength) {mDeltX = mDeltX > 0 ? mMoveLength : -mMoveLength;mSwitchOn = !mSwitchOn;if (mListener != null) {mListener.onChange(this, mSwitchOn);}invalidate();mDeltX = 0;return true;} else if (mDeltX == 0 && mFlag) {// 这时候得到的是不需要进行处理的，因为已经move过了mDeltX = 0;mFlag = false;return true;}return super.onTouchEvent(event);default:break;}invalidate();return super.onTouchEvent(event);}@Overridepublic boolean dispatchTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:mdl.requestDisallowInterceptTouchEvent(true);msv.requestDisallowInterceptTouchEvent(true);break;case MotionEvent.ACTION_MOVE:if (!mSwitchOn && mDeltX > 0) {mdl.requestDisallowInterceptTouchEvent(false);}break;case MotionEvent.ACTION_UP:break;default:break;}return super.dispatchTouchEvent(event);}public void setOnChangeListener(OnChangeListener listener) {mListener = listener;}public interface OnChangeListener {public void onChange(SwitchButton sb, boolean state);}public void setCheck(boolean checked) {if (checked) {mCurrentX = 0;} else {mCurrentX = mMoveLength;}mSwitchOn = checked;}@Overridepublic void onClick(View v) {// TODO Auto-generated method stubmDeltX = mSwitchOn ? mMoveLength : -mMoveLength;mSwitchOn = !mSwitchOn;if (mListener != null) {mListener.onChange(this, mSwitchOn);}invalidate();mDeltX = 0;}public void setMyDrawerLayoutInterface(MyDrawerLayout mdl){this.mdl = mdl;}public void setMainScrollViewInterface(MainScrollView msv){this.msv = msv;}}

这里的实现原理很简单，就不多说了，主要想提的一点就是，这个滑动开关的父元素为一个DrawerLayout，

在实际使用中是会有同向的滑动冲突的。如何解决这个滑动冲突在前一篇文章中有提及方法，我这里采用的正是

内部拦截法来解决的。