现在的位置: 首页 > 综合 > 正文

android中自定义checkbox大小和图片

2013年09月15日 ⁄ 综合 ⁄ 共 2322字 ⁄ 字号 评论关闭

在编程过程中使用android自带的checkbox显示过大,在网上找了很多文章,终于使用自定义的checkbox使显示更加美观。

网上说:这个控件其实就是个TextView加了个图片,你只要做两张png的图片,在darwable中用xml定义好点击事件,再在你的控件上把这个当背景引进来就可以了。但是这样做了以后显示效果还是不佳。说说我的做法吧:

1、找两张图片http://findicons.com/search/checkbox# 分别为选中和没选中的。命名为checkbox和checkbox_empty

2、在drawable中创建文件checkbox_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"
  4. android:drawable="@drawable/checkbox" /><!--选中时效果-->
  5. <item android:state_checked="false"
  6. android:drawable="@drawable/checkbox_empty" /><!--未选中时效果-->
  7. <!-- 修改成你自己的图片就可以了 -->
  8. </selector>
  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"  
  4.         android:drawable="@drawable/checkbox" /><!--选中时效果--> 
  5.     <item android:state_checked="false"  
  6.         android:drawable="@drawable/checkbox_empty" /><!--未选中时效果--> 
  7.   <!-- 修改成你自己的图片就可以了 --> 
  8. </selector> 

注意:这里的状态是android:state_checked

3、在values中创建styles.xml:

<?xml version="1.0" encoding="utf-8"?>

<resources>

<style name="MyCheckBox" parent="@android:style/Widget.CompoundButton.CheckBox">

<item name="android:button">@drawable/checkbox_selector</item>

<item name="android:paddingLeft">25.0dip</item>

<item name="android:maxHeight">10.0dip</item>

</style>

</resources>

4、在你的CheckBox中添加属性:

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

经过以上步骤应该可以了。我对style和selector的使用也不熟悉,大家一起学习~

这里查过的资料有:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=70428

http://topic.csdn.net/u/20101030/12/705ede36-c873-4d07-af0d-34c6b9145480.html

http://blog.sina.com.cn/s/blog_7898b0530100rfgs.html

最后上个图吧:

抱歉!评论已关闭.