Android xml 效果之 State List Drawable

今天填上一个重要的大坑。

Android xml 效果之 State List Drawable 、Color State List 

这两个在实际开发中很常用，可以设置用户各种操作时给予不同的响应状态，比如修改按钮、布局的点击效果等等。

第一个是设置背景等，第二个一般是设置字体的颜色变化等。

它们的用法几乎是一样的，所以放在一起

一、state list drawable 基本属性

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:constantSize=["true" | "false"]
    android:dither=["true" | "false"]
    android:variablePadding=["true" | "false"] >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:state_pressed=["true" | "false"]
        android:state_focused=["true" | "false"]
        android:state_hovered=["true" | "false"]
        android:state_selected=["true" | "false"]
        android:state_checkable=["true" | "false"]
        android:state_checked=["true" | "false"]
        android:state_enabled=["true" | "false"]
        android:state_activated=["true" | "false"]
        android:state_window_focused=["true" | "false"] />
</selector>

color state list 基本属性

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:color="hex_color"
        android:state_pressed=["true" | "false"]
        android:state_focused=["true" | "false"]
        android:state_selected=["true" | "false"]
        android:state_checkable=["true" | "false"]
        android:state_checked=["true" | "false"]
        android:state_enabled=["true" | "false"]
        android:state_window_focused=["true" | "false"] />
</selector>

属性说明：

节点：selector 根元素，包含一个或多个<item>

android:constantSize  设置图片是否拉伸，默认为false

android:dither 当位图和屏幕像素不同时，启用或禁止抖动位图

android:variablePadding 

节点： item 

android:drawable 指定图片资源

android:color 指定颜色值

android:state_pressed true=按下状态

android:state_focused true=获取输入焦点状态

android:state_hovered true=鼠标经过状态（悬停），要求 api 大于等于14

android:state_selected true=选中状态 

android:state_checkable true=可以被选中（用于可选择控件，比如单选框）

android:state_checked true=被选中状态

android:state_enabled 启用或禁用按钮

android:state_activated 激活状态，要求 api 大于等于11 

android:state_window_focused 应用程序窗口获取到焦点状态（父窗口获取焦点）

来源：参看官方文档 文档二

二、使用及效果

简单点可以直接使用图片

res/drawable/bg_btn.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/login_qq_d" android:state_pressed="true"/>
    <item android:drawable="@drawable/login_qq_n" android:state_pressed="false"/>

</selector>

也可以全xml实现，结合shape节点属性等，参看之前的文章 Android xml 效果之 Shape Drawable

res/drawable/bg_btn_border.xml

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"><shape android:shape="rectangle">
            <solid android:color="@color/white" />

            <padding android:bottom="10dip" android:left="15dip" android:right="15dip" android:top="10dip" />

            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />

            <stroke android:width="1.0dip" android:color="@color/btn_pressed" />
        </shape></item>
    <item android:state_selected="true"><shape android:shape="rectangle">
            <solid android:color="@color/white" />

            <padding android:bottom="10dip" android:left="15dip" android:right="15dip" android:top="10dip" />

            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />

            <stroke android:width="1.0dip" android:color="@color/btn_selected" />
        </shape></item>
    <item android:state_focused="true"><shape android:shape="rectangle">
            <solid android:color="@color/white" />

            <padding android:bottom="10dip" android:left="15dip" android:right="15dip" android:top="10dip" />

            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />

            <stroke android:width="1.0dip" android:color="@color/btn_selected" />
        </shape></item>
    <item><shape android:shape="rectangle">
            <solid android:color="@color/white" />

            <padding android:bottom="10dip" android:left="15dip" android:right="15dip" android:top="10dip" />

            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />

            <stroke android:width="1.0dip" android:color="@color/btn_normal" />
        </shape></item>

</selector>

这里要注意 state 的顺序

state=默认状态，这个要写在最后面，不然会影响到后面state起作用

设置文本颜色变化，思路是一样的

res/drawable/txt_color.xml

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" android:color="@color/btn_pressed"/>
    <item android:state_selected="true" android:color="@color/btn_selected"/>
    <item android:state_pressed="false" android:color="@color/btn_normal"/>

</selector>

调用方法，基本上都是 android:background

<?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="fill_parent"
    android:background="@color/white"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="10dip" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_btn"
        android:clickable="true" />

    <TextView
        android:id="@+id/txt_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:background="@drawable/bg_btn_border"
        android:clickable="true"
        android:text="测试的按钮"
        android:textColor="@drawable/txt_color" />

    <EditText
        android:id="@+id/edt_test"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:background="@drawable/bg_btn_border" />

</LinearLayout>

其中，

ImageView 有默认、点击两个效果

TextView 有默认、点击、选中三个效果

EditText 有默认、点击、获取焦点三个效果

效果图如下

以上。