用户界面View之ViewFlipper



放弃该放弃的是无奈，放弃不该放弃的是无能，不放弃该放弃的是无知，不放弃不该放弃的是执著！

本讲内容：ViewFlipper 多页面管理控件

一、ViewFlipper 常用方法
setInAnimation:       设置View进入屏幕时候使用的动画
setOutAnimation:    设置View退出屏幕时候使用的动画
showNext:               调用该函数来显示ViewFlipper里面的下一个View
showPrevious:        调用该函数来显示ViewFlipper里面的上一个View
setFilpInterval:        设置View之间切换的时间间隔
startFlipping:           启动设置好的时间间隔来开始切换所有的View，切换会循环进行
stopFlipping:           停止View切换

示例一：利用ViewFlipper实现图片轮播

 

下面是res/layout/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" >

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

</RelativeLayout>

下面是res/anim/left_in.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:duration="2000"
        android:fromAlpha="0.5"
        android:toAlpha="1" />

</set>

下面是res/anim/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="0"
        android:toXDelta="-100%p" />

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

</set>

下面是res/anim/right_in.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:duration="2000"
        android:fromAlpha="0.5"
        android:toAlpha="1" />

</set>

下面是res/anim/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>

下面是MainActivity.java主界面文件：

public class MainActivity extends Activity {
	private ViewFlipper flipper;
	private int[] resId={R.drawable.pic1,R.drawable.pic2,R.drawable.pic3,R.drawable.pic4};

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		flipper=(ViewFlipper) findViewById(R.id.id_flipper);
		//ViewFlipper动态添加子View
		for(int i=0;i<resId.length;i++){
			flipper.addView(getImageView(resId[i]));
		}
		flipper.setInAnimation(this,R.anim.left_in);;
		flipper.setOutAnimation(this, R.anim.right_out);
		flipper.setFlipInterval(2000);
		flipper.startFlipping();
	}
	
	/**
	 * 获取一个ImageView对象
	 */
	private ImageView getImageView(int resId){
		ImageView image=new ImageView(this);
//		image.setImageResource(resId);//由图片大小显示
		image.setBackgroundResource(resId);//全屏显示
		return image;
	}
}

示例二：支持手势滑动的ViewFlipper

下面是MainActivity.java主界面文件：

public class MainActivity extends Activity {
	private ViewFlipper flipper;
	private float startX;//手指接触屏幕时X坐标
	private int[] resId={R.drawable.pic1,R.drawable.pic2,R.drawable.pic3,R.drawable.pic4};

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		flipper=(ViewFlipper) findViewById(R.id.id_flipper);
		//ViewFlipper动态添加子View
		for(int i=0;i<resId.length;i++){
			flipper.addView(getImageView(resId[i]));
		}
	}
	
	/**
	 * 获取一个ImageView对象
	 */
	private ImageView getImageView(int resId){
		ImageView image=new ImageView(this);
		image.setBackgroundResource(resId);//全屏显示
		return image;
	}
	
	/**
	 * 屏幕手势滑动方法
	 */
	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:
			//向右滑动(50是一段很短的距离)
			if(event.getX()-startX>50){
				 flipper.setInAnimation(this, R.anim.left_in);
				 flipper.setOutAnimation(this, R.anim.right_out);
				 flipper.showNext();
			}
			//向左滑动
			if(startX-event.getX()>50){
				 flipper.setInAnimation(this, R.anim.right_in);
				 flipper.setOutAnimation(this, R.anim.left_out);
				 flipper.showPrevious();
			}
			break;
		}
		
		return super.onTouchEvent(event);
	}
}

Take your time and enjoy it