漂亮的复选框

最新推荐文章于 2022-06-15 08:27:29 发布

原创最新推荐文章于 2022-06-15 08:27:29 发布 · 832 阅读

0 ·

CC 4.0 BY-SA版权

android 专栏收录该内容

62 篇文章

订阅专栏

本文介绍了在UI开发中自定义控件的重要性，并以CheckButton为例，详细讲解如何使用drawableEnd属性来实现更灵活的多选框展示。相比直接设置background，drawableEnd等属性能更好地控制显示位置，提供更佳用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义控件可以让UI界面更加的炫酷，更符合用户的习惯。因此，好的自定义控件在开发中是相当重要的。今天在学习CheckButton多选框时用了一个不常见的drawableEnd属性。相对应的还有:drawableBottom（下方）、drawableLeft（左方）、drawableRight（右方）、drawableTop（上方）、drawableEnd（结束的地方）、drawableStart（开始的地方）。一般都是直接设置background属性，但是background属性是直接作为背景使用，在调节显示位置的时候不太方便。采用drawablexxx属性就方便了很多。下面是一个简单实例。

实现效果如下：素材有点丑，注重效果的实现。

selector代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true"  android:drawable="@drawable/yescheckbox"/>  <!-- 被压下状态时 的背景 -->
	<item android:state_checked="true"  android:drawable="@drawable/yescheckbox"/>  <!-- 被选中时的背景 -->
	<item android:drawable="@drawable/nocheckbox"/>  <!-- 普通正常状态下的背景 -->
</selector>

xml中篮球代码如下：

<CheckBox
	        android:layout_marginLeft="20dp"
	        android:id="@+id/study_mycheckBox1"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:onClick="mycheckBoxChick"
	        android:text="篮球" 
	        android:<span style="color:#ff6666;">background</span>="@drawable/checkbox_selecter"
	        <span style="color:#ff6666;">android:button="@null"</span>/>   <!-- 该属性可将系统所带的框去掉 -->
		<!-- background设置的selecter -->

xml中足球代码如下：

 <CheckBox
	        android:layout_marginLeft="20dp"
	        android:id="@+id/study_mycheckBox2"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:onClick="mycheckBoxChick"
	        android:text="足球" 
	        android:<span style="color:#ff6666;">drawableEnd</span>="@drawable/checkbox_selecter"
	        android:button="@null"/>
	    <!--drawableEnd设置的 selecter -->
	    <!-- drawableEnd属性设置selecter会比background设置selecter有更好的效果 -->


 <CheckBox
	     android:layout_marginLeft="20dp"
	        android:id="@+id/study_mycheckBox5"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:onClick="mycheckBoxChick"
	        android:text="足球" 
	        android:<span style="color:#ff6666;">drawableBottom</span>="@drawable/checkbox_selecter"  
	        android:button="@null"/>

xml中乒乓球代码如下：

<CheckBox
	        android:layout_marginLeft="20dp"
	        android:id="@+id/study_mycheckBox3"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:onClick="mycheckBoxChick"
	        android:text="乒乓球"
	        android:<span style="color:#ff6666;">background</span>="@drawable/checkbox_selecter" 
	        />

<span style="white-space:pre">		</span><!-- 没有设置android:button属性 --><span style="white-space:pre">	</span>

在background不能实现的时候，就想想drawablexxx吧。