Android UI中视图不同状态时显示不同外观

简介

Android UI中定义的View组件通常不会在不同的状态下有不同的外观，这很影响我们应用程序的用户体验度。比如，当一个按钮或者文本框被按下时，用户希望能够看到自己是否执行了操作，希望按钮或文本框被按下时显示一中更暗或者更亮的颜色以得到提示。要实现这样的效果很简单：我们在设置View（按钮等任何View）的图形图像背景(所有可以解析为XxxxDrawable的资源都可视为图形图像)时，不是指定一个单一的图形图像背景，而是指定一个图形图像背景的集合，他们是与View的状态(比如按钮被按下状态)相关连的，这样View在处于不同的状态下时就会有不同的外观。这个有状态的图形图像集合在Android中就是selector，它被Android解析以后是StateListDrawable对象，从字面意思上看，它是一个有状态列表的Drawable。

示例

功能说明

本例子中自定义了两种图形图像背景，白色填充有灰色边框的圆角矩形和灰色填充的圆角矩形，作为按钮正常状态和被按下状态时的背景。然后将它们配置在一个selector中，然后作为按钮的背景，按钮在被按下时会显示selector中配置的相应的背景。以上这三个东东都要放在res/drawable目录下作为图形图像来使用。

代码

1 白色填充有灰色边框的圆角矩形

文件名：res/drawable/shape_rounded_rectangle_grayborder.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- Android中图形图像资源定义，既然要当做一个图像来定义，那么它应该放在drawable目录下，并且以其文件基本名作为其引用 -->

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 图形填充颜色 -->

    <solid android:color="#ffffffff" />

    <!-- 边界线宽度及颜色 -->

    <stroke

        android:width="1dp"

        android:color="#ffbbbbbb" />

    <!-- 圆角大小，以圆的半径表示 -->

    <corners android:radius="8dp" />

    <!-- 图形内部边距 -->

    <padding

        android:bottom="10dp"

        android:left="10dp"

        android:right="10dp"

        android:top="10dp" />

</shape>

2 色填充的圆角矩形

文件名：res/drawable/shape_rounded_rectangle.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- Android中图形图像资源定义，既然要当做一个图像来定义，那么它应该放在drawable目录下，并且以其文件基本名作为其引用 -->

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 图形填充颜色 -->

    <solid android:color="#ffeeeeee" />

    <!-- 边界线宽度及颜色 -->

    <stroke

        android:width="1dp"

        android:color="#ffbbbbbb" />

    <!-- 圆角大小，以圆的半径表示 -->

    <corners android:radius="8dp" />

    <!-- 图形内部边距 -->

    <padding

        android:bottom="10dp"

        android:left="10dp"

        android:right="10dp"

        android:top="10dp" />

</shape>

3 有状态的背景集合

文件名：res/drawable/selector_bg_rectangle_gray123.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/shape_rounded_rectangle" android:state_pressed="true"/>

    <item android:drawable="@drawable/shape_rounded_rectangle_grayborder"/>

</selector>

4 Activity layout界面设计

文件名：res/layout/activity_selector_test.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@android:color/white"

    android:orientation="vertical" >

    <Button

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_margin="10dp"

        android:background="@drawable/selector_bg_rectangle_gray123"

        android:text="@string/lable_selector_gray123" />

</LinearLayout>

效果

按钮默认状态效果

按钮被按下时效果