Android中selector的使用

第一种方法（强烈推荐）

方法：selector做遮罩，原图做background。

我们做按钮的时候经常需要用两个图片来实现按钮点击和普通状态的样式，这就需要提供两种图片，而且每个分辨率下还有多套图片，大大增加了apk的大小。

我们希望让这两张图片合二为一，而且还能实现两种或者多种状态，怎么做呢？我们首先建立一个圆形的selector，正常情况下是完全透明的，按下后透明度变小。

normal_bg_selector.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="oval">
            <solid android:color="#21000000" />
        </shape>
    </item>

    <item>
        <shape android:shape="oval">
            <solid android:color="#00000000" />
        </shape>
    </item>
</selector>

然后只需要问美工拿一张图片就好了，比如这张：

关键的一步来了，现在我们需要把selector文件当作遮罩，然后用上面的蓝色icon作为bg，放到一个ImageButton中：

<ImageButton
        android:layout_width="100dp"
        android:layout_height="100dp"
       
        android:src="@drawable/normal_bg_selector"
        android:background="@drawable/blue_btn_icon"
     
        />

最后只需要调整下padding就好了，如果你需要矩形的图片，就按照上面的方法建立一个矩形的遮罩即可。如果你们公司用的圆角矩形，直接问设计师要个圆角的标准就行，再建立一个selector文件吧。下面是最简单的原型和矩形的遮罩文件：

normal_oval_mask_selector.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="oval">
            <solid android:color="#21000000" />
        </shape>
    </item>

    <item>
        <shape android:shape="oval">
            <solid android:color="#00000000" />
        </shape>
    </item>
</selector>

normal_rectangle_mask_selector.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="#21000000" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#00000000" />
        </shape>
    </item>
</selector>

第二种方法（不推荐）

当然我们还有另一种方法来实现这个效果，用的是layer-list。先放一个selector做的遮罩，然后在遮罩下面叠加一个button的icon。这样就做好button按下后的样式。

blue_btn_selector_layerlist.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list   xmlns:android="http://schemas.android.com/apk/res/android">    
    <item android:drawable="@drawable/blue_btn_icon" />    
    <item android:drawable="@drawable/blue_btn_mask_shape" />    
</layer-list>

现在我们有了按钮普通的样式和按钮按下的样式，之后就可以建立一个selector：

blue_button_bg_selector.xml

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

    <item
        android:drawable="@drawable/blue_btn_icon" />
</selector>

最后就只需要在button的background设置这个blue_button_bg_selector.xml就行了。第二种方法明显就比较繁琐，需要多建立一个文件，没有模块化。

2015年11月05日 20:07:07 23446人阅读评论(5) 收藏举报

分类：

Android基础知识（15）

目录(?)[+]

引言

selector中文的意思选择器，在Android中常常用来作组件的背景，这样做的好处是省去了用代码控制实现组件在不同状态下不同的背景颜色或图片的变换。使用十分方便。

selector的定义

selector就是状态列表（StateList），它分为两种，一种Color-Selector 和Drawable-Selector。

Color-Selector

color-selector 就是颜色状态列表，可以跟color一样使用，颜色会随着组件的状态而改变。文件的位置存储于

/res/color/filename.xml

在Java中使用是：R.color.filename
在XML中使用是：@[package]color/filename

语法

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:color="hex_color"               //颜色值，#RGB,$ARGB,#RRGGBB,#AARRGGBB
        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>

示例

在/res/color/文件夹下新建test_color_selector.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="#ffff0000"/> <!-- pressed -->
    <item android:state_focused="true"
          android:color="#ff0000ff"/> <!-- focused -->
    <item android:color="#ff000000"/> <!-- default -->
</selector>

调用：

    <Button
        android:id="@+id/bt_about"
        style="@style/Button_style"
        android:layout_width="250dp"
        android:layout_height="50dp"
        android:layout_margin="5dp"
        android:textColor="@color/test_color_selector"
        android:text="@string/about" />

效果：注意字体颜色的变化
这里写图片描述

Drawable-Selector

drawable-selector 是背景图状态列表，可以跟图片一样使用，背景会根据组件的状态变化而变化。文件存储于

/res/drawable/filename.xml

Java中调用：R.drawable.filename
XML中调用：@[package:]drawable/filename

语法

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:constantSize=["true" | "false"]//drawable的大小是否当中状态变化，true表示是变化，false表示不变换，默认为false
    android:dither=["true" | "false"]//当位图与屏幕的像素配置不一样时(例如，一个ARGB为8888的位图与RGB为555的屏幕)会自行递色(dither)。设置为false时不可递色。默认true
    android:variablePadding=["true" | "false"] >//内边距是否变化，默认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>

示例

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/button_bg_press" />
    <item android:state_focused="true" android:drawable="@drawable/button_bg_press" />
    <item android:state_pressed="true" android:drawable="@drawable/button_bg_press"  />
    <item android:drawable="@drawable/button_bg_normol"  />
</selector>

调用：

 <Button
        android:id="@+id/bt_about"
        style="@style/Button_style"
        android:background="@drawable/button_selector"
        android:layout_width="250dp"
        android:layout_height="50dp"
        android:layout_margin="5dp"
        android:textColor="@color/test_color_selector"
        android:text="@string/about" />

效果：注意button背景变化
这里写图片描述

总结

selector是一种很好的方式，实现View状态变化后背景与颜色变化的，可以省去很多逻辑代码，掌握了之后既可以省去很多Java代码，还能写一些漂亮的UI。