Android开发中view状态变化样式篇

1 首先是 定义 item的 selector     \drawable\listview_item_pressed.xml

[html]  view plain copy print ?

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

 

2 把selector 添加入 item ，这里采用的是 添加进 item 采用的布局文件中

[html]  view plain copy print ?

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="fill_parent"  
3.     android:background="@drawable/listview_item_pressed"  
4.     android:orientation="horizontal"  
5.     android:layout_height="56dp">...  

3 在 适配器中 getView 方法里 添加 点击事件，也可以在 listView 中的 onItemClick（）方法中处理

  

[java]  view plain copy print ?

1. convertView.setTag(position);  
2.    convertView.setOnClickListener(new View.OnClickListener() {  
3.          
4.        @Override  
5.        public void onClick(View v) {  
6.            // TODO Auto-generated method stub  
7.            if(oldView == null){  
8.                //第一次点击   
9.                oldView = v;  
10.                v.setBackgroundDrawable(mContext.getResources().getDrawable(R.drawable.listview_item_selected_bg));  
11.            }else{  
12.                //非第一次点击   
13.                //把上一次点击的 变化  
14.                oldView.setBackgroundDrawable(mContext.getResources().getDrawable(R.drawable.list_pressed));                     
15.            v.setBackgroundDrawable(mContext.getResources().getDrawable(R.drawable.listview_item_selected_bg));       
16.                //保存oldView          
17.              oldView = v;  
18.            }  
19.              
20.        }  
21.    });  
22.      
23.    if(oldView != null && (position == (Integer)oldView.getTag())){// 为点击 item  
24.        convertView.setBackgroundDrawable(mContext.getResources().getDrawable(R.drawable.listview_item_selected_bg));  
25.    }else{  
26.       convertView.setBackgroundDrawable(mContext.getResources().getDrawable(R.drawable.list_pressed));      
27.     }  

============================

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

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

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

例如下面这样的一个Button：

1 2 3

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

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

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

1	android:background="@drawable/upload"

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

当然，这种情况可以考虑使用ImageButton，如：

1 2 3 4

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

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

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

1.  多张背景图片切换

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

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

内容如下：

1 2 3 4 5 6 7 8 9

<? 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 即可：

1	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

1 2 3 4 5 6 7 8

<? 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

1 2 3 4 5 6 7 8

<? 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文件。

1 2 3 4 5 6 7 8 9 10

<? 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点击前后的效果如图所示：

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

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

1 2 3 4 5 6 7

< 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" />

效果如图：