首页 > 移动开发 > Android开发中view状态变化样式篇

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

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

[html][/html] view plaincopy

  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][/html] view plaincopy

  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][/java] view plaincopy

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

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

 

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

 


本文固定链接: http://www.devba.com/index.php/archives/3967.html | 开发吧

报歉!评论已关闭.