自定义RadioButton&CheckBox样式的实现

自定义RadioButton&CheckBox样式的实现

• 博客分类： 
• android动画&效果

Blog HTML 

http://hi.baidu.com/ljlkings/blog/item/a7945124de875c038a82a1b4.html 

Android 自定义RadioButton的样式 

我们知道Android控件里的button，listview可以用xml的样式自定义成自己希望的漂亮样式。 
　　最近用到RadioButton，利用xml修改android:background="@drawable/button_drawable"，其中button_drawable为自己定义的.xml文件（res/drawable文件下），但是不成功，到网上查找，也没有正确的说法，我就开始自己尝试，最后做好了。 
　　其实方法很简单，同样在res/drawable新建radiobutton.xml如下 
　　

Xml代码  

1. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
2. 　　     <item  
3. 　　          android:state_enabled="true"  
4. 　　           android:state_checked="true"  
5. 　　          android:drawable="@drawable/check" />  
6. 　　     <item  
7. 　　           android:state_enabled="true"  
8. 　　           android:state_checked="false"  
9. 　　           android:drawable="@drawable/checknull" />  
10. 　　 </selector>  

　　1 check和checknull分别为选中和位选中的图片。 
　　1 然后在你的布局文件中，RadioButton 布局 
　　1 设置android:button = "@drawable/radiobutton"，就可以了！ 
　　前后图片对比如下： 

 


RadioButton修改样式 

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>   
2. <resources>   
3. <style name="CustomTheme" parent="android:Theme">   
4.    <item name="android:radioButtonStyle">@style/RadioButton</item>   
5. </style>   
6. <style name="RadioButton" parent="@android:style/Widget.CompoundButton.RadioButton">   
7.    <item name="android:button">@drawable/radio</item>   
8. </style>   
9. </resources>   

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>   
2.     <selector xmlns:android="http://schemas.android.com/apk/res/android">   
3.     <item android:state_checked="true" android:state_window_focused="false"   
4.         android:drawable="@drawable/radio_hover" />   
5.     <item android:state_checked="false" android:state_window_focused="false"   
6.         android:drawable="@drawable/radio_normal" />   
7.     <item android:state_checked="true" android:state_pressed="true"   
8.         android:drawable="@drawable/radio_active" />   
9.     <item android:state_checked="false" android:state_pressed="true"   
10.         android:drawable="@drawable/radio_active" />   
11.     <item android:state_checked="true" android:state_focused="true"   
12.         android:drawable="@drawable/radio_hover" />   
13.     <item android:state_checked="false" android:state_focused="true"   
14.         android:drawable="@drawable/radio_normal_off" />   
15.     <item android:state_checked="false" android:drawable="@drawable/radio_normal" />   
16.     <item android:state_checked="true" android:drawable="@drawable/radio_hover" />   
17.     </selector>   

Android 自定义CheckBox 样式 
http://www.pocketdigi.com/20110623/347.html 
1，新建Android XML文件，类型选Drawable,根结点选selector，在这定义具体的样式。 

Xml代码  

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:state_checked="true" android:state_pressed="true"  
4.         android:drawable="@drawable/focused" />  
5.     <item android:state_checked="false" android:state_pressed="true"  
6.         android:drawable="@drawable/normal" />  
7.     <item android:state_checked="false" android:drawable="@drawable/normal" />  
8.     <item android:state_checked="true" android:drawable="@drawable/focused" />  
9. </selector>  

2，应用到Checkbox与Button不同，并不是设置Background属性,而是设置style属性,所以我们要写一个style。 
在style.xml写一个style, 

Xml代码  

1. <style name="MyCheckBox" parent="@android:style/Widget.CompoundButton.CheckBox">  
2. <item name="android:button">@drawable/checkbox</item>  
3. </style>  

3，应用到Checkbox： 

Xml代码  

1. <CheckBox android:layout_width="wrap_content"   
2. android:layout_height="wrap_content"  
3. style="@style/MyCheckBox"  
4. />  

新浪搜索界面 用到 自定义RadioButton 
http://www.eoeandroid.com/thread-53703-1-1.html 

风格化的 Toggle Buttons 
http://blog.csdn.net/billpig/article/details/6634481 

事实上，可以使用ToggleButton来模仿CheckBox： 

Xml代码  

1. <ToggleButton android:layout_width="wrap_content"  
2.         android:layout_height="wrap_content"  
3.         android:background="@drawable/bg_toggle"/>  

bg_toggle.xml: 

Xml代码  

1. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
2.     <item android:state_checked="true" android:drawable="@drawable/toggle_me_on" />   
3.     <item android:drawable="@drawable/toggle_me_off" />  
4. </selector>  

让CheckBox的选择框显示在右边 

 

只要注意android:button和android:drawableRight就行了： 

Xml代码  

1. <style name="style_checkbox">  
2.         <item name="android:layout_width">wrap_content</item>  
3.         <item name="android:layout_height">wrap_content</item>  
4.         <item name="android:paddingRight">25dp</item>  
5.         <item name="android:paddingTop">5dp</item>  
6.         <item name="android:paddingBottom">5dp</item>  
7.         <item name="android:textColor">@color/white</item>  
8.         <item name="android:textSize">@dimen/font_middle</item>  
9.         <item name="android:textStyle">italic</item>  
10.         <item name="android:singleLine">true</item>  
11.         <item name="android:button">@null</item>  
12.         <item name="android:drawableRight">@drawable/mycheckbox</item>  
13.         <item name="android:drawablePadding">5dp</item>  
14.         <item name="android:background">@android:color/transparent</item>  
15.     </style>