Android之ViewFlipper实现手动+自动切换图片(附加动画效果)

ViewFlipper组件可以让你在activity中的一块区域实现自动动画效果切换图片的效果，若要手势切换，还需要GestureDetector的支持

首先写出布局文件，这里就简单的只添加一个ViewFlipper：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >
    
<!-- 为了使动画效果比较流畅这里还通过persistentDrawingCache设置了控件的绘制缓存策略，
    一共有4中策略：
    PERSISTENT_NO_CACHE 说明不在内存中保存绘图缓存；
    PERSISTENT_ANIMATION_CACHE 说明只保存动画绘图缓存；
    PERSISTENT_SCROLLING_CACHE 说明只保存滚动效果绘图缓存
    PERSISTENT_ALL_CACHES 说明所有的绘图缓存都应该保存在内存中。 -->
    
    <ViewFlipper 
        android:id="@+id/viewFlipper"
        android:layout_width="match_parent"
        android:layout_height="180dp" 
        android:inAnimation="@anim/anim_in_left"
        android:outAnimation="@anim/anim_out_left"
        android:persistentDrawingCache="animation"
        />
        
    
</LinearLayout>

然后写出几个定义动画的xml文件，这里只给出一个例子：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator">
    
    <translate
        android:duration="500"
        android:fromXDelta="100%"
        android:fromYDelta="0"
        android:toXDelta="0" 
        android:toYDelta="0" 
        />
    
    <!-- <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" 
        /> -->
    
</set>

最后写activity：

import android.os.Bundle;
import android.app.Activity;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class MainActivity extends Activity implements OnTouchListener {

    private ViewFlipper flipper = null;
    private GestureDetector gestureDetector = null;
    
    private int[] images = new int[] {R.drawable.pic_about_banner01, R.drawable.pic_about_banner02, R.drawable.pic_about_banner03};
    private static final int FLING_MIN_DISTANCE = 80;  
    private static final int FLING_MIN_VELOCITY = 150;  
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        flipper = (ViewFlipper) findViewById(R.id.viewFlipper);
        // 将所有待显示图片填充入ViewFlipper
        for (int i = 0; i < images.length; i++) {
            ImageView view = new ImageView(this);
            view.setBackgroundResource(images[i]);
            flipper.addView(view);
        }
        
        // 开启自动启动并设置时间间隔
        flipper.setAutoStart(true);
        flipper.setFlipInterval(4000);
        
         // 生成手势识别类实例  
        gestureDetector = new GestureDetector(this, new GerstureListener());
        // 给ViewFlipper设置一个TouchListener
        flipper.setOnTouchListener(this);  
        // 允许长按ViewFlipper
        flipper.setLongClickable(true);  
    }
    
    public boolean onTouch(View v, MotionEvent event) {
        // 将触屏事件交给手势识别类处理
        return gestureDetector.onTouchEvent(event);
    }
        
    private class GerstureListener implements OnGestureListener {
        public boolean onDown(MotionEvent e) {
            return false;
        }
         
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                float velocityY) {
             
            if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE  
                && Math.abs(velocityX) > FLING_MIN_VELOCITY) {  
                // 左滑时,按照规定动画切换
                flipper.setInAnimation(MainActivity.this, R.anim.anim_in_left);  
                flipper.setOutAnimation(MainActivity.this, R.anim.anim_out_left);  
                flipper.showNext();  
            } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE  
                && Math.abs(velocityX) > FLING_MIN_VELOCITY) {  
                // 右滑时,按照规定动画切换
                flipper.setInAnimation(MainActivity.this, R.anim.anim_in_right);  
                flipper.setOutAnimation(MainActivity.this, R.anim.anim_out_right);  
                flipper.showPrevious();  
            }  
            // 滑动动作完毕后,设置回右进左出的动画
            flipper.setInAnimation(MainActivity.this, R.anim.anim_in_left);  
            flipper.setOutAnimation(MainActivity.this, R.anim.anim_out_left);
            return false;  
        }
        
        @Override
        public void onLongPress(MotionEvent e) {
            // TODO Auto-generated method stub
            
        }
        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2,
                float distanceX, float distanceY) {
            // TODO Auto-generated method stub
            return false;
        }
        @Override
        public void onShowPress(MotionEvent e) {
            // TODO Auto-generated method stub
            
        }
        @Override
        public boolean onSingleTapUp(MotionEvent e) {
            // TODO Auto-generated method stub
            return false;
        }
    }
    
}

如上即可完成一个简单的自切图效果。只是在手动切图时不知道拖拽和动画如何同步进行，目前只能等做完手势才完成切图效果。但是这一点对一般使用没有太大影响。