Drawable學習之---TransitionDrawable

一個TransitionDrawable是一個特殊的Drawable對象，能夠實現兩個drawable資源之間淡入淡出的效果。

<transition>節點下的每一個<item>表明一個drawable資源。只能有兩個<item>。先前轉換調用startTransition()。向後，調用 reverseTransition()。

文件位於：

res/drawable/filename.xml
文件名做爲資源ID

編譯資源類型：

指向  TransitionDrawable的指針

資源引用：

In Java:  R.drawable.filename
In XML:  @[package:]drawable/filename

語法：

<?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>元素。

屬性：

xmlns:android

字符串類型， 必須的。定義XML文件的命名空間，必須是  "http://schemas.android.com/apk/res/android".

<item>

定義一個TransitionDrawable中所使用的一個drawable。必須是 <transition>子節點。能夠接受 <bitmap>子節點。

屬性：

android:drawable

Drawable 資源。 必須的。引用一個Drawable資源。

android:id

資源ID。drawable資源的惟一標識。 使用"@+id/name"方式來給這個item定義一個新的資源ID。可使用 View.findViewById() 或者 Activity.findViewById()等方式檢索和修改這個item。

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/on" />
    <item android:drawable="@drawable/off" />
</transition>

在layout文件中使用：

<ImageButton
    android:id="@+id/button"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/transition" />

And the following code performs a 500ms transition from the first item to the second:

ImageButton button = (ImageButton) findViewById(R.id.button);
TransitionDrawable drawable = (TransitionDrawable) button.getDrawable();
drawable.startTransition(500);

參考

• TransitionDrawable

下面是實例：

一、xml方式使用

transition.xml：

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

     <item android:drawable="@drawable/image01"/>
     <item android:drawable="@drawable/image02"/>

 </transition>

在layout中使用：

 <ImageView
     android:id="@+id/imgView"
     android:src="@drawable/transition"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"/>

在代碼中控制：

 ImageView imageView = (ImageView) findViewById(R.id.imgView);
         TransitionDrawable transitionDrawable = (TransitionDrawable) imageView.getDrawable();
         transitionDrawable.startTransition(3000);

下面是一個實例：實現多張圖片循環的淡入淡出的效果。

 package com.example.drawabletest;

 import android.app.Activity;
 import android.graphics.Bitmap;
 import android.graphics.BitmapFactory;
 import android.graphics.drawable.BitmapDrawable;
 import android.graphics.drawable.Drawable;
 import android.graphics.drawable.TransitionDrawable;
 import android.os.Bundle;
 import android.os.Handler;
 import android.os.Message;
 import android.widget.ImageView;

 public class MainActivity extends Activity {
     private int change=0;
     private int[] ids = new int[] { R.drawable.image1, R.drawable.image2, R.drawable.image3,
             R.drawable.image4, R.drawable.image5 };
     private Drawable[] drawables;
     private ImageView imageView;
     @Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         imageView = (ImageView) findViewById(R.id.imgView);

         /*得到合適的drawable資源*/
         BitmapFactory.Options opts = new BitmapFactory.Options();
         opts.inJustDecodeBounds = true;
         BitmapFactory.decodeResource(getResources(), R.drawable.image1, opts);
         opts.inSampleSize = computeSampleSize(opts, -1, 500 * 500);
         opts.inJustDecodeBounds = false;
         drawables=new Drawable[ids.length];
         try {
             for (int i = 0; i < ids.length; i++) {// for循環，加載5個drawable資源
                 Bitmap bmp = BitmapFactory.decodeResource(getResources(), ids[i], opts);
                 drawables[i] = new BitmapDrawable(bmp);
             }
         } catch (Exception e) {
             e.printStackTrace();
         }

         //開啓線程，改變transition
         new Thread(new MyRunnable()).start();

     }

     //處理transition的改變
     private Handler handler=new Handler(new Handler.Callback() {
         public boolean handleMessage(Message msg) {
             int duration=msg.arg1;
             TransitionDrawable transitionDrawable=null;
             transitionDrawable= new TransitionDrawable(new Drawable[] {
                         drawables[change%ids.length],//實現從0 1 2 3 4 5 0 1 2.。。這樣的不停轉變
                         drawables[(change+1)%ids.length] });
             change++;
             imageView.setImageDrawable(transitionDrawable);
             transitionDrawable.startTransition(duration);
             return false;
         }
     });

     //線程，去發送消息，讓transition一直改變
     private class MyRunnable implements Runnable{
         public void run() {
             while (true) {
                 int duration=3000;//改變的間隔
                 Message message=handler.obtainMessage();
                 message.arg1=duration;
                 handler.sendMessage(message);
                 try {
                     Thread.sleep(duration);
                 } catch (InterruptedException e) {
                     e.printStackTrace();
                 }
             }
         }
     }


     //計算合適的圖片大小
     public static int computeSampleSize(BitmapFactory.Options options, int minSideLength,
             int maxNumOfPixels) {
         int initialSize = computeInitialSampleSize(options, minSideLength, maxNumOfPixels);

         int roundedSize;
         if (initialSize <= 8) {
             roundedSize = 1;
             while (roundedSize < initialSize) {
                 roundedSize <<= 1;
             }
         } else {
             roundedSize = (initialSize + 7) / 8 * 8;
         }

         return roundedSize;
     }

     //計算合適的圖片大小
     private static int computeInitialSampleSize(BitmapFactory.Options options, int minSideLength,
             int maxNumOfPixels) {
         double w = options.outWidth;
         double h = options.outHeight;

         int lowerBound = (maxNumOfPixels == -1) ? 1 : (int) Math.ceil(Math.sqrt(w * h
                 / maxNumOfPixels));
         int upperBound = (minSideLength == -1) ? 128 : (int) Math.min(
                 Math.floor(w / minSideLength), Math.floor(h / minSideLength));

         if (upperBound < lowerBound) {
             // return the larger one when there is no overlapping zone.
             return lowerBound;
         }

         if ((maxNumOfPixels == -1) && (minSideLength == -1)) {
             return 1;
         } else if (minSideLength == -1) {
             return lowerBound;
         } else {
             return upperBound;
         }
     }
 }