处女男学Android（七）---Android 应用资源之StateListDrawable

Love The Way You Lie 2022-08-10 12:47 174阅读 0赞

前言

本篇Blog将记录关于Android应用资源中最常用的一个Drawable资源——StateListDrawable，本来说应当继续写UI方面的内容，突然跳到应用资源这边，主要是因为之前写界面的时候有一个小效果不知道如何实现，Android自带的Button点击的时候会有一个效果，即Button按下的时候背景色会发生改变，而Button弹起的时候背景色又恢复到原来的样子。这个效果看似很简单，但着实不知道怎么做，因为实际应用的时候使用Button通常会改变背景，但只给Button设置一个background是不行的，这样点击Button完全看不出点击效果，用户体验很差，所以应当准备一个背景和一个点击的背景，让用户点击前后进行自动切换。如果是web页面的话那么这种效果肯定是通过javascript的onmousedown和onmouseup这两个事件去实现，而Android呢？经过查找资料才发现是用过StateListDrawable这个对象实现的，下面通过和web的对比具体记录一下实现过程。

一、HTML+Javascript实现Button按下和弹起时切换图片

下面就模仿一个百度的按钮，一般web页面的按钮是通过鼠标点击的，所以当鼠标移到按钮上（悬浮）、当鼠标移除按钮（离开）、当鼠标左键按下（按键按下）、当鼠标左键松开（按键抬起）时都会有背景切换的效果，我们可以先看看百度按钮的效果图：

![20141021120620424][]

仔细观察一下按钮的变化，不难发现一共有3种背景，颜色由浅变深，从鼠标在按钮外部，到鼠标悬浮在按钮上，到按下鼠标左键点击按钮，然后从鼠标按键弹起，到鼠标悬浮在按钮上，再到鼠标离开按钮，颜色又由深变浅。下面通过一个简单的HTML模拟一下上面的效果：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
            <style type="text/css">
              #img1{
                  cursor: pointer;
              }
            </style>
    
            <script type="text/javascript">
                var num = 0 ;
                function fun1(){
                    document.getElementById("img1").src="2.jpg";
                }
    
                function fun2(){
                    document.getElementById("img1").src="1.jpg";
                }
    
                function fun3(event){
                    document.getElementById("img1").src="3.png";
                }
    
                function fun4(){
                    document.getElementById("img1").src="2.jpg";
                }
            </script>
    </head>
    <body>
    <img id="img1" src="1.jpg" οnmοusemοve="fun1();" οnmοuseοut="fun2();" οnmοusedοwn="fun3(event);" οnmοuseup="fun4();">
    </body>
    </html>

运行后的效果：

![20141021135049968][]

很简单，是通过javascript的4个鼠标事件去完成背景图的切换而已。安卓手机上的Button由于没有移动悬浮这种情况，所以只存在按下和弹起的效果，而且这一切都已经封装好了，我们只需要使用就可以了，下面就具体记录一下使用方法。

二、通过StateListDrawable设置按钮效果

StateListDrawable用于组织多个Drawable对象，当使用它作为目标组件的背景、背景图片时，StateListDrawable对象所显示的Drawable对象会随着目标组件状态的改变而自动切换，这也是我们所需要的。

定义StateListDrawable对象的XML文件的根元素为<selector.../>，该元素可以包含多个<Item.../>元素，item元素可以指定以下属性：

android:color或android:drawable 指定颜色或Drawable对象

android:state\_???  指定一个特定状态，类似于javascript的事件，比如：按下、弹起、悬浮等等。

下面通过一个表格看看这个state具体支持了哪些状态：

![Center][]

了解了各“事件”以及含义，现在在安卓中实现上面的效果应该so easy了吧！下面看看完整的例子。

**res/drawable/ibtn\_baidu\_search.xml:**

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

**a****ctivity\_main.xml:**

运行效果如下：

![20141021144118009][]

三、总结

本篇blog记录了android应用资源中StateListDrawable的简单使用方法，也没有什么技术点和难点，仅算是自己安卓学习路上的点滴积累吧，处女座的完美主义精神让我发现了这个需求，从而寻找方法，最终解决，我也明白了技术方面不能打马虎，有问题就要及时寻找解决方法，这样日积月累终有一天我相信我能成为一名合格的Android Develope !!!

[20141021120620424]: /images/20220810/85e9bfb4c3e04b8c970fec3e1a6fa090.png
[20141021135049968]: /images/20220810/0aeeac68eced407c9ac26cf17e55ab30.png
[Center]: /images/20220810/86672f0ed51749bbaa3a55e10e479c4e.png
[20141021144118009]: /images/20220810/340c7346db814390b5629aad15f925e1.png