ToggleButton



ToggleButton、Switch、CheckBox和RadioButton都是继承自android.widget.CompoundButton,意思是可选择的,因此它们的用法都很类似。CompoundButton有两个状态,分别是checked和not checked。Switch是android4.0后出现的控件。但是这几个组件的默认图标都不太好看,怎样设置自己的图标风格呢?以下就是我的一种解决方案。

先看一下效果图,如下:




      

实现过程:

1.建立/res/drawable/setting_checkbox_button.xml

[html]  view plain  copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  3.   
  4.     <item android:drawable="@drawable/on_button" android:state_checked="true"/>  
  5.     <item android:drawable="@drawable/off_button" android:state_checked="false"/>  
  6. </selector>  

2、在values/styles.xml中添加如下代码:

[html]  view plain  copy
  1. <style name="MyToggleButton" parent="@android:style/Widget.CompoundButton">  
  2.        <item name="android:button">@drawable/setting_checkbox_button</item>  
  3.    </style>  

3.layout布局文件/res/layout/togglebutton_switch2.xml如下:

[html]  view plain  copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="wrap_content"  
  5.     android:id="@+id/layout1"  
  6.     android:gravity="center_horizontal">  
  7.   
  8.     <TextView  
  9.         android:id="@+id/text1"  
  10.         android:layout_width="wrap_content"  
  11.         android:layout_height="wrap_content"  
  12.         android:layout_alignParentTop="true"  
  13.         android:gravity="center"  
  14.         android:text="toggle is checked..." />  
  15.   
  16.     <ToggleButton  
  17.         android:id="@+id/togglebutton"  
  18.         android:layout_width="match_parent"  
  19.         android:layout_height="wrap_content"  
  20.         android:layout_below="@id/text1"  
  21.         android:background="#00000000"  
  22.         style="@style/MyToggleButton"  
  23.         android:checked="true"  
  24.         android:textOff="关闭"  
  25.         android:textOn="打开" />  
  26.   
  27.      <Switch  
  28.         android:id="@+id/witch"  
  29.         android:layout_width="wrap_content"  
  30.         android:layout_height="wrap_content"  
  31.         android:gravity="center"  
  32.         android:layout_below="@id/togglebutton"  
  33.         android:layout_alignLeft="@id/togglebutton"  
  34.         android:checked="true"  
  35.         android:textOff="关闭"  
  36.         android:textOn="打开"  
  37.         android:thumb="@drawable/tb_thumb"  
  38.         android:track="@drawable/tb_track" />  
  39.       
  40.       
  41.     <CheckBox  
  42.         android:id="@+id/check"  
  43.         style="@style/MyToggleButton"  
  44.         android:layout_width="match_parent"  
  45.         android:layout_height="wrap_content"  
  46.         android:layout_below="@id/witch"  
  47.         android:checked="true"  
  48.         android:textOff="关闭"  
  49.         android:textOn="打开" />  
  50.   
  51.     <RadioButton  
  52.         android:id="@+id/redio"  
  53.         style="@style/MyToggleButton"  
  54.         android:layout_width="match_parent"  
  55.         android:layout_height="wrap_content"  
  56.         android:layout_below="@id/check"  
  57.         android:checked="false"  
  58.         android:textOff="关闭"  
  59.         android:textOn="打开" />  
  60.   
  61.     <ToggleButton  
  62.         android:id="@+id/togglebutton2"  
  63.         android:layout_width="wrap_content"  
  64.         android:layout_height="wrap_content"  
  65.         android:button="@drawable/compound_button"  
  66.         android:layout_below="@id/redio"  
  67.         android:layout_alignLeft="@id/redio"  
  68.         android:visibility="gone"/>  
  69.       
  70.     <FrameLayout  
  71.         android:layout_width="wrap_content"  
  72.         android:layout_height="wrap_content"  
  73.         android:layout_below="@id/redio"  
  74.         android:layout_gravity="center"   
  75.         android:layout_alignLeft="@id/redio">  
  76.   
  77.         <Switch  
  78.             android:id="@+id/witch"  
  79.             android:layout_width="match_parent"  
  80.             android:layout_height="wrap_content"  
  81.             android:layout_gravity="left"  
  82.             android:checked="true"  
  83.             android:textOff="关闭"  
  84.             android:textOn="打开"/>  
  85.     </FrameLayout>  
  86.   
  87. </RelativeLayout>  

以上写的还有一问题,就是最后控件RadioButton点不了;还有就是把Android:layout_width="wrap_content"改成android:layout_width="match_parent"布局会出错。可能这个方法还不太好,我也是在学习中,欢迎大家一起讨论,有更好的实现方式请一定告诉我哦!微笑


有一个网友写的可以整个项目控制ToggleButton的风格,我看了一下,第2步 设置Style & Theme的地方 看不太懂,写 /res/drawable/themes.xml这个文件时在我这里会报错。 大家可以参考一下: http://blog.csdn.net/billpig/article/details/6634481
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值