Android-自定义可滑动开关控件之SlidingSwitchView

首先上两张蹩脚的效果图：

  

效果：可以点击切换，也可以拖动切换

先上代码：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:gravity="center"  
6.     android:orientation="vertical" >  
7.   
8.     <com.example.slidingswitchview.slideswitch.SlidingSwitchView  
9.         android:id="@+id/swithview"  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content" />  
12.   
13. </LinearLayout>  

1，初始化部分：

[java] view plain copy

1.     private Bitmap mSwitch_on, mSwitch_off, mTthumb;  
2.     private Paint mPaint;  
3.   
4.     private int viewWidth, viewHeigth, thumbWidthHalf, thumbWidth;  
5.   
6.     //记录上一次点击的X坐标和当前的X坐标  
7.     private int mLastX, mCurrentX;  
8.   
9.     // 是否滑动  
10.     private boolean isScrolling = false;  
11.     // 开关所在的方向，左or右  
12.     private boolean isSwitchLeft = false;  
13.     // 是否是移动状态  
14.     private boolean isMoving = false;  
15.     //是否移动过，如果为false代表是单机时间  
16.     private boolean hasMoving = false;  
17.       
18.     private int mMoveDistance = 0;  
19.     private int mMoveX = 0;  
20.   
21.     private FontMetrics mFontMetrics;  
22.     private float mTextX, mTextY;  
23.     private String mOnText = "on";  
24.     private String mOffText = "off";  
25.     // 0:静止、1:向左、2:向右  
26.     private int mScrollingStatus = 0;  
27.   
28.     private static final float GESTURE_THRESHOLD_DIP = 10.0f;  
29.     final float scale = getContext().getResources().getDisplayMetrics().density;  
30.   
31.     private IOnSwitchChangerListener mChangerListener = null;  
32.   
33.     public SlidingSwitchView(Context context, AttributeSet attrs) {  
34.         super(context, attrs);  
35.         initBitmapResource();  
36.         initConstant();  
37.         initPaint();  
38.         initFontMetrics();  
39.     }  
40.   
41.     private void initConstant() {  
42.         viewWidth = mSwitch_on.getWidth() + getPaddingLeft() + getPaddingRight();  
43.         viewHeigth = mSwitch_on.getHeight() + getPaddingTop() + getPaddingBottom();  
44.         thumbWidth = mTthumb.getWidth();  
45.         thumbWidthHalf = thumbWidth / 2;  
46.         if (isSwitchLeft) {  
47.             mMoveDistance = 0;  
48.         } else {  
49.             mMoveDistance = viewWidth - thumbWidthHalf;  
50.         }  
51.         mScrollingStatus = 0;  
52.     }  
53.   
54.     private void initBitmapResource() {  
55.         mSwitch_on = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.on);  
56.         mSwitch_off = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.off);  
57.         mTthumb = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.thumb);  
58.     }  
59.   
60.     private void initPaint() {  
61.         mPaint = new Paint();  
62.         mPaint.setAntiAlias(true);  
63.     }  
64.   
65.     private void initFontMetrics() {  
66.         // viewWidth: 155,  
67.         // viewHeigth: 61  
68.         // ascent: -11.1328125  
69.         // top: -12.673828  
70.         // bottom: 3.2519531 ,  
71.         // descent: 2.9296875 ,  
72.         // leading: 0.0 ,  
73.         mPaint.setTextSize(getTextSize(GESTURE_THRESHOLD_DIP));  
74.         mFontMetrics = mPaint.getFontMetrics();  
75.         mTextX = (viewWidth >> 1) - (int) (mPaint.measureText(mOnText)) >> 1;  
76.         // baseline位置字体下基准线位置  
77.         // mTextY代表baseline的位置 字体高度为：(mFontMetrics.descent -  
78.         // mFontMetrics.ascent) / 2  
79.         // 字体上下居中的推到公式为：控件高度/2 + 字体高度/2 -  
80.         // mFontMetrics.bottom(注：bottom的高度通常情况下比较小)  
81.         mTextY = ((mFontMetrics.descent - mFontMetrics.ascent) / 2 - mFontMetrics.bottom) + viewHeigth / 2;  
82.     }  

注：initFontMetrics()方法是在是因为没有现成的图，就手动把文字写上去

2，绘制部分：

重写onDraw方法完成绘制，分3种情况：1、手指移动状态：isMoveing 2、控件处于滑动状态：isScrolling 3、初始化状态  。  其中isScrolling状态分为手指滑动过和未滑动过(也视为单击状态)两种情况。通过mMoveDistance和mCurrentX判断如何绘制。

重写onTouchEvent方法，ACTION_UP中hasMoving判断此次点击是不是单击事件。

[java] view plain copy

