CheckBox的妙用

Android UI 之CheckBox的妙用

checkbox android drawableLeft drawableLeftPadding

        既发现TextView的妙用之后，在开发中又用类似的方法实现icon+text的扭按，之所以这样实现，是因为需求要求有类是开关状态，选中时同时改变图片和文字，并保持选中效果，CheckBox就兼具选中和图文（icon+text）特性，网上也有很多例子，不过大多都不尽完美，有各种适配问题，一般都是利用android:button的属性换成自己的图标，这时就会有个图标和文字间距的问题，网上一般的做法是设置android:paddingLeft，但是设置同样的dp不同分辨率的手机就会间距不一致，就连同样是小米系列的手机效果不一样，体验很差，那怎么实现呢？接下来，分享一下我的心得，欢迎交流指正。

          还是先看效果:

         如图所示点击后图标和文字同时变成蓝色，如果icon和text分开用ImageView和TextView画UI的话，需要代码手动感干预的就比较多，所以用CheckBox+selector就是一个不错的选择。来先看代码，在说注意的细节点。

[html]  view plain copy

1. <LinearLayout  
2.     android:id="@+id/bottom_layout"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="wrap_content"  
5.     android:layout_alignParentBottom="true"  
6.     android:gravity="center_horizontal|center_vertical"  
7.     android:orientation="horizontal"  
8.     android:paddingLeft="" >  
9.   
10.     <LinearLayout  
11.         android:id="@+id/setting_no_picture_layout"  
12.         android:layout_width="match_parent"  
13.         android:layout_height="50dp"  
14.         android:layout_weight="1"  
15.         android:background="@color/transparent"  
16.         android:gravity="center_horizontal|center_vertical"  
17.         android:orientation="horizontal" >  
18.   
19.         <CheckBox  
20.             android:id="@+id/setting_picture_check_box"  
21.             android:layout_width="wrap_content"  
22.             android:layout_height="match_parent"  
23.             android:drawableLeft="@drawable/sidebar_pic_or_nopic_toggle_selector"  
24.             android:drawablePadding="10dp"  
25.             android:button="@null"  
26.             android:background="@color/transparent"  
27.             android:text="@string/picture_or_nopic"  
28.             android:textColor="@drawable/checkbox_text_selector"  
29.             android:textSize="14sp" />  
30.     </LinearLayout>  
31.   
32.     <View  
33.         android:layout_width="1dp"  
34.         android:layout_height="match_parent"  
35.         android:layout_marginBottom="15dp"  
36.         android:layout_marginTop="15dp"  
37.         android:background="@color/slide_menu_listview_divider" />  
38.   
39.     <LinearLayout  
40.         android:id="@+id/setting_night_layout"  
41.         android:layout_width="match_parent"  
42.         android:layout_height="50dp"  
43.         android:layout_weight="1"  
44.         android:background="@color/transparent"  
45.         android:gravity="center_horizontal|center_vertical" >  
46.   
47.         <CheckBox  
48.             android:id="@+id/setting_night_check_box"  
49.             android:layout_width="wrap_content"  
50.             android:layout_height="match_parent"  
51.             android:drawableLeft="@drawable/sidebar_day_or_night_toggle_selector"  
52.             android:drawablePadding="8dp"  
53.             android:button="@null"  
54.             android:background="@color/transparent"  
55.             android:text="@string/day_or_night"  
56.             android:textColor="@drawable/checkbox_text_selector"  
57.             android:textSize="14sp" />  
58.     </LinearLayout>  
59. </LinearLayout>  

         代码大家都能看的懂，说说为什么这么写吧：

       1.为什么不在android:button中直接设置selector？

       是这样的，如果简单的替换还原有的button图标，就需要设置android:paddingLeft来改变icon和text之间的间距，这样适配起来很麻烦，不同分辨变率的手机显示间距不一致。用android：drawableLeft则可以很灵活的控制icon相对text的位置，并且不同分辨率间距也可以保持一致。

       2.为什么要将android:background设置透明颜色呢？

       这个是实践得出来的，因为在做侧边栏底部菜单时，在外层LinearLayout中设置gravity水平垂直居中时，小米4的怎么看着都不居中，而在小米2s和红米上都是正常的，后来设置background为透明就显示正常了。

       以上就是我的一点心得，希望对大家有所帮助。