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就行了。第二种方法明显就比较繁琐,需要多建立一个文件,没有模块化。

 分类:
Android基础知识(15) 
 

目录(?)[+]

 

引言

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

selector的定义

selector就是状态列表(StateList), 它分为两种,一种Color-Selector 和Drawable-Selector。

Color-Selector

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

/res/color/filename.xml
  • 1

在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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

示例

在/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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

调用:

    <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" />
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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

Drawable-Selector

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

/res/drawable/filename.xml
  • 1

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

示例

<?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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

调用:

 <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" />
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

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

总结

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

转载于:https://www.cnblogs.com/totoo/p/selector.html

Android,`selector`是一个XML文件,用于定义不同状态下的视图样式。它可以应用于按钮、列表项、文本等视图元素,以根据不同的触摸或焦点状态显示不同的样式。 以下是使用`selector`属性的步骤: 1. 首先,在`res/drawable`目录下创建一个XML文件,例如`button_selector.xml`。 2. 在XML文件使用`selector`元素作为根元素,并在其定义不同状态下的样式。例如,你可以定义按下状态(`state_pressed`)和默认状态(`state_default`)下的样式。 ```xml <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@drawable/button_pressed" /> <item android:state_default="true" android:drawable="@drawable/button_default" /> </selector> ``` 在上面的示例,`button_pressed`和`button_default`是指向其他drawable资源的引用,可以是颜色、形状或图片等。 3. 然后,在你的布局文件(XML)使用这个`selector`作为按钮的背景属性。例如,你可以使用`android:background`属性来指定按钮的背景。 ```xml <Button android:id="@+id/myButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="My Button" android:background="@drawable/button_selector" /> ``` 现在,当按钮处于按下状态时,它将显示`button_pressed`的样式;否则,它将显示`button_default`的样式。 `selector`属性不仅可以应用于按钮,还可以应用于其他视图元素,如TextView、ImageView等。你可以根据需要在`selector`定义更多的状态和样式。 希望这可以帮助到你!如有任何疑问,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值