Android 自定义实现switch开关按钮

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

 

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

图片对应的名称：

无色长条:switch_frame;

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

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

代码：

SwitchButton类：

 

[java] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. package com.example.switchbutton;  
  2.   
  3. import android.content.Context;  
  4. import android.graphics.Bitmap;  
  5. import android.graphics.BitmapFactory;  
  6. import android.graphics.Canvas;  
  7. import android.graphics.Paint;  
  8. import android.graphics.PorterDuff.Mode;  
  9. import android.graphics.PorterDuffXfermode;  
  10. import android.graphics.Rect;  
  11. import android.graphics.RectF;  
  12. import android.util.AttributeSet;  
  13. import android.view.MotionEvent;  
  14. import android.view.View;  
  15.   
  16. public class SwitchButton extends View implements android.view.View.OnClickListener{  
  17.     private Bitmap mSwitchBottom, mSwitchThumb, mSwitchFrame, mSwitchMask;  
  18.     private float mCurrentX = 0;  
  19.     private boolean mSwitchOn = true;//开关默认是开着的  
  20.     private int mMoveLength;//最大移动距离  
  21.     private float mLastX = 0;//第一次按下的有效区域  
  22.       
  23.     private Rect mDest = null;//绘制的目标区域大小  
  24.     private Rect mSrc = null;//截取源图片的大小  
  25.     private int mDeltX = 0;//移动的偏移量  
  26.     private Paint mPaint = null;  
  27.     private OnChangeListener mListener = null;  
  28.     private boolean mFlag = false;  
  29.   
  30.     public SwitchButton(Context context) {  
  31.         this(context, null);  
  32.         // TODO Auto-generated constructor stub  
  33.     }  
  34.   
  35.     public SwitchButton(Context context, AttributeSet attrs) {  
  36.         this(context, attrs, 0);  
  37.         // TODO Auto-generated constructor stub  
  38.     }  
  39.   
  40.     public SwitchButton(Context context, AttributeSet attrs, int defStyle) {  
  41.         super(context, attrs, defStyle);  
  42.         // TODO Auto-generated constructor stub  
  43.         init();  
  44.     }  
  45.   
  46.     /** 
  47.      * 初始化相关资源 
  48.      */  
  49.     public void init() {  
  50.         mSwitchBottom = BitmapFactory.decodeResource(getResources(),  
  51.                 R.drawable.switch_bottom);  
  52.         mSwitchThumb = BitmapFactory.decodeResource(getResources(),  
  53.                 R.drawable.switch_btn_pressed);  
  54.         mSwitchFrame = BitmapFactory.decodeResource(getResources(),  
  55.                 R.drawable.switch_frame);  
  56.         mSwitchMask = BitmapFactory.decodeResource(getResources(),  
  57.                 R.drawable.switch_mask);  
  58.         setOnClickListener(this);  
  59.         setOnTouchListener(new OnTouchListener() {  
  60.               
  61.             @Override  
  62.             public boolean onTouch(View v, MotionEvent event) {  
  63.                 // TODO Auto-generated method stub  
  64.                 return false;  
  65.             }  
  66.         });  
  67.           
  68.         mMoveLength = mSwitchBottom.getWidth() - mSwitchFrame.getWidth();  
  69.         mDest = new Rect(0, 0, mSwitchFrame.getWidth(), mSwitchFrame.getHeight());  
  70.         mSrc = new Rect();  
  71.         mPaint = new Paint();  
  72.         mPaint.setAntiAlias(true);  
  73.         mPaint.setAlpha(255);  
  74.         mPaint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));  
  75.     }  
  76.   
  77.     @Override  
  78.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
  79.         // TODO Auto-generated method stub  
  80.         setMeasuredDimension(mSwitchFrame.getWidth(), mSwitchFrame.getHeight());  
  81.     }  
  82.   
  83.     @Override  
  84.     protected void onDraw(Canvas canvas) {  
  85.         // TODO Auto-generated method stub  
  86.         super.onDraw(canvas);  
  87.         if (mDeltX > 0 || mDeltX == 0 && mSwitchOn) {  
  88.             if(mSrc != null) {  
  89.                 mSrc.set(mMoveLength - mDeltX, 0, mSwitchBottom.getWidth()  
  90.                     - mDeltX, mSwitchFrame.getHeight());  
  91.             }   
  92.         } else if(mDeltX < 0 || mDeltX == 0 && !mSwitchOn){  
  93.             if(mSrc != null) {  
  94.                 mSrc.set(-mDeltX, 0, mSwitchFrame.getWidth() - mDeltX,  
  95.                     mSwitchFrame.getHeight());  
  96.             }  
  97.         }   
[java] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. <span style="white-space:pre">        </span>//这儿是离屏缓冲，自己感觉类似双缓冲机制吧  
  2.         int count = canvas.saveLayer(new RectF(mDest), null, Canvas.MATRIX_SAVE_FLAG  
  3.                 | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG  
  4.                 | Canvas.FULL_COLOR_LAYER_SAVE_FLAG  
  5.                 | Canvas.CLIP_TO_LAYER_SAVE_FLAG);  
  6.   
  7.         canvas.drawBitmap(mSwitchBottom, mSrc, mDest, null);  
  8.         canvas.drawBitmap(mSwitchThumb, mSrc, mDest, null);  
  9.         canvas.drawBitmap(mSwitchFrame, 0, 0, null);  
  10.         canvas.drawBitmap(mSwitchMask, 0, 0, mPaint);  
  11.         canvas.restoreToCount(count);  
  12.     }  
  13.       
  14.     @Override  
  15.     public boolean onTouchEvent(MotionEvent event) {  
  16.         // TODO Auto-generated method stub  
  17.         switch (event.getAction()) {  
  18.         case MotionEvent.ACTION_DOWN:  
  19.             mLastX = event.getX();  
  20.             break;  
  21.         case MotionEvent.ACTION_MOVE:  
  22.             mCurrentX = event.getX();  
  23.             mDeltX = (int) (mCurrentX - mLastX);  
  24.             // 如果开关开着向左滑动，或者开关关着向右滑动（这时候是不需要处理的）  
  25.             if ((mSwitchOn && mDeltX < 0) || (!mSwitchOn && mDeltX > 0)) {  
  26.                 mFlag = true;  
  27.                 mDeltX = 0;  
  28.             }  
  29.               
  30.             if (Math.abs(mDeltX) > mMoveLength) {  
  31.                 mDeltX = mDeltX > 0 ? mMoveLength : - mMoveLength;  
  32.             }  
  33.             invalidate();  
  34.             return true;  
  35.         case MotionEvent.ACTION_UP:  
  36.             if (Math.abs(mDeltX) > 0 && Math.abs(mDeltX) < mMoveLength / 2) {  
  37.                 mDeltX = 0;  
  38.                 invalidate();  
  39.                 return true;  
  40.             } else if (Math.abs(mDeltX) > mMoveLength / 2 && Math.abs(mDeltX) <= mMoveLength) {  
  41.                 mDeltX = mDeltX > 0 ? mMoveLength : -mMoveLength;  
  42.                 mSwitchOn = !mSwitchOn;  
  43.                 if(mListener != null) {  
  44.                     mListener.onChange(this, mSwitchOn);  
  45.                 }  
  46.                 invalidate();  
  47.                 mDeltX = 0;  
  48.                 return true;  
  49.             } else if(mDeltX == 0 && mFlag) {  
  50.                 //这时候得到的是不需要进行处理的，因为已经move过了  
  51.                 mDeltX = 0;  
  52.                 mFlag = false;  
  53.                 return true;  
  54.             }  
  55.             return super.onTouchEvent(event);  
  56.         default:  
  57.             break;  
  58.         }  
  59.         invalidate();  
  60.         return super.onTouchEvent(event);  
  61.     }  
  62.       
  63.     public void setOnChangeListener(OnChangeListener listener) {  
  64.         mListener = listener;  
  65.     }  
  66.       
  67.     public interface OnChangeListener {  
  68.         public void onChange(SwitchButton sb, boolean state);  
  69.     }  
  70.   
  71.     @Override  
  72.     public void onClick(View v) {  
  73.         // TODO Auto-generated method stub  
  74.         mDeltX = mSwitchOn ? mMoveLength : -mMoveLength;  
  75.         mSwitchOn = !mSwitchOn;  
  76.         if(mListener != null) {  
  77.             mListener.onChange(this, mSwitchOn);  
  78.         }  
  79.         invalidate();  
  80.         mDeltX = 0;  
  81.     }  
  82. }  


