Android开发之玩转SwitchButton

/**
 * SwitchButton开关控件早已经非常流行。有各种各样的样式，SwitchButton开关控件一般用于app软件设置那里，控制缓存、声音、提示、下载等等。是具有很好的UI体验以及用户的习惯性

 */

Part 1、使用自定义View来实现SwitchButton

步骤：

[java]  view plain  copy

 

1. /* 
2.      1、准备好图片资源：一个背景图和一个滑块，并在onDraw里面绘制出来 
3.      2、在onMeasure里面将自定义View设置为背景图片的大小 
4.      3、为自定义View设置点击事件，通过根据当前的状态来设置偏移量，别忘记调用invalidate进行刷新哦 
5.      4、为自定义View设置触摸事件，这里注意的是一定要在上面调用super.onTouchEvent方法不然onClick就不会执行， 
6.      这说明View的onClick事件是由onTouch事件来调用的，所以这里要进行区分，什么情况调用onTouch，什么情况调用onClick事件 
7.  */  

     核心代码，实现Touch事件

[java]  view plain  copy

 

1. @Override  
2. public boolean onTouchEvent(MotionEvent event) {  
3.     super.onTouchEvent(event);//这里要调用这个方法，不然onClick不会被调用  
4.     switch (event.getAction()) {  
5.         case MotionEvent.ACTION_DOWN:  
6.             firstX = startX = lastX = event.getX();  
7.             isDrag = false;//每次进行触摸开始都要将是否触摸设置为false  
8.             break;  
9.         case MotionEvent.ACTION_MOVE:  
10.             lastX = event.getX();  
11.             float dx = lastX - startX;  
12.   
13.             //判断如果偏移量大于5的话将isDrag设置为true，否则设置为false  
14.             if (Math.abs(event.getX() - firstX) > 5) {  
15.                 isDrag = true;  
16.             }  
17.             leftDis += dx;  
18.             startX = event.getX();  
19.             break;  
20.         case MotionEvent.ACTION_UP:  
21.             if (isDrag) {//当手指弹起，如果是Drag的状态需要判断当前移动的位置来判断自动将滑块移动到左边或者右边  
22.                 if (leftDis > (MAX_MOVE_DISTANCE / 2)) {//滑动到右边  
23.                     status = false;  
24.                 } else {  
25.                     status = true;  
26.                 }  
27.                 flushStatus();  
28.             }  
29.             break;  
30.     }  
31.     flushLimit();  
32.     return true;  
33. }  

Part 2、使用自定义CheckBox来实现SwitchButton

详情请浏览：http://www.androidchina.net/3160.html这里只是总结一下

查看代码其实大概逻辑和上面的是一样的

步骤

1、准备工作

              准备图片

[java]  view plain  copy

 

1. // 得到图片  
2. mBottom = BitmapFactory.decodeResource(resources, R.mipmap.bottom);//背景的图片  
3. mBtnPressed = BitmapFactory.decodeResource(resources, R.mipmap.btn_pressed);//按压时候的滑块  
4. mBtnNormal = BitmapFactory.decodeResource(resources, R.mipmap.btn_unpressed);//没有按压时候的滑块  
5. mFrame = BitmapFactory.decodeResource(resources, R.mipmap.frame);//边框  
6. mMask = BitmapFactory.decodeResource(resources, R.mipmap.mask);//蒙版图片  

              得到系统默认点击延迟、触摸滑动界值

[java]  view plain  copy

 

1. // 得到ViewConfiguration类  
2. mClickTimeout = ViewConfiguration.getPressedStateDuration()  
3.         + ViewConfiguration.getTapTimeout();//点击的延迟  
4. mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();//得到手指滑动的时候要大于这个值才开始滑动  

2、绘制工作

[java]  view plain  copy

 

1. @Override  
2. protected void onDraw(Canvas canvas) {  
3.     canvas.saveLayerAlpha(mSaveLayerRectF, mAlpha, Canvas.MATRIX_SAVE_FLAG  
4.             | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG  
5.             | Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.CLIP_TO_LAYER_SAVE_FLAG);  
6.     // 绘制蒙板  
7.     canvas.drawBitmap(mMask, 0, mExtendOffsetY, mPaint);  
8.     //给谁设置谁就是源图，下面的即为目标图，/** [Sa * Da, Sc * Da] */相交的部分显示源图，不想交部分由于Da是为0所以显示透明色  
9.     mPaint.setXfermode(mXfermode);  
10.     // 绘制底部图片  
11.     canvas.drawBitmap(mBottom, mRealPos, mExtendOffsetY, mPaint);  
12.     mPaint.setXfermode(null);  
13.     // 绘制边框  
14.     canvas.drawBitmap(mFrame, 0, mExtendOffsetY, mPaint);  
15.     // 绘制按钮  
16.     canvas.drawBitmap(mCurBtnPic, mRealPos, mExtendOffsetY, mPaint);//这里绘制的是当前的图片  
17.     canvas.restore();  
18. }  

