Android之selector自定义背景实现1

Android之selector自定义背景实现1

文章链接：Android之selector自定义背景实现1

文章链接：Android之selector自定义背景实现2

知识点

1. selector和shap节点属性详解；
2. selector背景/点击反馈效果的XML文件实现；
3. selector背景/点击反馈效果的Java代码实现；
4. 新名词记录{StateListDrawable：和XML设置selector相同效果的代理类；GradientDrawable：设置按钮/控件背景的圆角/边框等的实现类；}

---

概述

毫无疑问，APP作为直接和用户打交道的载体，有一个至关重要的因素：用户体验。
- 在用户使用APP进行某项操作时，APP必须要给用户反馈（ANR不在本文的讨论之内），比如加载数据的时候需要有一个loading出来，最好是提供完成的百分比啦，比如点击了某一个控件（TextView、button）用不同的背景状态提示用户。在这里针对第二点进行说明。
- APP需要制定特殊的背景样式，圆角、边框、渐变颜色等等。

针对第一点：Android里面是对控件有自带的点击反馈效果的。在5.0之前，按下不放是有一个控件变灰的效果；在5.0开始，Google给控件加入了ripple的水纹扩散的pressed效果。图片我就不给出来了。相信大家手头都有5.0以上的机器。没得话在AS上开一个模拟器呗。

点击的反馈大部分Google已经帮我们做了，比如button和listview。但是，但是我们想要实现自己的点击反馈效果呢？或者是APP需要统一风格。这是一个需要取舍的问题。那么我们就来自己定义我们需要的点击反馈效果。

大家见得最多也用的最多的就是使用XML来实现了。第二种使用Java代码来实现可能大家比较少用到，毕竟不是既见既所得，需要比较熟悉了熟悉才能比较好的运用。

针对第二点：没什么好说的，直接实现就对了，产品说了算，苦逼的程序猿毫无反抗之力。

废话不多说，进入正题。

---

第一种方式：XML实现

首先我们在项目的res/drawable目录下面建立一个drawable resource file 的XML文件，默认是为根节点的。然后我们就可以在根节点下面实现节点，选择android:state_XXX状态和对应的android:drawable属性–完成。代码如下所示：

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

上面我写了两个状态，分别是：未按下(state_pressed=false)的默认状态时，是一个图片iv_add(随便那一个图片顶替的，可以自己设置图片)；按下不放(state_pressed=true)状态时，显示的图片是iv_mine。

这里有很多个的状态可以实现，每个状态的取值都是true/false，后面跟着一个drawable属性。他们分别是：

- android:state_enabled  是否可用状态
- android:state_activated  被激活状态
- android:state_active  处于激活状态
- android:state_checkable  是否可以选择状态
- android:state_checked  被选中状态
- android:state_drag_can_accept  是否可以被拖动状态
- android:state_drag_hovered  是否手指经过的状态
- android:state_focused  获取焦点状态
- android:state_hovered  是否经过状态
- android:state_first  这3货不清楚了
- android:state_middle  
- android:state_last  
- android:state_pressed  按下不放状态
- android:state_selected  被选择状态
- android:state_single  只有一个元素状态
- android:state_window_focused  整个窗体activity聚焦状态

在每一个状态，都需要对应一个android:drawable属性。如果是默认的话，android:state_XXX状态可以不写。
然后在需要用到的控件的background属性下面引用它就可以了。如下：

android:background="@drawable/bg_but_ensure"

注意他是放在drawable文件夹下面的。
这是最简单的用法之一。

---

是不是很简单的实现。看到这里(产品经理)：这也太快实现了吧；不行，这个，这个和那个控件还可以再优化优化，对用户更加美观和友好(顺便搞搞开发的家伙)。所以产品经理说话了：这个登录按钮(button)和展现用户名字的控件(TextView)需要一个圆角，还需要一个边框,加上之前的点击效果。

我天，内心一定在抓狂系不系？其实这个也容易实现(嘘，小声告诉你)。

首先我们需要知道shape这货。shape 节点有android:shape=”rectangle|ring|oval|line”等几个属性，他们分别是矩形|圆环|椭圆|直线。我们可以有选择性的使用。

在我们res/drawable文件夹下面建一个drawable resource file文件，更改根目录节点为，下面有以下几个节点：

- solid 填充控件的背景色：color
- corners 控件的圆角，radius设置四个圆角半径，还可以分别设置左上角，右上角，右下角和左下角的圆角半径
- stroke 设置边框宽度width和颜色color
- padding 设置内容和边界的距离，分别是左上右下四个距离，letf...bottom
- gradient 设置渐变颜色+角度+渐变中心等，他们有如下的属性分别设置各个效果startColor="" android:centerColor="" android:endColor=""
    android:gradientRadius=""
    android:centerX="" android:centerY=""
    android:angle=""
- size 设置控件的大小 <size android:height="5dp" android:width="19dp"></size>

大家可以组合设置下，看能产生怎样的图形。我这里实现一个固定大小带圆角边框的矩形给大家看一下，下面是示例代码。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white" />

    <corners android:radius="8dp" />

    <stroke
        android:width="2dp"
        android:color="#f00" />

    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />

    <size
        android:width="50dp"
        android:height="30dp" />

</shape>

上面的效果图如下

然后引用上面的XML文件，在selector的item节点下的drawable可以根据不同状态，按需引用上面文件，再在布局文件中使用就OK了。代码如下：

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

基本上到这里我们就可以解决大部分开发中遇到的点击反馈效果的需求了。

但是，我们决不能仅仅止步于此，后面还有诗和远方等着我们。

下一回，我们使用Java代码来实现以上效果。请戳Android之selector自定义背景实现2