自定义view滑动按钮

滑动按钮

1. 创建一个类SlideButton继承View

2.实现带有两个参数的构造器(获取两个位图)

 public SlideButton(Context context,AttributeSet attrs) {

     super(context, attrs);

     initPaint();

     initBmp();

 }

 private void initPaint() {

     mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

 }

 private void initBmp() {

     mBackgroundBmp =BitmapFactory.decodeResource(getResources(),

             R.drawable.switch_background);

     mSlideBmp =BitmapFactory.decodeResource(getResources(),

             R.drawable.slide_button_background);

 }

3. 实现onMeasure()设置控件大小为底部位图的大小

 @Override

 protected void onMeasure(int widthMeasureSpec,int heightMeasureSpec) {

    setMeasuredDimension(mBackgroundBmp.getWidth(),

             mBackgroundBmp.getHeight());

 }

4. 实现onDraw() 绘制默认的图片

 @Override

 protected void onDraw(Canvas canvas) {

     canvas.drawBitmap(mBackgroundBmp, 0, 0,mPaint);

     canvas.drawBitmap(mSlideBmp, 0, 0,mPaint);

 }

5. 实现onTouchEvent() 滑动的时候控制滑块的位置 注意设置滑块的范围

 private float mSlideLeft=0;

 @Override

 protected void onDraw(Canvas canvas) {

     canvas.drawBitmap(mBackgroundBmp, 0, 0,mPaint);

     if (mSlideLeft<0) {

         canvas.drawBitmap(mSlideBmp, 0, 0,mPaint);

     }else if(mSlideLeft>mBackgroundBmp.getWidth()-mSlideBmp.getWidth()) {

         canvas.drawBitmap(mSlideBmp,mBackgroundBmp.getWidth()-

mSlideBmp.getWidth(),0, mPaint);

     }else {

         canvas.drawBitmap(mSlideBmp,mSlideLeft, 0, mPaint);

     }

 }

 @Override

 public boolean onTouchEvent(MotionEvent event){

     switch (event.getAction()) {

         case MotionEvent.ACTION_DOWN:

             break;

         case MotionEvent.ACTION_MOVE:

             float touchX=event.getX();

            mSlideLeft=touchX-mSlideBmp.getWidth()/2;

             break;

         case MotionEvent.ACTION_UP:

             floatslideHalf=mSlideLeft+mSlideBmp.getWidth()/2;

             floatbackgroundHalf=mBackgroundBmp.getWidth()/2;

             if (slideHalf>backgroundHalf) {

                mSlideLeft=mBackgroundBmp.getWidth()-mSlideBmp.getWidth();

             }else {

                 mSlideLeft=0;

             }

             break;

     }

     //刷新界⾯面 让系统调⽤用onDraw()

     invalidate();

     return true;

 }

6. 在onDraw()中根据最后的界面决定当前控件的状态

 @Override

 protected void onDraw(Canvas canvas) {

     ...

     //根据当前的状态决定开关

     if (mSlideLeft==0&&mIsOpen) {

         mIsOpen=false;

         ..

     }elseif(mSlideLeft==mBackgroundBmp.getWidth()-

mSlideBmp.getWidth()&&!mIsOpen){

         mIsOpen=true;

         ..

     }

 }

7. 创建开关的回调接口

public interface ISlideButtonChangeListener{

     public void onButtonStateChanged(booleanflag);

 }

 public class SlideButton extends View {

     private ISlideButtonChangeListenermListener;

     public voidsetmListener(ISlideButtonChangeListener mListener) {

         this.mListener = mListener;

     }

     @Override

     protected void onDraw(Canvas canvas) {

         ...

         //根据当前的状态决定开关

         if (mSlideLeft==0&&mIsOpen) {

             mIsOpen=false;

             if (mListener!=null) {

                mListener.onButtonStateChanged(mIsOpen);

             }

         }elseif(mSlideLeft==mBackgroundBmp.getWidth()-

mSlideBmp.getWidth()&&!mIsOpen){

             mIsOpen=true;

             if (mListener!=null) {

                mListener.onButtonStateChanged(mIsOpen);

             }

         }

     }

 }