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