郑德才博客

Android开发学习

图片左右滑动效果，第一种：手动切换图片，使用控件ViewFlipper

新建xml布局文件：activity_main.xml，代码内容：

<?xml version="1.0" encoding="utf-8"?>
<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/ViewFlipper1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitXY" >
    </ViewFlipper>

</LinearLayout>

使用线性布局LinearLayout，资源文件中的图片index1.jpg，index2.jpg，index3.jpg，index4.jpg

实现MainActivity.java代码： 

package com.zhengdecai.slidingeffect;

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

/**
 * 图片左右滑动效果-手动切换图片
 *
 * @author 郑德才
 *
 */
public class MainActivity extends Activity implements OnGestureListener {
 private ViewFlipper flipper;
 private GestureDetector detector;

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

  detector = new GestureDetector(this);
  flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper1);

  flipper.addView(addTextView(R.drawable.index1));
  flipper.addView(addTextView(R.drawable.index2));
  flipper.addView(addTextView(R.drawable.index3));
  flipper.addView(addTextView(R.drawable.index4));
 }

 /**
  * 添加图片资源到ViewFlipper中
  * */
 private View addTextView(int id) {
  ImageView iv = new ImageView(this);
  iv.setImageResource(id);
  return iv;
 }

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  // TODO Auto-generated method stub
  return this.detector.onTouchEvent(event);
 }

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

 @Override
 public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
   float velocityY) {
  if (e1.getX() - e2.getX() > 100) {
   this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,
     R.anim.push_left_in));
   this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,
     R.anim.push_left_out));
   this.flipper.showNext();
   return true;
  } else if (e1.getX() - e2.getX() < -100) {
   this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,
     R.anim.push_right_in));
   this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,
     R.anim.push_right_out));
   this.flipper.showPrevious();
   return true;
  }

  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;
 }

}

左右滑动后效果图：