Drawable解析4——StateListDrawable和AnimationDrawable

「爱情、让人受尽委屈。」 2021-09-22 05:00 293阅读 0赞

1、估计StateListDrawable是大家用的最多一个drawable了，所有的控件背景基本上都使用了StateListDrawable，以实现其在不同状态下显示不同的效果，例如按钮的按下、选中、默认、禁用等多种模式状态。StateListDrawable用于管理一组drawable，每个drawable都对应一组状态，状态的选择类似于java中的switch-case组合，按照顺序比较状态，当遇到匹配的的状态，就返回对应的drawable，因此需要把最精确的匹配放置到最前面，整体按照从精确到粗略的顺序排列。在xml文件中使用selector作为根节点来定义StateListDrawable，并使用item作为子节点定义不同状态下的drawable。selector和item的属性如下：

![Center][]![Center 1][]

*  定义一个state\_list\_drawable.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="[http://schemas.android.com/apk/res/android][http_schemas.android.com_apk_res_android]">

<item android:drawable="@drawable/button\_normal" android:state\_focused="false" android:state\_pressed="false"/>

<item android:drawable="@drawable/button\_pressed" android:state\_pressed="true"/>

<item android:drawable="@drawable/button\_focused" android:state\_focused="true"/>

</selector>

*  当然我也可以不使用drawable，直接使用颜色也可以，编写state\_list\_color.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="[http://schemas.android.com/apk/res/android][http_schemas.android.com_apk_res_android]">

<item android:state\_focused="false" android:color="\#ffffff"/>

<item android:state\_focused="true" android:color="\#ff0000"/>

</selector>

*  在activity\_main.xml中为一个Button和EditText分别设置背景

<Button

android:id="@+id/button2"

android:layout\_width="wrap\_content"

android:layout\_height="wrap\_content"

android:background="@drawable/state\_list\_drawable"

android:text="按键效果" />

<EditText

android:layout\_width="match\_parent"

android:layout\_height="wrap\_content"

android:textColor="@drawable/state\_list\_color" >

</EditText>

2、AnimationDrawable代表一个动画，既支持逐帧动画又支持补间动画（补间动画已经属于动画的范畴了，但既然他也是Drawable，那就说一下吧）。先说下帧动画的使用方法，在xml文件中使用animation-list作为根节点定义AnimationDrawable，使用Item设置进行播放发每一帧所需的Drawable资源。可以使用android：oneshot属性设置是否循环播放。

写个例子：

<?xml version="1.0" encoding="utf-8"?>

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"

android:oneshot="false">

<itemandroid:drawable="@drawable/anim1"

android:duration="300"/> <itemandroid:drawable="@drawable/anim2" android:duration="300"/> <itemandroid:drawable="@drawable/anim3" android:duration="300"/></animation-list>

定义了AnimationDrawable之后，需要主动调用AnimationDrawable的start方法播放动画，注意在onCreate方法中调用start方法是没有任何效果的，这是因为此时View还没有完成初始化，可以使用handler来实现延迟播放动画，代码如下：

mHandler.postDelayed(new Runnable() \{

public void run() \{

(mAnimationDrawable.start();

\}, 300);

再说下补间动画的使用， 补间动画使用set作为根节点进行定义，结构如下：

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:interpolator="@\[package:\]anim/interpolator\_resource"

android:shareInterpolator=\["true"|"false"\]

android:duration="持续时间">

<alpha/>设置透明度的改变

<scale/>设置图片进行缩放改变

<translate/>设置图片进行位移变换

<rotate/>设置图片进行旋转

举个例子，在res\\anim\\my\_anim.xml定义

<?xml version="1.0" encoding="UTF-8"?>

<set xmlns:android="[http://schemas.android.com/apk/res/android][http_schemas.android.com_apk_res_android]"

android:interpolator="@android:anim/linear\_interpolator"

android:duration="5000">

<scale android:fromXScale="1.0"

android:toXScale="1.4"

android:fromYScale="1.0"

android:toYScale="0.6"

android:pivotX="50%"

android:pivotY="50%"

android:fillAfter="true"

android:duration="2000"

<translate android:fromXDelta="10"

android:toXDelta="130"

android:fromYDelta="30"

android:toYDelta="-80"

android:duration="2000"

</set>

在java代码中如下调用

mImageView2 = (ImageView) findViewById(R.id.imageView2);

mAnimationDrawable2=AnimationUtils.loadAnimation(this, R.anim.my\_anim);

// 设置动画结束后保留结束状态

mAnimationDrawable2.setFillAfter(true);

mButton1.setOnClickListener(new OnClickListener() \{

@Override

public void onClick(View v) \{

// TODO Auto-generated method stub

mImageView2.startAnimation(mAnimationDrawable2);

\});

看下最终效果吧：

![Center 2][]

[Center]: https://img-blog.csdn.net/20160518220421197?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20210920/a66507a7f5e242a6b5f94f5cae3ab02f.png
[http_schemas.android.com_apk_res_android]: http://schemas.android.com/apk/res/android
[Center 2]: /images/20210920/0f51ecabb4e84fb9a7a5c9348a6c317d.png