Android之ViewFlipper实现手动+自动切换图片(附加动画效果)

ViewFlipper组件可以让你在activity中的一块区域实现自动动画效果切换图片的效果，若要手势切换，还需要GestureDetector的支持

首先写出布局文件，这里就简单的只添加一个ViewFlipper：

import android.os.Bundle;
import android.app.Activity;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class MainActivity extends Activity implements OnTouchListener {

private ViewFlipper flipper = null;
private GestureDetector gestureDetector = null;

private int[] images = new int[] {R.drawable.pic_about_banner01, R.drawable.pic_about_banner02, R.drawable.pic_about_banner03};
private static final int FLING_MIN_DISTANCE = 80;
private static final int FLING_MIN_VELOCITY = 150;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

flipper = (ViewFlipper) findViewById(R.id.viewFlipper);
// 将所有待显示图片填充入ViewFlipper
for (int i = 0; i < images.length; i++) {
ImageView view = new ImageView(this);
view.setBackgroundResource(images[i]);
flipper.addView(view);
}

// 开启自动启动并设置时间间隔
flipper.setAutoStart(true);
flipper.setFlipInterval(4000);

// 生成手势识别类实例
gestureDetector = new GestureDetector(this, new GerstureListener());
// 给ViewFlipper设置一个TouchListener
flipper.setOnTouchListener(this);
// 允许长按ViewFlipper
flipper.setLongClickable(true);
}

public boolean onTouch(View v, MotionEvent event) {
// 将触屏事件交给手势识别类处理
return gestureDetector.onTouchEvent(event);
}

private class GerstureListener implements OnGestureListener {
public boolean onDown(MotionEvent e) {
return false;
}

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {

if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE
&& Math.abs(velocityX) > FLING_MIN_VELOCITY) {
// 左滑时,按照规定动画切换
flipper.setInAnimation(MainActivity.this, R.anim.anim_in_left);
flipper.setOutAnimation(MainActivity.this, R.anim.anim_out_left);
flipper.showNext();
} else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE
&& Math.abs(velocityX) > FLING_MIN_VELOCITY) {
// 右滑时,按照规定动画切换
flipper.setInAnimation(MainActivity.this, R.anim.anim_in_right);
flipper.setOutAnimation(MainActivity.this, R.anim.anim_out_right);
flipper.showPrevious();
}
// 滑动动作完毕后,设置回右进左出的动画
flipper.setInAnimation(MainActivity.this, R.anim.anim_in_left);
flipper.setOutAnimation(MainActivity.this, R.anim.anim_out_left);
return false;
}

@Override
public void onLongPress(MotionEvent e) {
// TODO Auto-generated method stub

}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2,
float distanceX, float distanceY) {
// TODO Auto-generated method stub
return false;
}
@Override
public void onShowPress(MotionEvent e) {
// TODO Auto-generated method stub

}
@Override
public boolean onSingleTapUp(MotionEvent e) {
// TODO Auto-generated method stub
return false;
}
}

}

View Code

如上即可完成一个简单的自切图效果。只是在手动切图时不知道拖拽和动画如何同步进行，目前只能等做完手势才完成切图效果。但是这一点对一般使用没有太大影响。