前言
本篇Blog将记录关于Android应用资源中最常用的一个Drawable资源——StateListDrawable,本来说应当继续写UI方面的内容,突然跳到应用资源这边,主要是因为之前写界面的时候有一个小效果不知道如何实现,Android自带的Button点击的时候会有一个效果,即Button按下的时候背景色会发生改变,而Button弹起的时候背景色又恢复到原来的样子。这个效果看似很简单,但着实不知道怎么做,因为实际应用的时候使用Button通常会改变背景,但只给Button设置一个background是不行的,这样点击Button完全看不出点击效果,用户体验很差,所以应当准备一个背景和一个点击的背景,让用户点击前后进行自动切换。如果是web页面的话那么这种效果肯定是通过javascript的onmousedown和onmouseup这两个事件去实现,而Android呢?经过查找资料才发现是用过StateListDrawable这个对象实现的,下面通过和web的对比具体记录一下实现过程。
一、HTML+Javascript实现Button按下和弹起时切换图片
下面就模仿一个百度的按钮,一般web页面的按钮是通过鼠标点击的,所以当鼠标移到按钮上(悬浮)、当鼠标移除按钮(离开)、当鼠标左键按下(按键按下)、当鼠标左键松开(按键抬起)时都会有背景切换的效果,我们可以先看看百度按钮的效果图:
仔细观察一下按钮的变化,不难发现一共有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>
很简单,是通过javascript的4个鼠标事件去完成背景图的切换而已。安卓手机上的Button由于没有移动悬浮这种情况,所以只存在按下和弹起的效果,而且这一切都已经封装好了,我们只需要使用就可以了,下面就具体记录一下使用方法。
二、通过StateListDrawable设置按钮效果
StateListDrawable用于组织多个Drawable对象,当使用它作为目标组件的背景、背景图片时,StateListDrawable对象所显示的Drawable对象会随着目标组件状态的改变而自动切换,这也是我们所需要的。
定义StateListDrawable对象的XML文件的根元素为<selector.../>,该元素可以包含多个<Item.../>元素,item元素可以指定以下属性:
android:color或android: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 !!!