Android:利用selector优化布局,提升用户体验

来源:互联网 发布:ubuntu 16.04 安装 编辑:程序博客网 时间:2024/05/21 16:59

在Android开发中,很多控件被点击或选择时都没有反馈,被点选时的背景就跟它们普通状态一样,没有特别的显示,而由于缺少反馈,用户就难以判别自己点选的控件是哪个,这对用户体验方面来说很不好。为此,可以利用selector为同一个控件设置不同状态下的背景,从而增强用户体验。

selector顾名思义是选择器的意思,它作用正如其名字一样,负责在不同状态下选择不同的资源。

使用selector的方法非常简单,就是在drawable文件夹下定义一个根标签为selector的xml布局文件,然后设置不同状态下引用不同的资源。


再利用 android:background="@drawable/你设置好的selector布局文件名字"  把定义好的selector作为drawable资源当作背景图案设置给想要优化体验的组件即可。


下面来分析selector,并解释如何设置不同状态选择不同资源,先看一段代码:

<selector xmlns:android="http://schemas.android.com/apk/res/android" >        <item android:state_pressed="false"        android:drawable="@color/before_pressed"></item>    <item android:state_pressed="true"        android:drawable="@color/pressed"></item>    </selector>

如上述代码,selector的整体结构很简单,就像定义普通布局一样,在父标签selector内嵌套子标签<item> ,而<item中写明了对应的状态(state),和该状态下所用的资源(drawable)。

android:state_pressed就是被点击状态,这里传入的值为false代表未被点击时的状态(即默认态),在该状态下,将引用color这一资源文件下的before_pressed作为当前drawable。而如果state_pressed传入的值为true,就代表是被点击时的状态,同理该状态下的drawable就是preesed了。(当然,pressed,before_pressed要自己预先定义好)


当然,selector中的状态远不止pressed(点击),同样的还有focused (获得焦点),checkable (checkbox选中时)等,都是能直接通过其英文名字了解其意思的,这里就不一一复述了。


selector的基本使用就是这样,整体大概可分为三个步骤:

1.在drawable目录下创建一个根标签为selector的布局文件

2.定义好不同的drawable资源

3.根据情境设置selector的item中的状态,并为不同状态指定对应的drawable资源  (例如你想控件被点击时背景不同,状态就是state_pressed,想获焦时不同状态就是state_focused)



更高级一点的用法:

不过,我们可以注意到<item>标签中的 一个属性是android:drawable ,经过前面的叙述,应该都知道这是该状态下引用的资源,这里我用的是color,我们还可以引用其他资源,就好比drawable本身,我们可以在drawable目录下定义两个根标签为shape的布局文件,一个作为默认状态的drawable,一个作为状态触发时的drawable。而shape标签下可以嵌套的子标签远比selector多,例如我们可以设置渐变色,圆角,边框等属性,从而实现各种酷炫的效果。shape内的子标签的使用,这里暂不详细讲,给出代码和效果图,各位可以自己琢磨下。


再说一下怎么把selector用到布局的控件中,例如该selector布局名为text_bg_selector.xml  ,要用时给控件设置 android:background="@drawable/text_bg_selector" 即可。

<selector xmlns:android="http://schemas.android.com/apk/res/android" >        <item android:state_pressed="false"        android:drawable="@drawable/text_bg_normal"></item>        <item android:state_pressed="true"        android:drawable="@drawable/text_bg_state"></item></selector>

text_bg_normal:

<shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">            <solid android:color="#ff0033"/>    <gradient android:startColor="#ff0033"        android:endColor="#ff9933"/>        <corners android:radius="40dp"        />        <stroke android:width="1dp"        android:color="#ffff00"/></shape>

text_bg_state:

<shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval" >        <solid android:color="#666699"/>    <gradient android:startColor="#666699"        android:endColor="#99cc00"/>    <stroke android:width="1dp"        android:color="#cc99cc"/></shape>


效果对比图:

默认状态(上面是演示基本用法,下面演示更高级一点的用法)


上面的控件被点击时,可以看到颜色改变了

  



下面的控件被点击时,不单止颜色改变,连形状都变了,原来的边框也换了颜色


0 0