MyException - 我的异常网
当前位置:我的异常网» 移动开发 » SwitchButton 开关旋钮 的多种实现方式 (附源码DEM

SwitchButton 开关旋钮 的多种实现方式 (附源码DEMO)

www.MyException.Cn  网友分享于:2014-08-06  浏览:0次
SwitchButton 开关按钮 的多种实现方式 (附源码DEMO)

转于:

http://blog.csdn.net/vipzjyno1/article/details/23707149

--------------------------------------------------------------------------------------------------

 

刚开始接触开关样式的按钮是在IOS系统上面,它的切换以及滑动十分帅气,深入人心。

所谓的开关按钮,就是只有2个状态:on和off,下图就是系统IOS 7上开关按钮效果。

起初我在android上我只会使用CheckBox去满足对应的功能。后来,查看开发文档发现,android也有了自己的原生态开关控件,并且在4.0版本中又优化加入了新的类似控件--Switch控件,以及使用起来十分简单的ToggleButton,可是它们只是带有切换效果,而不带有滑动切换效果,并且Switch控件只支持高版本的系统,对于2.3就不支持。所以,要想看如何实现滑动切换的效果,必须了解这些控件的实现方式。下面,让我们查看下android开发文档,看看这些是如何实现使用的。

 

注意:本文中涉及到自定义控件 并自定义配置属性declare-styleable,

如果你对于自定义控件的自定义配置属性还不是很了解可以看:android 自定义控件 使用declare-styleable进行配置属性(源码角度)

 

查看查看开发文档:

 

CompoundButton

extends Button
implements Checkable

 

java.lang.Object

android.view.View

 

android.widget.TextView

 

 

android.widget.Button

 

 

 

android.widget.CompoundButton

 

Known Direct Subclasses

CheckBox,RadioButton,Switch,ToggleButton

以上4类都是开关类型切换的控件,它们的父类都是CompoundButton。

 

 

 它对应的方法和类有:

 

点击选择监听接口。

Nested Classes

interface

CompoundButton.OnCheckedChangeListener

Interface definition for a callback to be invoked when the checked state of a compound button changed.

 

返回左右填充的VIEW,加上间隔

Public Methods

int

getCompoundPaddingLeft()Returns the left padding of the view, plus space for the left Drawable if any.

int

getCompoundPaddingRight()Returns the right padding of the view, plus space for the right Drawable if any.

 

boolean:是否被选中。

boolean

isChecked()

 

设置Button的Drawable属性

void

setButtonDrawable(int resid)Set the background to a given Drawable, identified by its resource id.

 

设置是否选中

void

setChecked(boolean checked)Changes the checked state of this button.

 

改变当前的状态,true-->false  ;false-->true

void

toggle()Change the checked state of the view to the inverse of its current state

 

控件全局 绘制

void

onDraw(Canvas canvas)Implement this to do your drawing.

 protected void onDraw (Canvas canvas)

         实现你自己的绘制。

                   参数

                            canvas    在画布上绘制背景

   protected boolean verifyDrawable (Drawable who)

         如果你的视图子类显示他自己的可视化对象,他将要重写此方法并且为了显示可绘制返回true。此操作允许进行绘制时有动画效果。

  确认当重写从方法时,需调用父类相应方法。

                   参数

                            who         需判断的可绘制对象(Drawable)。如果是你要显示的对象,返回True,否则返回调用父类的结果。

                   返回值

                           boolean 如果可绘制对象(Drawable)已经在视图中显示,返回True否则返回false。并且此处不允许使用动画。

 

 

下面让我们来看看如何实现这个效果把:

 

一.使用ToggleButton控件实现:

使用ToggleButton控件十分方便,你可以看作他为一个CheckBox,只用设置它的button、background等几个属性即可。

首先:res--创建drawable文件夹 -- 创建switch_btn.xml资源文件--作以下配置

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector  
  3.   xmlns:android="http://schemas.android.com/apk/res/android">  
  4.     <item android:state_checked="true" android:drawable="@drawable/ios7_switch_on" />  
  5.     <item android:drawable="@drawable/ios7_switch_off" />  
  6. </selector>  

其中:android:state_checked="true" 表示选中on时候的,效果为:android:drawable="@drawable/ios7_switch_on" 

 

     反之就是未选中off情况下的效果:android:drawable="@drawable/ios7_switch_off"

之后在布局文件中写控件:

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. <ToggleButton  
  2.         android:id="@+id/mTogBtn"  
  3.         android:layout_width="wrap_content"  
  4.         android:layout_height="wrap_content"  
  5.         android:layout_gravity="center_horizontal"  
  6.         android:background="@android:color/transparent"  
  7.         android:button="@drawable/toggle_btn"  
  8.         android:checked="false"  
  9.         android:text=""  
  10.         android:textOff=""  
  11.         android:textOn="" />  

这里的    

 

android:textOn=""   表示:选中情况下显示的文本

android:textOff=""   表示:未选中情况下显示的文本

android:checked="false"  表示:初始化时候,默认是未选中的

android:button="@drawable/toggle_btn"  表示:button样式

android:background="@android:color/transparent"  表示:背景,这里不用它的默认背景,所以设置为透明

之后在主程序中实例化,并设置checked点击监听

 

[java] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. ToggleButton mTogBtn = (ToggleButton) findViewById(R.id.mTogBtn); // 获取到控件  
  2. mTogBtn.setOnCheckedChangeListener(new OnCheckedChangeListener() {  
  3.   
  4.     @Override  
  5.     public void onCheckedChanged(CompoundButton buttonView,boolean isChecked) {  
  6.         // TODO Auto-generated method stub  
  7.         if(isChecked){  
  8.             //选中  
  9.         }else{  
  10.             //未选中  
  11.         }  
  12.     }  
  13. });// 添加监听事件  

这样ToggleButton的开关切换就轻松实现了。

 

二.重写CompoundButton控件实现带滑动效果的开关按钮:

    重写CompuundButton的实现可能会显得相对繁琐些,主要是考虑状态是否已经选中等情况的文字显示。

    可以查看官方文档,之后继承CompuundButton,在布局的动画和显示上调用onDraw(Canvas canvas)重画既可以,如果想要加入拖动属性,那么在该VIEW内重写触摸事件onTouchEvent(MotionEvent ev)在里面判断拖动距离,之后根据拖动情况判断开关是on还是off。

    由于继承的是CompoundButton,所以里面的监听方法,setChecked等方法都是自带的,继承下来写操作就可以了,不用自己在去加判断什么的属性了。

    由于DEMO中的继承CompoundButton的SwitchButton是使用自定义配置的,所以如果不了解自定义配置的可以看以下文章:android 自定义控件 使用declare-styleable进行配置属性(源码角度)

    具体的这边不贴代码了,可以查看DEMO里面的,都有注释。

 

三.重写CheckBox控件实现带滑动效果的开关按钮:

    其实,看上面给的开发文档内容,大家都可以知道,CheckBox其实就是继承CompoundButton控件的,只是重构CheckBox会比CompoundButton方便好多,里面的很多方法都是写好的,只要自己去判断触摸事件onTouchEvent(MotionEvent ev),以及onDraw(Canvas canvas)重画就可以。这里DEMO中使用到的是第3放库内的一个控件,大致操作和上面其实大同小异。

 

四.重写View实现带滑动效果的开关按钮:

   众所周知,以上所有的控件都是继承了View这个父类,所以,如果你用View去操作的话,就没有自带方法的限制,可是要满足你要 实现的SwitchButton效果,你必须自己写开关状态监听接口,并且自己写setChecked方法实现同等的效果。在优化方面要自己多加细心考虑。其他操作与以上控件的重构大同小异。

    注意:由于状态切换等,enabled属性改变等,是你自定义的方法内的话,你必须自己去调用invalidate();方法,去让UI判断是否有更改并做出相应的变化。

例如:

 

[java] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. @Override  
  2. public void setEnabled(boolean enabled) {  
  3.     // TODO Auto-generated method stub  
  4.     mEnabled = enabled;  
  5.     mAlpha = enabled ? MAX_ALPHA : MAX_ALPHA/2;  
  6.     Log.d("enabled",enabled ? "true""false");  
  7.     super.setEnabled(enabled);  
  8.     invalidate();  
  9. }  
  10.   
  11. /** 自动判断切换至相反的属性 : true -->false ;false -->true */  
  12. public void toggle() {  
  13.     setChecked(!mSwitchOn);  
  14. }  
  15.   
  16.    /** 设置选中的状态(选中:true   非选中: false) */  
  17.    public void setChecked(boolean checked) {  
  18.     mSwitchOn = checked;  
  19.        invalidate();  
  20.    }  

还有,你如果是自定义的VIEW,你在里面设置了enabled属性,你必须在onTouchEvent(MotionEvent event)触摸操作的时候判断你所设置的enabled属性是否为true,是的话就可以相应点击事件,否则的话你要屏蔽掉点击事件。因为你自定义的view中的enabled属性并不知道他设定后会达到什么效果,这些都是要注意的点。

 

还有就是要设置接口监听状态变化:

 

[java] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. /**  
  2.  * 设置 switch 状态监听  
  3.  * */  
  4. public void setOnChangeListener(OnSwitchChangedListener listener) {  
  5.     switchListener = listener;  
  6. }  
  7. /**  
  8.  * switch 开关监听接口 
  9.  *  */  
  10. public interface OnSwitchChangedListener{  
  11.     public void onSwitchChange(SlideSwitchView switchView, boolean isChecked);  
  12. }  

 

 

有的人可能会希望有SwitchButton在enabled设置为false的时候,SwitchButton不能点击且要改变颜色,使他看过去是不能点击的。你可以进行如下操作(在学习别的人代码中得到的提示,学以致用):

先初始化透明度:255为不透明

 

[java] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. /** 最大透明度,就是不透明 */  
  2. private final int MAX_ALPHA = 255;  
  3. /** 当前透明度,这里主要用于如果控件的enable属性为false时候设置半透明 ,即不可以点击 */  
  4. private int mAlpha = MAX_ALPHA;  

之后重写setEnabled方法,通过这个方法判断enabled属性值

 

 

[java] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. @Override  
  2. public void setEnabled(boolean enabled) {  
  3.     // TODO Auto-generated method stub  
  4.     mEnabled = enabled;  
  5.     mAlpha = enabled ? MAX_ALPHA : MAX_ALPHA/2;  
  6.     super.setEnabled(enabled);  
  7.     invalidate();  
  8. }  

如果改变了enabled属性,系统便会查看UI是否需要变化,之后在UI方法onDraw(Canvas canvas)中调用:

 

 

[java] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. android.graphics.Canvas.saveLayerAlpha(RectF bounds, int alpha, int saveFlags)  

方法,其中的第2个属性alpha就是透明度,之后便可以实现相应的效果。

 

 

由于目前对于重写VIEW的onDraw方法的了解不是很深入,所以这里的DEMO中的几个方法都是查看网络之后加上自己的优化和注释演变过来,等这一块深入了后在重写写一篇关于这个的感受和使用说明。由于可能理解不是很深刻,如果有什么不足之处可以提出,谢谢。

 

最后让我们来看看效果如何,上图:

                      

 

 

最后上源码DEMO:下载地址

文章评论

 程序员的样子
程序员的样子
程序员的鄙视链
程序员的鄙视链
漫画:程序员的工作
漫画:程序员的工作
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
程序员都该阅读的书
程序员都该阅读的书
代码女神横空出世
代码女神横空出世
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
我的丈夫是个程序员
我的丈夫是个程序员
程序员应该关注的一些事儿
程序员应该关注的一些事儿
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
旅行,写作,编程
旅行,写作,编程
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
中美印日四国程序员比较
中美印日四国程序员比较
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
编程语言是女人
编程语言是女人
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
为什么程序员都是夜猫子
为什么程序员都是夜猫子
程序员和编码员之间的区别
程序员和编码员之间的区别
那些争议最大的编程观点
那些争议最大的编程观点
Java程序员必看电影
Java程序员必看电影
程序员必看的十大电影
程序员必看的十大电影
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
一个程序员的时间管理
一个程序员的时间管理
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
老程序员的下场
老程序员的下场
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
如何成为一名黑客
如何成为一名黑客
10个调试和排错的小建议
10个调试和排错的小建议
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有