Android 自定义实现switch开关按钮

最新推荐文章于 2022-03-29 13:45:00 发布

汤米粥

最新推荐文章于 2022-03-29 13:45:00 发布

阅读量1.3k

点赞数

分类专栏： android

android 专栏收录该内容

304 篇文章 5 订阅

订阅专栏

转载于：https://i-blog.csdnimg.cn/blog_migrate/22fbbf21c807cfd0456e155b347e5d6c.png

Android 自定义实现switch开关按钮

前几天在看蘑菇街上有个开关按钮：

就在想是怎样实现的，于是反编译了它的源码，但是这时得到了下面的几张图片：

图片对应的名称：

无色长条:switch_frame;

白色圆点:switch_btn_pressed;
左白右红的长条:switch_bottom;
黑色长条:switch_mask.

那我们就用这几张图片来实现类似的效果吧。

代码：

SwitchButton类：

[java]view plaincopy 
    
 package com.example.switchbutton;  
   
 import android.content.Context;  
 import android.graphics.Bitmap;  
 import android.graphics.BitmapFactory;  
 import android.graphics.Canvas;  
 import android.graphics.Paint;  
 import android.graphics.PorterDuff.Mode;  
 import android.graphics.PorterDuffXfermode;  
 import android.graphics.Rect;  
 import android.graphics.RectF;  
 import android.util.AttributeSet;  
 import android.view.MotionEvent;  
 import android.view.View;  
   
 public class SwitchButton extends View implements android.view.View.OnClickListener{  
     private Bitmap mSwitchBottom, mSwitchThumb, mSwitchFrame, mSwitchMask;  
     private float mCurrentX = 0;  
     private boolean mSwitchOn = true;//开关默认是开着的  
     private int mMoveLength;//最大移动距离  
     private float mLastX = 0;//第一次按下的有效区域  
       
     private Rect mDest = null;//绘制的目标区域大小  
     private Rect mSrc = null;//截取源图片的大小  
     private int mDeltX = 0;//移动的偏移量  
     private Paint mPaint = null;  
     private OnChangeListener mListener = null;  
     private boolean mFlag = false;  
   
     public SwitchButton(Context context) {  
         this(context, null);  
         // TODO Auto-generated constructor stub  
     }  
   
     public SwitchButton(Context context, AttributeSet attrs) {  
         this(context, attrs, 0);  
         // TODO Auto-generated constructor stub  
     }  
   
     public SwitchButton(Context context, AttributeSet attrs, int defStyle) {  
         super(context, attrs, defStyle);  
         // TODO Auto-generated constructor stub  
         init();  
     }  
   
     /** 
      * 初始化相关资源 
      */  
     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) {  
                 // TODO Auto-generated method stub  
                 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) {  
         // TODO Auto-generated method stub  
         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());  
             }  
         }   

[java]view plaincopy 
    
 <span style="white-space:pre">        </span>//这儿是离屏缓冲，自己感觉类似双缓冲机制吧  
         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();  
             break;  
         case MotionEvent.ACTION_MOVE:  
             mCurrentX = event.getX();  
             mDeltX = (int) (mCurrentX - mLastX);  
             // 如果开关开着向左滑动，或者开关关着向右滑动（这时候是不需要处理的）  
             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);  
     }  
       
     public void setOnChangeListener(OnChangeListener listener) {  
         mListener = listener;  
     }  
       
     public interface OnChangeListener {  
         public void onChange(SwitchButton sb, boolean state);  
     }  
   
     @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;  
     }  
 }  

MainActivity：

[java]view plaincopy 
    
 package com.example.switchbutton;  
   
   
 import com.example.switchbutton.SwitchButton.OnChangeListener;  
   
 import android.app.Activity;  
 import android.os.Bundle;  
 import android.util.Log;  
 import android.view.Menu;  
 import android.widget.Toast;  
   
 public class MainActivity extends Activity {  
   
     @Override  
     protected void onCreate(Bundle savedInstanceState) {  
         super.onCreate(savedInstanceState);  
         setContentView(R.layout.activity_main);  
           
         SwitchButton sb = (SwitchButton) findViewById(R.id.wiperSwitch1);  
         sb.setOnChangeListener(new OnChangeListener() {  
               
             @Override  
             public void onChange(SwitchButton sb, boolean state) {  
                 // TODO Auto-generated method stub  
                 Log.d("switchButton", state ? "开":"关");  
                 Toast.makeText(MainActivity.this, state ? "开":"关", Toast.LENGTH_SHORT).show();  
             }  
         });  
     }  
   
     @Override  
     public boolean onCreateOptionsMenu(Menu menu) {  
         // Inflate the menu; this adds items to the action bar if it is present.  
         getMenuInflater().inflate(R.menu.main, menu);  
         return true;  
     }  
 }  

activity_main.xml:

[html]view plaincopy 
    
 <LinearLayout 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"  
     android:orientation="vertical"  
     android:paddingBottom="@dimen/activity_vertical_margin"  
     android:paddingLeft="@dimen/activity_horizontal_margin"  
     android:paddingRight="@dimen/activity_horizontal_margin"  
     android:paddingTop="@dimen/activity_vertical_margin" >  
   
     <ImageView  
         android:id="@+id/imageView"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content" />  
     <com.example.switchbutton.SwitchButton  
         android:id="@+id/wiperSwitch1"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:layout_marginLeft="100dip" />  
 </LinearLayout>  