Android Drawable之TransitionDrawable

原創

2020-02-22 21:01

Overview

从Drawable的类继承图上可以看到TransitionDrawable是LayerDrawable的子类，但是不像LayerDrawable可以有多层drawable,TransitionDrawable只能管理两层drawable，并且提供了一个透明度变化的动画，可以控制从一层drawable过度到另外一层drawable的渐变动画效果。

在xml文件中使用<transition>作为根节点来定义TransitionDrawable，通过item子节点定义两层使用的drawable。

创建和使用

TransitionDrawable同样可以使用xml文件或直接在代码中创建，但推荐使用xml文件的方式,除非你有特别的需求，需要在代码中设置或修改TransitionDrawable的属性等。
语法：

<?xml version="1.0" encoding="utf-8"?>
<transition
xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
</transition>

元素：
<transition>
必须的。必须作为根节点，包含一个或多个<item>元素。我们上面介绍了TransitionDrawable只能管理两层drawable，这里又说一个或多个是否矛盾了。在<transition>节点下确实可以有多个<item>元素，但是只会显示前面的两个<item>，后面添加的<item>虽然不会出错，但不会显示。
<item>
定义一个TransitionDrawable中所使用的一个drawable。必须是子节点。也可以接受子节点。item的属性如下：

android:id 资源ID。drawable资源的唯一标识。
android:drawable Drawable 资源。必须的。引用一个Drawable资源。
android:top Integer。与顶部的距离
android:right Integer。与右边的距离
android:bottom Integer。与下边的距离
android:left Integer。与左边的距离

使用举例：
新建一个xml文件保存为：res/drawable/transition.xml：

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/onboarding_slide1"/>
    <item android:drawable="@drawable/onboarding_slide2"/>
</transition>

在layout中使用：

 <ImageView
       android:id="@+id/imageview" 
       android:scaleType="centerCrop"
       android:src="@drawable/transition"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>

如下的代码会执行从第一个item到第二个item 5秒的过渡。

ImageView mImageView = (ImageView) findViewById(R.id.imageview);
TransitionDrawable trans = (TransitionDrawable) mImageView.getDrawable();
trans.startTransition(5000);

可重复渐变的TransitionDrawable

TransitionDrawable一般只能设置两张背景图片，而且动画效果不能重复。但是我们可以通过Handler+Thread实现TransitionDrawable循环渐变的效果。

public class MainActivity extends Activity {
    private ImageView mImageView;
    private TransitionDrawable trans;
    private int count;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setTheme(android.R.style.Theme_NoTitleBar_Fullscreen);
        setContentView(R.layout.activity_main);
        mImageView = (ImageView) findViewById(R.id.imageview);
        trans = (TransitionDrawable) mImageView.getDrawable();
        mHandler.post(splashThread);
    }
    Handler mHandler = new Handler(new Handler.Callback() {
        @Override
        public boolean handleMessage(Message msg) {
            if (msg.arg1 % 2 == 0) {
                trans.reverseTransition(msg.arg2);  // 反转动画，即从第二张过渡到第一张
            }else{
                trans.startTransition(msg.arg2); // 再从第一次过渡到第二张
            }
            mHandler.postDelayed(splashThread, msg.arg2);
            return false;
        }
    });
    Thread splashThread = new Thread(new Runnable() {
        @Override
        public void run() {
            Message msg = mHandler.obtainMessage();
            count++;
            msg.arg1 = count;
            msg.arg2 = 8000;  // 过渡时间为8秒
            mHandler.sendMessage(msg);
        }
    });
}