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文件中的淡入淡出取消掉