11 使用ViewFlipper实现屏幕切换动画效果
11-1 使用ViewFlipper实现的图片轮播
Android系统自带的一个页面管理控件，它可以实现子界面的自动切换。
为ViewFlipper加入View
（1）静态导入：在layout布局文件中直接导入
在layout布局文件中直接导入（不灵活）,在ViewFlipper控件中加入一个一个的ImageView.
<ViewFlipper android:id="@+id/viewFlipper1" android:layout_width="match_parent" android:layout_height="wrap_content" > <ImageView android:id="@+id/imageView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/icon" /> <ImageView android:id="@+id/imageView2" android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/qiao" /> <ImageView android:id="@+id/imageView3" android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/qiao" /> </ViewFlipper>
（2）动态导入：addView()方法
flipper.addView(getImageView(R.drawable.pic));
flipper=(ViewFlipper)findViewById(R.id.flipper);
flipper.addView(getImageView(R.drawable.pic1));
flipper.addView(getImageView(R.drawable.pic2));
flipper.addView(getImageView(R.drawable.pic3));
ViewFlipper常用方法：
setInAnimation(this,R.anim.left_in);//设置View进入屏幕的时候使用的动画。，R.anim.left_in自定义进入动画效果
setOutAnimation(this,R.anim.left_out);//设置View退出屏幕的时候使用的动画。
showNext：调用该函数来显示ViewFlipper里面的下一个View
showPrevious：调用该函数来显示ViewFlipper里面的上一个View
setFlipInterval(3000);//视图切换的时间间隔
startFlipping;//使用上面设置的时间间隔开始切换所有的View，切换会循环进行
stopFlipping:停止View切换
利用ViewFlipper实现的图片轮播
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:fromAlpha="0.5" android:toAlpha="1" android:duration="2000" /> </set>
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>
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>
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
package com.example.andriod2_viewflipper; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.widget.ImageView; import android.widget.ViewFlipper; public class MainActivity extends Activity { private ViewFlipper flipper; // 1. 把资源的ID写在数组里 private int[] resId = { R.drawable.pic1, R.drawable.pic2, R.drawable.pic3, R.drawable.pic4 }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); flipper = (ViewFlipper) findViewById(R.id.flipper); // 动态导入的方式为ViewFlipper加入子View // 2.遍历数组，添加的是图片信息 for (int i = 0; i < resId.length; i++) { flipper.addView(getImageView(resId[i])); } // 4.为ViewFlipper去添加动画效果图片切换及动画效果 flipper.setInAnimation(this, R.anim.left_in);// 进来效果 flipper.setOutAnimation(this, R.anim.left_out);// 出去效果 // 设定ViewFlipper视图切换的时间间隔 flipper.setFlipInterval(3000);// 播放的时间，毫秒值，3000毫秒即是3秒 // 开始播放 flipper.startFlipping();// 让动画动起来 } // 3.图片信息 private ImageView getImageView(int resId) { ImageView image = new ImageView(this); // image.setImageResource(resId);//图片原图 // 图片全屏 image.setBackgroundResource(resId); return image; } }
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ViewFlipper android:id="@+id/flipper" android:layout_width="match_parent" android:layout_height="match_parent" > </ViewFlipper> </LinearLayout>
11-2 （知识扩展）支持手势滑动的ViewFlipper
MainActivity.java
package com.example.andriod2_viewflipper; 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 { private ViewFlipper flipper; // 1. 把资源的ID写在数组里 private int[] resId = { R.drawable.pic1, R.drawable.pic2, R.drawable.pic3, R.drawable.pic4 }; // A.2声明记录变量,因为是横向滑动故只考虑X坐标。 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 // 2.遍历数组，添加的是图片信息 for (int i = 0; i < resId.length; i++) { flipper.addView(getImageView(resId[i])); } /* * // 4.为ViewFlipper去添加动画效果图片切换及动画效果 flipper.setInAnimation(this, * R.anim.left_in);// 进来效果 flipper.setOutAnimation(this, * R.anim.left_out);// 出去效果 // 设定ViewFlipper视图切换的时间间隔 * flipper.setFlipInterval(3000);// 播放的时间，毫秒值，3000毫秒即是3秒 // 开始播放 * flipper.startFlipping();// 让动画动起来 */ } // a.监视手势滑动事件的处理 @Override public boolean onTouchEvent(MotionEvent event) { // TODO Auto-generated method stub switch (event.getAction()) { // 手指点到屏幕上，手指落下 case MotionEvent.ACTION_DOWN: { // A.1记录刚开始手指落下的起始坐标 // A.3获得横向坐标的值 startX = event.getX(); break; } // 手指滑动 case MotionEvent.ACTION_MOVE: { // B.1判断向左还是向右滑 // B.2向右滑动是看前一页，100是指像素，相当于改写它的动画效果 if (event.getX() - startX > 100) { flipper.setInAnimation(this, R.anim.left_in); flipper.setOutAnimation(this, R.anim.left_out); flipper.showPrevious();// 显示前一页 } // B.3向左滑动看后一页 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); } // 3.图片信息 private ImageView getImageView(int resId) { ImageView image = new ImageView(this); // image.setImageResource(resId);//图片原图 // 图片全屏 image.setBackgroundResource(resId); return image; } }
ViewFlipper：
实例：支持手势滑动
第一步：加入onTouchEvent(MotionEvent event)方法，通过switch(event.getAction()){}设置手指各种活动时的程序运行的方式。
第二步：通过ACTION_Down获取的起始位置startX=event.getX()，与ACTION_MOVE获取的位置做比较，判断手指是向左划还是向右划。
第三步：为滑动方式设置flipper常用方法，看显示前一页还是显示后一页
