Android實用筆記——使用ViewFlipper實現屏幕切換動畫

一、ViewFlipper介紹

    Android系統自帶的一個多頁面管理控件，他能夠實現子界面的自切換。

 

二、爲ViewFlipper加入View

    a、靜態導入：在layout佈局文件中直接導入。在佈局文件中寫死，不靈活。

    b、動態導入：addView()方法：

 

三、ViewFlipper經常使用方法：

    setInAnimation    設置View進入屏幕時候使用的動畫

    setOutAnimation    設置View退出屏幕時候使用的動畫

    showNext    調用該函數來顯示ViewFlipper裏面的下一個View

    showPrevious    調用還函數來顯示ViewFlipper裏面的上一個View

    setFilpInterval    設置View之間切換的時間間隔

    startFlipping    使用上面設置的時間間隔來開始切換全部的View，切換會循環進行

    stopFlipping    中止View切換

 

四、應用

    a、設置動畫效果文件left_in.xml、left_out.xml

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

    <translate
        android:duration="2000"
        android:fromXDelta="-100%p"
        android:toXDelta="0" />
    <alpha 
        android:fromAlpha="0.5"
        android:toAlpha="1"
        android:duration="2000"
        />

</set>

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

    <translate
        android:duration="2000"
        android:fromXDelta="0"
        android:toXDelta="100%p" />

    <alpha
        android:duration="2000"
        android:fromAlpha="0.5"
        android:toAlpha="1" />

</set>

    b、編輯activity_main.xml文件

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

	<ViewFlipper 
	    android:id="@+id/flipper"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    >
	</ViewFlipper>

</RelativeLayout>

    c、編輯MainActivity.java文件

package com.example.myandroidviewflipper;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.MotionEvent;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class MainActivity extends Activity {
	//一、定義ViewFlipper對象
	private ViewFlipper flipper;
	
	//四、將圖片資源對應的ID寫在數組中
	private int[]resId={R.drawable.pic1,R.drawable.pic2,R.drawable.pic3,R.drawable.pic4};
	
	//八、聲明變量記錄手指座標
	private float startX;
    
	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        //二、初始化變量
        flipper=(ViewFlipper) findViewById(R.id.flipper);
       
        //三、動態導入的方式爲ViewFlipper加入子View,循環遍歷
        for(int i=0;i<resId.length;i++){
        	flipper.addView(getImageView(resId[i]));
        }     
       
        //十、註釋掉自動播放，以響應手指操做
        //四、設置ViewFlipper的動畫效果
        //flipper.setInAnimation(this,R.anim.left_in);
        //flipper.setOutAnimation(this, R.anim.left_out);
       
        //五、設置ViewFlipper切換時間間隔
        flipper.setFlipInterval(3000);
        
        //六、開始時間
        flipper.startFlipping();
    }
    
    //七、加入函數天添加手勢支持的操做
    public boolean onTouchEvent(MotionEvent event){
    	//九、編輯具體事件
    	switch(event.getAction()){
    		//手指落下
    		case MotionEvent.ACTION_DOWN:{
    			startX=event.getX();
    			break;
    		}
    		//手指滑動
    		case MotionEvent.ACTION_MOVE:{
    			break;
    		}
    		//手指離開
    		case MotionEvent.ACTION_UP:{
    			//向右滑動看前一頁
    			if(event.getX()-startX>100){
    				flipper.setInAnimation(this,R.anim.left_in);
    				flipper.setOutAnimation(this, R.anim.left_out);
    				flipper.showPrevious();//顯示前一頁
    			}
    			//向左滑動看後一頁
    			if(startX-event.getX()<100){
    				flipper.setInAnimation(this,R.anim.right_in);
    				flipper.setOutAnimation(this, R.anim.right_out);
    				flipper.showNext();//顯示前一頁
    			}
    			break;
    		}
    	}
		return super.onTouchEvent(event);
    }
    
    private ImageView getImageView(int resId){
    	ImageView image=new ImageView(this);
    	//這種方式設置的寬高是圖片原寬高，不是適應屏幕的，因此不能用這種方式改用另外一種方式
    	//image.setImageResource(resId);
    	image.setBackgroundResource(resId);
    	return image;
    }
}
//十一、發現有圖層疊加，咱們把效果的xml文件中的淡入淡出取消掉