MainActivity：

 

 

[java] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. package com.example.switchbutton;  
  2.   
  3.   
  4. import com.example.switchbutton.SwitchButton.OnChangeListener;  
  5.   
  6. import android.app.Activity;  
  7. import android.os.Bundle;  
  8. import android.util.Log;  
  9. import android.view.Menu;  
  10. import android.widget.Toast;  
  11.   
  12. public class MainActivity extends Activity {  
  13.   
  14.     @Override  
  15.     protected void onCreate(Bundle savedInstanceState) {  
  16.         super.onCreate(savedInstanceState);  
  17.         setContentView(R.layout.activity_main);  
  18.           
  19.         SwitchButton sb = (SwitchButton) findViewById(R.id.wiperSwitch1);  
  20.         sb.setOnChangeListener(new OnChangeListener() {  
  21.               
  22.             @Override  
  23.             public void onChange(SwitchButton sb, boolean state) {  
  24.                 // TODO Auto-generated method stub  
  25.                 Log.d("switchButton", state ? "开":"关");  
  26.                 Toast.makeText(MainActivity.this, state ? "开":"关", Toast.LENGTH_SHORT).show();  
  27.             }  
  28.         });  
  29.     }  
  30.   
  31.     @Override  
  32.     public boolean onCreateOptionsMenu(Menu menu) {  
  33.         // Inflate the menu; this adds items to the action bar if it is present.  
  34.         getMenuInflater().inflate(R.menu.main, menu);  
  35.         return true;  
  36.     }  
  37. }  


activity_main.xml:

 

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical"  
  6.     android:paddingBottom="@dimen/activity_vertical_margin"  
  7.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  8.     android:paddingRight="@dimen/activity_horizontal_margin"  
  9.     android:paddingTop="@dimen/activity_vertical_margin" >  
  10.   
  11.     <ImageView  
  12.         android:id="@+id/imageView"  
  13.         android:layout_width="wrap_content"  
  14.         android:layout_height="wrap_content" />  
  15.     <com.example.switchbutton.SwitchButton  
  16.         android:id="@+id/wiperSwitch1"  
  17.         android:layout_width="wrap_content"  
  18.         android:layout_height="wrap_content"  
  19.         android:layout_marginLeft="100dip" />  
  20. </LinearLayout>  

主要的代码在switchbutton类中，代码有什么不足还希望大家多提提意见，自己很少写。

 

参考：http://stackoverflow.com/questions/11838022/how-to-paint-with-alpha

            http://blog.csdn.net/zenip/article/details/8766263

posted @ 2015-03-20 08:46  xiaochao1234  阅读(8314)  评论(0)  编辑  收藏  举报