自定义滑动开关SwitchButton

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

public class SwitchButton extends View implements OnClickListener { 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() { @Override public 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)); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { setMeasuredDimension(mSwitchFrame.getWidth(), mSwitchFrame.getHeight()); } @Override protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub super.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); } @Override public boolean onTouchEvent(MotionEvent event) { // TODO Auto-generated method stub switch (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); } @Override public 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; } @Override public void onClick(View v) { // TODO Auto-generated method stub mDeltX = 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，

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

内部拦截法来解决的。