Android-ViewFlipper子界面自动轮播-学习笔记

1、概述

       Android系统自带的一个多页面管理控件，它可以实现子界面的自动切换。

2、导入方式

       （1）静态导入：在layout布局文件中直接导入。比如

                     <ViewFlipper

                            android:id=”@+id/flipper”

                            android:layout_width="match_parent"

                            android:layout_height="match_parent"

                            android:layout_marginTop=”10dp”

                            android:flipInterval=”4000”>

                           <ImageView

                                android:scaleType=”matrix”

                               android:id=”@+id/img1”

                               android:layout_width="match_parent"

                               android:layout_height="wrap_content"

                              />

                        <ImageView  ……>

                  </ViewFlipper>

       （2）动态导入：通过ViewFlipper对象的add()方法导入。

3、ViewFlipper常用方法

       *setInAnimation : 设置View进入屏幕时候使用的动画。

       *setOutAnimation: 设置View退出屏幕时候使用的动画。

       *setFlipInterval: 设置View之间切换的时间间隔。

       *showNext: 调用该函数来显示ViewFlipper里面的下一个View。

       *showPrevious: 调用该函数来显示ViewFlipper里面的上一个View。

       *startFlipping: 使用设置的时间间隔切换所有的View，切换会循环进行。

       *stopFlipping: 停止View切换。

 

4、示例，效果如下：

         

（1）主Activity：Activity2ViewFlipper.java

<span style="font-size:18px;">package com.sqb.demo2;
import com.sqb.app_im2.R;
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class Activity2ViewFlipper extends Activity{
	private ViewFlipper flipper;
	private int[] resId = {R.drawable.pic1,R.drawable.pic2,R.drawable.pic3,R.drawable.pic4};
	private float startX;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.layout2viewflipper);
	
		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();
	
	}
	//添加手势滑动功能，需要重写onTouchEvent方法
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub
		switch(event.getAction()){
		//手指落下
		case MotionEvent.ACTION_DOWN:
		{
			//一般是检测横向滑动
			startX = event.getX();
			break;		
		}
		//手指滑动
		case MotionEvent.ACTION_MOVE:
		{			
			//向右滑动
			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;
		}
		//手指离开
		case MotionEvent.ACTION_UP:
		{
			break;
		}
		}
		return super.onTouchEvent(event);
	}
	
	private ImageView getImageView(int resId){
		ImageView image = new ImageView(this);
		image.setImageResource(resId); //不能显示完屏幕
		//image.setBackgroundResource(resId);//铺满屏幕
		return image;
	}
}</span>

（2）布局文件：layout2viewfipper.xml

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
	<ViewFlipper
	    android:id="@+id/flipper"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent" />
</LinearLayout></span>

（3）动画布局文件：left_in.xml

<span style="font-size:18px;"><?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></span>

（4）动画布局文件：left_out.xml

<span style="font-size:18px;"><?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></span>

（5）动画布局文件：right_in.xml

<span style="font-size:18px;"><?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:duration="2000"
        android:fromAlpha="0.5"
        android:toAlpha="1" />
</set>
</span>

（6）动画布局文件：right_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="0"
        android:toXDelta="-100%p" />
    <alpha
        android:duration="2000"
        android:fromAlpha="0.5"
        android:toAlpha="1" />
</set>

完结