这里用到了图像混合Xfermode，更多知识详情请看：http://blog.csdn.net/weiwozhiyi/article/details/50749622

3、实现触摸和点击事件的功能

               ACTION_DOWN:

这里代码中调用了这个方法，请求父View不去打断Touch事件，虽然只是请求但更加确保子View能顺利的执行OnTouchEvent

[java]  view plain  copy

 

1. /** 
2.  * Tries to claim the user's drag motion, and requests disallowing any 
3.  * ancestors from stealing events in the drag. 
4.  * 试图去请求用户拖拽动作，请求不允许父View去打断Touch事件 
5.  */  
6. private void attemptClaimDrag() {  
7.     mParent = getParent();  
8.     if (mParent != null) {  
9.         mParent.requestDisallowInterceptTouchEvent(true);  
10.     }  
11. }  

                ACTION_MOVE:

[java]  view plain  copy

 

1. //然后就是对这个位置进行边界处理  
2. if (mBtnPos >= mBtnOffPos) {  
3.     mBtnPos = mBtnOffPos;  
4. }  
5. if (mBtnPos <= mBtnOnPos) {  
6.     mBtnPos = mBtnOnPos;  
7. }  
8. //判断是否是打开的状态，如果滑块的位置大于一半  
9. mTurningOn = mBtnPos > (mBtnOffPos - mBtnOnPos) / 2 + mBtnOnPos;  
10. //得到真实的位置  
11. mRealPos = getRealPos(mBtnPos);  

                 ACTION_UP:

[java]  view plain  copy

 

1. time = event.getEventTime() - event.getDownTime();//事件发生到按压产生事件流的时间差  
2. if (deltaY < mTouchSlop && deltaX < mTouchSlop && time < mClickTimeout) {  
3.     //如果偏移量小于系统给定的值则认为是一次点击状态  
4.     if (mPerformClick == null) {  
5.         mPerformClick = new PerformClick();  
6.     }  
7.     if (!post(mPerformClick)) {//将这个Runnable添加到消息队列,返回true添加成功，失败返回false  
8.   
9. } else {  performClick();  
10. }  
11.     startAnimation(!mTurningOn);//开始进行动画，在这个发放需要判断是关闭的动画还是开启的动画  
12. }  

这个自定义CheckBox复写了performClick方法

[java]  view plain  copy

 

1. @Override  
2. public boolean performClick() {  
3.     startAnimation(!mChecked);  
4.     return true;//返回true标志这个ClickListener将被调用  
5. }  

4、为滑动增加动态效果（这里通过速度来进行改变位置）

[java]  view plain  copy

 

1. private void doAnimation() {  
2.     mAnimationPosition += mAnimatedVelocity * FrameAnimationController.ANIMATION_FRAME_DURATION  
3.             / 1000;  
4.     //对当前动画的位置进行限制，超出边界将停止动画  
5.     if (mAnimationPosition <= mBtnOnPos) {//打开状态  
6.         stopAnimation();  
7.         mAnimationPosition = mBtnOnPos;  
8.         setCheckedDelayed(true);  
9.     } else if (mAnimationPosition >= mBtnOffPos) {//当动画的位置超过了背景图的边界  
10.         stopAnimation();//停止动画  
11.         mAnimationPosition = mBtnOffPos;  
12.         setCheckedDelayed(false);  
13.     }  
14.     moveView(mAnimationPosition);  
15. }  

结束，炫酷的SwitchButton就这样简易的完成。

Part 3、Github上提供的SwitchButton
     更多详情请查看 github地址：https://github.com/kyleduo/SwitchButton

首先你要添加依赖

[java]  view plain  copy

 

1. dependencies {  
2.     compile 'com.kyleduo.switchbutton:library:1.4.4'  
3. }  

在xml里面进行设置

[java]  view plain  copy

 

