• 处女男学Android(七)---Android 应用资源之StateListDrawable




    前言



    本篇Blog将记录关于Android应用资源中最经常使用的一个Drawable资源——StateListDrawable,本来说应当继续写UI方面的内容,突然跳到应用资源这边,主要是由于之前写界面的时候有一个小效果不知道怎样实现。Android自带的Button点击的时候会有一个效果,即Button按下的时候背景色会发生改变,而Button弹起的时候背景色又恢复到原来的样子。

    这个效果看似非常easy。但着实不知道怎么做,由于实际应用的时候使用Button一般会改变背景,但仅仅给Button设置一个background是不行的,这样点击Button全然看不出点击效果。用户体验非常差。所以应当准备一个背景和一个点击的背景,让用户点击前后进行自己主动切换。假设是web页面的话那么这样的效果肯定是通过javascript的onmousedown和onmouseup这两个事件去实现,而Android呢?经过查找资料才发现是用过StateListDrawable这个对象实现的,以下通过和web的对照详细记录一下实现过程。



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



    以下就模仿一个百度的button,一般web页面的button是通过鼠标点击的。所以当鼠标移到button上(悬浮)、当鼠标移除button(离开)、当鼠标左键按下(按键按下)、当鼠标左键松开(按键抬起)时都会有背景切换的效果。我们能够先看看百度button的效果图:



    细致观察一下button的变化,不难发现一共同拥有3种背景,颜色由浅变深。从鼠标在button外部,到鼠标悬浮在button上,到按下鼠标左键点击button,然后从鼠标按键弹起,到鼠标悬浮在button上,再到鼠标离开button,颜色又由深变浅。

    以下通过一个简单的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" onmousemove="fun1();" onmouseout="fun2();" onmousedown="fun3(event);" onmouseup="fun4();">
    </body>
    </html>


    执行后的效果



    非常easy,是通过javascript的4个鼠标事件去完毕背景图的切换而已。

    安卓手机上的Button因为没有移动悬浮这样的情况,所以仅仅存在按下和弹起的效果,并且这一切都已经封装好了,我们仅仅须要使用就能够了。以下就详细记录一下用法。



    二、通过StateListDrawable设置button效果



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


    定义StateListDrawable对象的XML文件的根元素为<selector.../>,该元素能够包括多个<Item.../>元素。item元素能够指定下面属性:

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

    android:state_?

    ??

     指定一个特定状态,类似于javascript的事件。比方:按下、弹起、悬浮等等。

    以下通过一个表格看看这个state详细支持了哪些状态:


    了解了各“事件”以及含义,如今在安卓中实现上面的效果应该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>


    activity_main.xml:


    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="10dp"
        tools:context="com.example.fragmentdemo.MainActivity" >
    
        <Button
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:background="@drawable/ibtn_baidu_search"
            android:text="百度一下"
            android:textColor="#FFFFFF" />
    
    </LinearLayout>
    


    执行效果例如以下:




    三、总结



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




  • 相关阅读:
    【转】属性与字段的区别
    学习C/C++的经验谈(转)
    [C++语法] 关键字typedef用法(转)
    让我们习惯在底层用C++宏生成代码 (转)
    C/C++笔试题 (二)【转】
    C/C++笔试题 (三)【转】
    C语言 printf格式控制符 完全解析
    C/C++笔试题 (一)【转】
    C++内存管理详解(转)
    【转】 Source Insight设置
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/5381546.html
Copyright © 2020-2023  润新知