1.     @Override  
2.     protected void onDraw(Canvas canvas) {  
3.         if (isMoving) {  
4.             if (mMoveDistance <= 0) {  
5.                 drawbitmap(canvas, 0, 0);  
6.             } else if (mMoveDistance >= viewWidth - thumbWidth) {  
7.                 drawbitmap(canvas, viewWidth - thumbWidthHalf, viewWidth - thumbWidth);  
8.             } else {  
9.                 drawbitmap(canvas, mMoveDistance + thumbWidthHalf, mMoveDistance);  
10.             }  
11.         } else if (isScrolling) {  
12.             drawbitmap(canvas, mMoveDistance + thumbWidthHalf, mMoveDistance);  
13.             // 点击向右滑动  
14.             if (mCurrentX > viewWidth / 2 && mScrollingStatus == 2) {  
15.                 mMoveDistance = mMoveDistance + SCROLLING_OFFSET;  
16.             }  
17.             // 点击向左滑动  
18.             else if (mCurrentX <= viewWidth / 2 && mScrollingStatus == 1) {  
19.                 mMoveDistance = mMoveDistance - SCROLLING_OFFSET;  
20.             } else  
21.             // MOVE向右滑动  
22.             if (mMoveDistance + thumbWidthHalf > viewWidth / 2) {  
23.                 mMoveDistance = mMoveDistance + SCROLLING_OFFSET;  
24.             }  
25.             // MOVE向左滑动  
26.             else {  
27.                 mMoveDistance = mMoveDistance - SCROLLING_OFFSET;  
28.             }  
29.             refreshState();  
30.         } else {  
31.             // 初始化状态 这个应该跟外部关联  
32.             drawbitmap(canvas, mMoveDistance, mMoveDistance == 0 ? 0 : viewWidth - thumbWidth);  
33.             mLastX = 0;  
34.             mCurrentX = 0;  
35.         }  
36.     }  
37.   
38.     @Override  
39.     public boolean onTouchEvent(MotionEvent event) {  
40.         if (isScrolling) {  
41.             return true;  
42.         }  
43.         switch (event.getAction()) {  
44.         case MotionEvent.ACTION_DOWN:  
45.             mLastX = (int) event.getX();  
46.             break;  
47.         case MotionEvent.ACTION_MOVE:  
48.             isMoving = true;  
49.             hasMoving = true;  
50.             mCurrentX = (int) event.getX();  
51.             mMoveX = mCurrentX - mLastX;  
52.             mLastX = mCurrentX;  
53.             mMoveDistance = mMoveDistance + mMoveX;  
54.             postInvalidate();  
55.             break;  
56.         case MotionEvent.ACTION_UP:  
57.             isMoving = false;  
58.             mCurrentX = (int) event.getX();  
59.             if (!hasMoving) {  
60.                 if (mCurrentX < viewWidth / 2 && !isSwitchLeft) {  
61.                     mMoveDistance = viewWidth - thumbWidth - SCROLLING_OFFSET;  
62.                     mScrollingStatus = 1;  
63.                 } else if (mCurrentX >= viewWidth / 2 && isSwitchLeft) {  
64.                     mMoveDistance = mMoveDistance + SCROLLING_OFFSET;  
65.                     mScrollingStatus = 2;  
66.                 }  
67.                 hasMoving = false;  
68.             }  
69.   
70.             refreshState();  
71.             break;  
72.         default:  
73.             break;  
74.         }  
75.         return true;  
76.     }  
77.   
78.     private void refreshState() {  
79.         if (mScrollingStatus != 0 && (viewWidth - thumbWidth > mMoveDistance && mMoveDistance > 0)) {  
80.             isScrolling = true;  
81.         } else {  
82.             if (mMoveDistance <= 0) {  
83.                 relaseConstant();  
84.                 mMoveDistance = 0;  
85.                 isSwitchLeft = true;  
86.                 if (mChangerListener != null) {  
87.                     mChangerListener.onSwitchChanger(this, isSwitchLeft);  
88.                 }  
89.             } else if (mMoveDistance >= viewWidth - thumbWidth) {  
90.                 relaseConstant();  
91.                 mMoveDistance = viewWidth - thumbWidthHalf;  
92.                 isSwitchLeft = false;  
93.                 if (mChangerListener != null) {  
94.                     mChangerListener.onSwitchChanger(this, isSwitchLeft);  
95.                 }  
96.             } else {  
97.                 isScrolling = true;  
98.             }  
99.         }  
100.         postInvalidate();  
101.     }  
102.   
103.     private void relaseConstant() {  
104.         isMoving = false;  
105.         isScrolling = false;  
106.         hasMoving = false;  
107.         mScrollingStatus = 0;  
108.     }  
109.   
110.     /** 
111.      * 绘制按钮 
112.      *  
113.      * @param canvas 
114.      * @param mDistance 
115.      * @param mTthumb_to_left 
116.      */  
117.     private void drawbitmap(Canvas canvas, int mDistance, int mTthumb_to_left) {  
118.         canvas.drawBitmap(mSwitch_on, new Rect(0, 0, mDistance, viewHeigth), new Rect(0, 0, mDistance, viewHeigth), mPaint);  
119.         mPaint.setColor(Color.WHITE);  
120.         canvas.drawText(mOnText, getTextSize(GESTURE_THRESHOLD_DIP), mTextY, mPaint);  
121.         canvas.drawBitmap(mSwitch_off, new Rect(mDistance, 0, viewWidth, viewHeigth), new Rect(mDistance, 0, viewWidth, viewHeigth), mPaint);  
122.         mPaint.setColor(Color.GRAY);  
123.         canvas.drawText(mOffText, viewWidth / 2 + getTextSize(12f), mTextY, mPaint);  
124.         canvas.drawBitmap(mTthumb, mTthumb_to_left, 0, mPaint);  
125.     }  

demo戳这里：点击打开链接
写博客，更多的是对自己的一个积累，方便日后总结。最后贴出代码，代码不是很好，欢迎指正！