Android selector的用法及设置按钮不同状态下的背景图片

在 Android中,控件Button和ImageButton一般有三种状态:常态(normal)、点击状态(pressed)、聚焦状态 (focused)。

很多时候,我们为了提高用户的体验常常为Button以及ImageButton的不同状态设置不同的背景图片,下面将介绍一种利用selector设置Button和ImageButton不同状态下的背景图片的方法。

先来看看selector的一些基础知识:

<selector> 的根节点必须是<item>、可以包含一个或多个<item>元素
xmlns:android 填写String,必须定义XML的命名空间、必须是 "http://schemas.android.com/apk/res/android"
下面就来了解一下所有的<item>吧

android:state_pressed
Boolean类型:"true"表示按下状态使用(例如按钮按下)、"false"表示非按下状态使用

android:state_focused
Boolean类型:"true"表示聚焦状态使用(例如使用滚动球/D-pad聚焦Button);"false"表示非聚焦状态使用

android:state_selected
Boolean类型:"true"表示选中状态使用(例如Tab 打开);"false" 表示非选中状态使用

android:state_checkable
Boolean类型:"true"表示可勾选状态时使用;"false"表示非可 勾选状态使用、(只对能切换可勾选—非可勾选的构件有用、)

android:state_checked
Boolean类型:"true"表示勾选状态使用;"false"表示非勾选状态使用

android:state_enabled
Boolean类型:"true"表示可用状态使用(能接收触摸/点击事件)、"false"表示不可用状态使用

android:window_focused
Boolean类型:"true"表示应用程序窗口有焦点时使用(应用程序在前台)、"false"表示无焦点时使用(例如Notification栏拉 下或对话框显示)

具体使用步骤如下:
一、在res/drawable文件下创建selector.xml,示例代码如下:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="false"
        android:drawable="@drawable/title_button_back">
    </item>
    <item
        android:state_pressed="true"
        android:drawable="@drawable/title_button_back_h">
    </item>
    <item
        android:state_window_focused="false"
        android:drawable="@drawable/title_button_back">
    </item>
</selector>

二、编写布局文件,为布局文件中的ImageButton设置selector,示例代码如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent">
    <ImageButton
        android:id="@+id/title_IB"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:background="#00000000"
        android:layout_marginRight="4dp"
        android:layout_centerVertical="true"
        android:src="@drawable/selector"> ;
    </ImageButton>
</RelativeLayout>

到此就为ImageButton的不同状态设置了不同的背景图片。

发表回复

后才能评论