使用Animation轮播图片

1. 效果：

      页面显示几幅图片，图片从右往左进行轮播。

 

2. 实现方式：

（1）工程目录结构：

(2) ImageActivity.java代码：

package com.app;

import com.test.R;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;

public class ImageActivity extends Activity {
	/** Called when the activity is first created. */

	public ImageView imageView;
	public ImageView imageView2;

	/*
	 * View Animation： 视图动画在古老的Android版本系统中就已经提供了，只能被用来设置View的动画。
		Drawable Animation： 这种动画（也叫Frame动画、帧动画）其实可以划分到视图动画的类别，
							专门用来一个一个的显示Drawable的resources，就像放幻灯片一样。
		Property Animation： 属性动画只对Android 3.0（API 11）以上版本的Android系统才有效，
							这种动画可以设置给任何Object，包括那些还没有渲染到屏幕上的对象。
							这种动画是可扩展的，可以让你自定义任何类型和属性的动画。
	 */
	public Animation animation1;
	public Animation animation2;
	
	public TextView text;

	public boolean juage = true;

	public int images[] = new int[] { R.drawable.f5, R.drawable.p1,
			R.drawable.wz1, R.drawable.f4, R.drawable.hwwq };

	public int count = 0;

	public Handler handler = new Handler();

	//  Runnable只是一个接口，它里面只有一个run()方法，没有start()方法
	//  即使实现了Runnable接口，那也无法启动线程，必须依托其他类。
	public Runnable runnable = new Runnable() {

		@Override
		public void run() {
			// 1 AnimationSet是Animation的子类
			// 2 一个AnimationSet包含了一系列的Animation
			// 3 针对AnimationSet设置一些Animation的常见属性
			AnimationSet animationSet1 = new AnimationSet(true);
			AnimationSet animationSet2 = new AnimationSet(true);
			
			imageView2.setVisibility(0);
			
			// 动画过渡， 一个从左向右的动画
			TranslateAnimation ta = new TranslateAnimation(
					Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,
					-1f, Animation.RELATIVE_TO_SELF, 0f,
					Animation.RELATIVE_TO_SELF, 0f);
			
			// 2秒
			ta.setDuration(2000);
			
			animationSet1.addAnimation(ta);
			
			// 有一个移动的动画紧跟一个淡出的动画，
			// 如果你不把移动的动画的setFillAfter置为true，
			// 那么移动动画结束后，View会回到原来的位置淡出，
			// 如果setFillAfter置为true， 就会在移动动画结束的位置淡出
			animationSet1.setFillAfter(true);
			
			ta = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 1.0f,
					Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,
					0f, Animation.RELATIVE_TO_SELF, 0f);
			
			// 2秒
			ta.setDuration(2000);
			
			animationSet2.addAnimation(ta);
			animationSet2.setFillAfter(true);
			
			//iamgeView 出去  imageView2 进来
			imageView.startAnimation(animationSet1);
			imageView2.startAnimation(animationSet2);
			
			imageView.setBackgroundResource(images[count % 5]);
			count++;
			imageView2.setBackgroundResource(images[count % 5]);
			
			text.setText(String.valueOf(count));
			
			// 调用此Runnable对象，以实现每6秒实现一次的定时器操作
			if (juage)
				handler.postDelayed(runnable, 6000);
			
			Log.i("handler", "handler");
		}

	};

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.image);
		imageView = (ImageView) findViewById(R.id.imageView);
		imageView2 = (ImageView) findViewById(R.id.imageView2);
		text=(TextView)findViewById(R.id.text);
		text.setText(String.valueOf(count));
		//将iamgeView先隐藏，然后显示
		imageView2.setVisibility(4);
		
		// 调用此Runnable对象，以实现每2秒实现一次的定时器操作
		handler.postDelayed(runnable, 2000);
	}

	public void onPause() {
		juage = false;
		super.onPause();
	}
}

（2） image.xml布局文件代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" 
	android:layout_width="fill_parent"
	android:layout_height="fill_parent" 
	android:id="@+id/rl" >
	
	<ImageView android:id="@+id/imageView" 
	    android:layout_width="fill_parent"
	    android:background="@drawable/f5" 	 
	    android:layout_below="@+id/rl"  	    
		android:layout_height="450dp" />
	
	<ImageView android:id="@+id/imageView2" 
	    android:layout_width="fill_parent"
	    android:background="@drawable/wz1" 
	    android:layout_below="@+id/rl"	    
		android:layout_height="450dp" />
	
	<TextView 
	    android:id="@+id/text"  
	    android:layout_width="fill_parent"  
		android:layout_height="wrap_content"  
		android:layout_below="@id/imageView"/>
</RelativeLayout>

（3）left_in.xml动画代码：

<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/accelerate_interpolator">
     <translate 
       android:fromXDelta="100%p" 
       android:toXDelta="0" 
       android:duration="2500"/>
</set>

（4）left_out.xml动画代码：

<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/accelerate_interpolator">
     <translate 
       android:fromXDelta="0" 
       android:toXDelta="-100%p" 
       android:duration="2500"/>
</set>

 （5）往res/drawable文件下，添加轮播图片。

（6）源码下载地址：

https://github.com/diaoguangqiang/android/blob/Image/IamgeTranslat.rar

至此结束。

3. 补充：

（1）轮播坐标系：

（2）若image.xml布局文件有问题，参考： https://blog.****.net/yingchunhua365/article/details/89163000 进行解决。