一个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
语法:
-
<span class="pun"><?</span><span class="pln">xml version</span><span class="pun">=</span><span class="str">"1.0"</span><span class="pln"> encoding</span><span class="pun">=</span><span class="str">"utf-8"</span><span class="pun">?></span><span class="pln"> </span><span class="tag"><</span><a target=_blank style="color: rgb(202, 0, 0);">transition</a><span class="pln"> </span><span class="atn">xmlns:android</span><span class="pun">=</span><span class="atv">"http://schemas.android.com/apk/res/android"</span><span class="pln"> </span><span class="tag">></span><span class="pln"> </span><span class="tag"><</span><a target=_blank style="color: rgb(202, 0, 0);">item</a><span class="pln"> </span><span class="atn">android:drawable</span><span class="pun">=</span><span class="atv">"@[package:]drawable/</span><em>drawable_resource</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:id</span><span class="pun">=</span><span class="atv">"@[+][</span><em>package</em><span class="atv">:]id/</span><em>resource_name</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:top</span><span class="pun">=</span><span class="atv">"</span><em>dimension</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:right</span><span class="pun">=</span><span class="atv">"</span><em>dimension</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:bottom</span><span class="pun">=</span><span class="atv">"</span><em>dimension</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:left</span><span class="pun">=</span><span class="atv">"</span><em>dimension</em><span class="atv">"</span><span class="pln"> </span><span class="tag">/></span><span class="pln"> </span><span class="tag"></transition></span>
元素:
- 例子:
-
XML文件保存为:
res/drawable/transition.xml
:<span class="pun"><?</span><span class="pln">xml version</span><span class="pun">=</span><span class="str">"1.0"</span><span class="pln"> encoding</span><span class="pun">=</span><span class="str">"utf-8"</span><span class="pun">?></span><span class="pln"> </span><span class="tag"><transition</span><span class="pln"> </span><span class="atn">xmlns:android</span><span class="pun">=</span><span class="atv">"http://schemas.android.com/apk/res/android"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><item</span><span class="pln"> </span><span class="atn">android:drawable</span><span class="pun">=</span><span class="atv">"@drawable/on"</span><span class="pln"> </span><span class="tag">/></span><span class="pln"> </span><span class="tag"><item</span><span class="pln"> </span><span class="atn">android:drawable</span><span class="pun">=</span><span class="atv">"@drawable/off"</span><span class="pln"> </span><span class="tag">/></span><span class="pln"> </span><span class="tag"></transition></span>
在layout文件中使用:
<span class="tag"><ImageButton</span><span class="pln"> </span><span class="atn">android:id</span><span class="pun">=</span><span class="atv">"@+id/button"</span><span class="pln"> </span><span class="atn">android:layout_height</span><span class="pun">=</span><span class="atv">"wrap_content"</span><span class="pln"> </span><span class="atn">android:layout_width</span><span class="pun">=</span><span class="atv">"wrap_content"</span><span class="pln"> </span><span class="atn">android:src</span><span class="pun">=</span><span class="atv">"@drawable/transition"</span><span class="pln"> </span><span class="tag">/></span>
And the following code performs a 500ms transition from the first item to the second:
<span class="typ">ImageButton</span><span class="pln"> button </span><span class="pun">=</span><span class="pln"> </span><span class="pun">(</span><span class="typ">ImageButton</span><span class="pun">)</span><span class="pln"> findViewById</span><span class="pun">(</span><span class="pln">R</span><span class="pun">.</span><span class="pln">id</span><span class="pun">.</span><span class="pln">button</span><span class="pun">);</span><span class="pln"> </span><span class="typ">TransitionDrawable</span><span class="pln"> drawable </span><span class="pun">=</span><span class="pln"> </span><span class="pun">(</span><span class="typ">TransitionDrawable</span><span class="pun">)</span><span class="pln"> button</span><span class="pun">.</span><span class="pln">getDrawable</span><span class="pun">();</span><span class="pln"> drawable</span><span class="pun">.</span><span class="pln">startTransition</span><span class="pun">(</span><span class="lit">500</span><span class="pun">);</span>
参考
下面是实例:
1、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;
- }
- }
- }