Android Drawable之TransitionDrawable

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); } }); }

效果如下：

width="640" height="480" src="https://www.youtube.com/embed/DHfl1Wl4Cdw" allowfullscreen="">

---

原文链接：https://liuzhichao.com/2016/android-transitiondrawable.html

其他几篇：

Android Drawable之LayerDrawable

Android Drawable之TransitionDrawable

Android Drawable之InsetDrawable

Android Drawable之ClipDrawable

Android Drawable之ScaleDrawable

Android Drawable之ShapeDrawable