1. <!--  
2.      app:kswTextOff="Off"  设置关闭时候文字显示  
3.      app:kswTextOn="On"    设置打开时候文字显示  
4.      app:kswFadeBack="false"  默认情况下是true，当设置为true是背景颜色会随着滑动逐渐变浅  
5.      app:kswThumbRadius="2dp" 设置正方形四角的弧的半径  
6.      app:kswBackRadius="2dp"  设置背景图形的四角弧的半径  
7.      app:kswBackMeasureRatio="2.2" 背景图形和滑块的比例  
8.      app:kswTintColor="#FF0000"  滑块的背景  
9.      app:kswBackDrawable="@drawable/" 设置背景的图形，这里也可以使用选择器来动态改变  
10.      app:kswThumbDrawable="@drawable/" 设置滑块的图形，这里也可以使用选择来动态改变  
11.      app:kswAnimationDuration="300"  设置滑动的时长  
12.      android:enabled="false"   设置SwitchButton不可用  
13.      android:checked="true"    设置SwitchButton当前打开状态  
14.  -->  

示例：

[java]  view plain  copy

 

1. <com.kyleduo.switchbutton.SwitchButton  
2.     android:id="@+id/sb_custom_miui"  
3.     style="@style/SwitchButtonStyle"  
4.     android:layout_width="wrap_content"  
5.     android:layout_height="wrap_content"  
6.     android:layout_gravity="center"  
7.     app:kswBackDrawable="@drawable/miui_back_drawable"  
8.     app:kswBackMeasureRatio="2"  
9.     app:kswThumbDrawable="@drawable/miui_thumb_drawable"  
10.     app:kswThumbHeight="18dp"  
11.     app:kswThumbWidth="18dp"  
12.     />  

drawable.xml

[java]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:state_enabled="false" android:state_checked="true">  
4.         <!--不可用但可但是状态下的图形-->  
5.         <shape android:shape="oval">  
6.             <solid android:color="#FFA75E"/>  
7.             <stroke  
8.                 android:width="1px"  
9.                 android:color="#DB8056"/>  
10.         </shape>  
11.     </item>  
12.     <item android:state_enabled="false">  
13.         <!--不可用的图形-->  
14.         <shape android:shape="oval">  
15.             <solid android:color="#E1E1E1"/>  
16.             <stroke  
17.                 android:width="1px"  
18.                 android:color="#ECECEC"/>  
19.         </shape>  
20.     </item>  
21.     <item android:state_checked="true">  
22.         <!--可点击的图形-->  
23.         <shape android:shape="oval">  
24.             <solid android:color="#FF7201"/>  
25.             <stroke  
26.                 android:width="1px"  
27.                 android:color="#DB5517"/>  
28.         </shape>  
29.     </item>  
30.     <item>  
31.         <!--默认情况-->  
32.         <shape android:shape="oval">  
33.             <solid android:color="#E0E0E0"/>  
34.             <stroke  
35.                 android:width="1px"  
36.                 android:color="#D0D0D0"/>  
37.         </shape>  
38.     </item>  
39. </selector>  

当然也可以在代码中进行设置

样式有了，再来看看监听事件

[java]  view plain  copy

 

1. // check in check  
2. mForceOpenSb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {  
3.     @Override  
4.     public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {  
5.         if (mForceOpenControlSb.isChecked()) {  
6.             toast("Call mForceOpenSb.setChecked(true); in on CheckedChanged");  
7.             mForceOpenSb.setChecked(true);  
8.         }  
9.     }  
10. });  

它里面还封装了，这样有趣的方法

[java]  view plain  copy

 

1. /** 
2.  *  mToggleSb.toggle();  正常情况下的开关，可以接受事件 
3.  *  mToggleSb.toggleNoEvent(); 正常情况下的开关，不可接受 
4.  *  mToggleSb.toggleImmediately(); 立即执行开关，可接受 
5.  *  mToggleSb.toggleImmediatelyNoEvent();  立即执行开关，不可接受 
6.  * 
7.  *  mCheckedSb.setChecked();  手动开关，缓慢执行，可接受 
8.  *  mCheckedSb.setCheckedNoEvent();  缓慢执行，不可接受 
9.  *  mCheckedSb.setCheckedImmediately(); 立即执行，可接受 
10.  *  mCheckedSb.setCheckedImmediatelyNoEvent();  立即执行，不可接受 
11.  */