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>

View Code

 

而後寫出幾個定義動畫的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>

View Code

 

最後寫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;
        }
    }
    
}

View Code

 

如上便可完成一個簡單的自切圖效果。只是在手動切圖時不知道拖拽和動畫如何同步進行，目前只能等作完手勢才完成切圖效果。可是這一點對通常使用沒有太大影響。