Android 自定义实现switch开关按钮

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

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

图片对应的名称：

无色长条:switch_frame;

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

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

代码：

SwitchButton类：

1. package com.example.switchbutton;
2. import android.content.Context;
3. import android.graphics.Bitmap;
4. import android.graphics.BitmapFactory;
5. import android.graphics.Canvas;
6. import android.graphics.Paint;
7. import android.graphics.PorterDuff.Mode;
8. import android.graphics.PorterDuffXfermode;
9. import android.graphics.Rect;
10. import android.graphics.RectF;
11. import android.util.AttributeSet;
12. import android.view.MotionEvent;
13. import android.view.View;
14. public class SwitchButton extends View implements android.view.View.OnClickListener{
15. private Bitmap mSwitchBottom, mSwitchThumb, mSwitchFrame, mSwitchMask;
16. private float mCurrentX = 0;
17. private boolean mSwitchOn = true;//开关默认是开着的
18. private int mMoveLength;//最大移动距离
19. private float mLastX = 0;//第一次按下的有效区域
20. private Rect mDest = null;//绘制的目标区域大小
21. private Rect mSrc = null;//截取源图片的大小
22. private int mDeltX = 0;//移动的偏移量
23. private Paint mPaint = null;
24. private OnChangeListener mListener = null;
25. private boolean mFlag = false;
26. public SwitchButton(Context context) {
27. this(context, null);
28. // TODO Auto-generated constructor stub
29. }
30. public SwitchButton(Context context, AttributeSet attrs) {
31. this(context, attrs, 0);
32. // TODO Auto-generated constructor stub
33. }
34. public SwitchButton(Context context, AttributeSet attrs, int defStyle) {
35. super(context, attrs, defStyle);
36. // TODO Auto-generated constructor stub
37. init();
38. }
39. /**
40. * 初始化相关资源
41. */
42. public void init() {
43. mSwitchBottom = BitmapFactory.decodeResource(getResources(),
44. R.drawable.switch_bottom);
45. mSwitchThumb = BitmapFactory.decodeResource(getResources(),
46. R.drawable.switch_btn_pressed);
47. mSwitchFrame = BitmapFactory.decodeResource(getResources(),
48. R.drawable.switch_frame);
49. mSwitchMask = BitmapFactory.decodeResource(getResources(),
50. R.drawable.switch_mask);
51. setOnClickListener(this);
52. setOnTouchListener(new OnTouchListener() {
53. @Override
54. public boolean onTouch(View v, MotionEvent event) {
55. // TODO Auto-generated method stub
56. return false;
57. }
58. });
59. mMoveLength = mSwitchBottom.getWidth() - mSwitchFrame.getWidth();
60. mDest = new Rect(0, 0, mSwitchFrame.getWidth(), mSwitchFrame.getHeight());
61. mSrc = new Rect();
62. mPaint = new Paint();
63. mPaint.setAntiAlias(true);
64. mPaint.setAlpha(255);
65. mPaint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
66. }
67. @Override
68. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
69. // TODO Auto-generated method stub
70. setMeasuredDimension(mSwitchFrame.getWidth(), mSwitchFrame.getHeight());
71. }
72. @Override
73. protected void onDraw(Canvas canvas) {
74. // TODO Auto-generated method stub
75. super.onDraw(canvas);
76. if (mDeltX > 0 || mDeltX == 0 && mSwitchOn) {
77. if(mSrc != null) {
78. mSrc.set(mMoveLength - mDeltX, 0, mSwitchBottom.getWidth()
79. - mDeltX, mSwitchFrame.getHeight());
80. }
81. } else if(mDeltX < 0 || mDeltX == 0 && !mSwitchOn){
82. if(mSrc != null) {
83. mSrc.set(-mDeltX, 0, mSwitchFrame.getWidth() - mDeltX,
84. mSwitchFrame.getHeight());
85. }
86. }

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. canvas.drawBitmap(mSwitchBottom, mSrc, mDest, null);
7. canvas.drawBitmap(mSwitchThumb, mSrc, mDest, null);
8. canvas.drawBitmap(mSwitchFrame, 0, 0, null);
9. canvas.drawBitmap(mSwitchMask, 0, 0, mPaint);
10. canvas.restoreToCount(count);
11. }
12. @Override
13. public boolean onTouchEvent(MotionEvent event) {
14. // TODO Auto-generated method stub
15. switch (event.getAction()) {
16. case MotionEvent.ACTION_DOWN:
17. mLastX = event.getX();
18. break;
19. case MotionEvent.ACTION_MOVE:
20. mCurrentX = event.getX();
21. mDeltX = (int) (mCurrentX - mLastX);
22. // 如果开关开着向左滑动，或者开关关着向右滑动（这时候是不需要处理的）
23. if ((mSwitchOn && mDeltX < 0) || (!mSwitchOn && mDeltX > 0)) {
24. mFlag = true;
25. mDeltX = 0;
26. }
27. if (Math.abs(mDeltX) > mMoveLength) {
28. mDeltX = mDeltX > 0 ? mMoveLength : - mMoveLength;
29. }
30. invalidate();
31. return true;
32. case MotionEvent.ACTION_UP:
33. if (Math.abs(mDeltX) > 0 && Math.abs(mDeltX) < mMoveLength / 2) {
34. mDeltX = 0;
35. invalidate();
36. return true;
37. } else if (Math.abs(mDeltX) > mMoveLength / 2 && Math.abs(mDeltX) <= mMoveLength) {
38. mDeltX = mDeltX > 0 ? mMoveLength : -mMoveLength;
39. mSwitchOn = !mSwitchOn;
40. if(mListener != null) {
41. mListener.onChange(this, mSwitchOn);
42. }
43. invalidate();
44. mDeltX = 0;
45. return true;
46. } else if(mDeltX == 0 && mFlag) {
47. //这时候得到的是不需要进行处理的，因为已经move过了
48. mDeltX = 0;
49. mFlag = false;
50. return true;
51. }
52. return super.onTouchEvent(event);
53. default:
54. break;
55. }
56. invalidate();
57. return super.onTouchEvent(event);
58. }
59. public void setOnChangeListener(OnChangeListener listener) {
60. mListener = listener;
61. }
62. public interface OnChangeListener {
63. public void onChange(SwitchButton sb, boolean state);
64. }
65. @Override
66. public void onClick(View v) {
67. // TODO Auto-generated method stub
68. mDeltX = mSwitchOn ? mMoveLength : -mMoveLength;
69. mSwitchOn = !mSwitchOn;
70. if(mListener != null) {
71. mListener.onChange(this, mSwitchOn);
72. }
73. invalidate();
74. mDeltX = 0;
75. }
76. }

MainActivity：

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

activity_main.xml:

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. <ImageView
11. android:id="@+id/imageView"
12. android:layout_width="wrap_content"
13. android:layout_height="wrap_content" />
14. <com.example.switchbutton.SwitchButton
15. android:id="@+id/wiperSwitch1"
16. android:layout_width="wrap_content"
17. android:layout_height="wrap_content"
18. android:layout_marginLeft="100dip" />
19. </LinearLayout>

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

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

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