UI设计中,按钮一般都会有多个状态,比如:聚焦、点击等,不同的状态必须显示不同的呈现形式(比如颜色、形状的改变),这样用户才能感觉到按钮被成功选中、点击了,否则用户体验就会非常差了。


本篇文章就简单地描述一下Android开发中,如何动态改变Button状态切换时的背景。


Android的UI设计中,默认情况下,系统会为Button的点击实现一个默认的背景切换。


例如下面这样的一个Button:


<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />


用户在点击Button的时候,会有一个蓝色外框显示出来,表明Button被点击了。如图所示:


211817938.png


但是,如果想为Button添加自定义的图片背景,如:


android:background="@drawable/upload"


那么,当你点击Button的时候会发现,Button啥反应都没有,在用户点击的时候Button的背景没有任何变化,用户无法知道到底点击成功了没有,所以,这不是一个好的用户体验。


当然,这种情况可以考虑使用ImageButton,如:


<ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/upload"/>


ImageButton会将src所指的图片缩小放入Button的方框内中央显示,Button点击前后的显示效果如图所示:

204544654.png

上面是采用系统默认的Button点击效果,那么,如果期望自己定义Button的点击效果,该如何实现呢?下面,我将介绍两种在Button被点击时改变背景的方式,一种是采用多张背景图片切换的方式,另一种是采用shape来定义Button状态切换的背景显示。


1.  多张背景图片切换


首先,为Button准备两张背景图片,一张是Button未点击时显示的图片,另一张是Button被点击时显示的图片,如图所示:


204629539.png

然后,在工程的res/drawable目录下创建一个 xml 文件,这里命名为:button_selector.xml


内容如下:


<?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/up_pressed"/>
    <item  
        android:state_pressed="false"
        android:drawable="@drawable/up"/> 
</selector>


说明:这里的selector标签就相当与Button状态的选择器,每一个item子项代表着Button的一种状态,这里我只选取了两种状态做示例,一种是Button被点击,另一种是Button未被点击。全部的Button状态可以参考Google Android Development相关网页:StateListDrawable


然后,在Button的标签中,把 background 属性的值改为 button_selector 即可:


android:background="@drawable/button_selector"


可以运行程序试试,当点击Button后,是不是Button的背景从左图变化成为右图了?


这种方法是比较直观简单的方法,在实际的工程中也大量使用,但也有一个缺陷,必须为所有的Button准备多张背景图片,为每一个状态准备一张,加大了UI设计的工作量,也加大了程序的大小。


2. 通过shape来自定义Button的UI显示


首先,定义两个xml文件,分别为shape_normal.xml ,shape_pressed.xml


文件中,定义shape的属性,shape的原理参考Google Android官方文档:


(1)shape_normal.xml


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#808080"
        android:endColor="#808080"
        android:angle="-90"/>
</shape>


(2) shape_pressed.xml


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FF7F00"
        android:endColor="#EE7600"
        android:angle="-90"/>
</shape>


然后,依然定义一个 button_selector.xml文件,只不过该selector的android:drawable所指的内容,由图片改为shape文件。


<?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/shape_pressed"/>
    <item  
        android:state_pressed="false"
        android:drawable="@drawable/shape_normal"/>
                                                                                                                                                         
</selector>


然后,将所需的Button的background依然指向该selector文件,即可实现自定义Button点击的背景切换效果.


采用这种方式的Button点击前后的效果如图所示:


205418353.png


shape可以定义的内容很丰富,包括圆角的设置,线条的粗细等等,这里不一一演示,可以自己修改后测试效果。


ImageButton也可以采用这种方法来自定义Button点击的背景颜色切换效果,不过要注意为ImageButton添加一个android:padding属性,使得src的图片与Button的边界有一定的距离,这样才能动态改变背景,因为ImageButton能改变的颜色只是src图片以外的背景区域,图片本身的颜色是不会变的。


<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/upload_pressed"
    android:padding="5dp"
    android:layout_centerVertical="true"
    android:background="@drawable/button_selector"/>


效果如图:

205507104.png

   这篇文章就写到这儿了,本文主要描述了如何为Button的点击动态改变背景,主要通过selector来实现,而具体的呈现形式可以通过多个图片背景切换,或者通过Shape标签来定义。文中有不清楚的地方欢迎留言讨论或者来信lujun.hust@gmail.com交流,或者关注我的新浪微博 @卢_俊 获取最新的文章和资讯。