两种方法实现图片滑动案例

两种方法实现图片滑动案例

1. 手势检测法
   (1)第一步：让mainActivity实现GestureDetector.OnGestureListener接口，并实现其所有方法(共6个）
   (2)第二步：定义一个全局手势检测器
   (3)第三步：将要显示的图片加载到ViewFlipper中，并且初始化动画数组
   (4)第四步：在onFling（）中通过触摸事件的X坐标判断是向左还是向右滑动，并且设置相应的动画
   (5)第五步：将Activity上的触摸事件交给GestureDetector处理
2. 触摸监听器
   （1）定义图片数组
   （2）设置全屏显示
   （3）得到X坐标,设置触摸监听器

手势检测法

项目目录：

代码：

slide_in_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
    android:duration="1000"
    android:fromAlpha="0.5"
    android:toAlpha="1"></alpha>
</set>

slide_in_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="1000"
        android:fromAlpha="0.5"
        android:toAlpha="1"></alpha>
</set>

slide_out_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="1000"
        android:fromAlpha="1"
        android:toAlpha="0.5"></alpha>
</set>

slide_out_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
android:duration="1000"
android:fromAlpha="1"
android:toAlpha="0.5"></alpha>
    </set>

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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

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

MainActivity

package com.example.acer.shoushd;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ViewFlipper;

//第一步：让mainActivity实现GestureDetector.OnGestureListener接口，并实现其所有方法(一共6个）
public class MainActivity extends ActionBarActivity implements GestureDetector.OnGestureListener {
    //定义成员变量 动画数组，指定切换动画
    Animation[] animation = new Animation[4]; //4代表设置到四个动画资源
    final int distance = 50; //手势动作两点之间的最小距离
    private int[] images = {R.drawable.img001, R.drawable.img002, R.drawable.img003, R.drawable.img004, R.drawable.img005, R.drawable.img006};
ViewFlipper flipper;
//第二步：定义一个全局手势检测器
GestureDetector detector;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        detector=new GestureDetector(MainActivity.this,this);
//第三步：将要显示的图片加载到ViewFlipper中，并且初始化动画数组
        flipper= (ViewFlipper) findViewById(R.id.flipper);
        for (int i=0;i<images.length;i++){
            ImageView imageView=new ImageView(this);
            imageView.setImageResource(images[i]);
            flipper.addView(imageView);
        }
        //加载动画文件
        animation[0]= AnimationUtils.loadAnimation(this,R.anim.slide_in_left);
        animation[1]= AnimationUtils.loadAnimation(this,R.anim.slide_out_left);
        animation[2]= AnimationUtils.loadAnimation(this,R.anim.slide_in_right);
        animation[3]= AnimationUtils.loadAnimation(this,R.anim.slide_out_right);
    }


    @Override
    public boolean onDown(MotionEvent e) {
        return false;
    }

    @Override
    public void onShowPress(MotionEvent e) {

    }

    @Override
    public boolean onSingleTapUp(MotionEvent e) {
        return false;
    }

    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        return false;
    }

    @Override
    public void onLongPress(MotionEvent e) {

    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
// 第四步：在onFling（）中通过触摸事件的X坐标判断是向左还是向右滑动，并且设置相应的动画
        //从右向左滑
        if (e1.getX()-e2.getX()>distance){  //判断第一个点的坐标与第二个点的差
                    flipper.setInAnimation(animation[2]);
            flipper.setOutAnimation(animation[1]);  //右边进入左边出去
            flipper.showPrevious();
            return true;
        }else if (e2.getX()-e1.getX()>distance){
            flipper.setInAnimation(animation[0]);
            flipper.setOutAnimation(animation[3]);
            flipper.showNext();
            return true;
        }
        return false;
    }
//    第五步：将Activity上的触摸事件交给GestureDetector处理

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return detector.onTouchEvent(event); //super修改detector
    }
}

触摸监听器

package com.example.acer.huadongtup;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.AnimationUtils;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher;


public class MainActivity extends ActionBarActivity {
    private int[] arrayPicture = new int[]{R.drawable.img001, R.drawable.img002, R.drawable.img003, R.drawable.img004, R.drawable.img005, R.drawable.img006};  //定义图片数组，命名001是错误的
    private ImageSwitcher imageSwitcher;
    private int index;
    private float touchDownX;   //手指按下
    private float touchUpX;     //手指抬起

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //设置全屏显示
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        imageSwitcher = (ImageSwitcher) findViewById(R.id.imageswitcher);
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(MainActivity.this);
                imageView.setImageResource(arrayPicture[index]);
                return imageView;
            }
        });
        //得到X坐标,设置触摸监听器
        imageSwitcher.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (event.getAction() == MotionEvent.ACTION_DOWN) {
                    touchDownX = event.getX();
                    return true;
                } else if (event.getAction() == MotionEvent.ACTION_UP) {
                    touchUpX = event.getX();
                    if (touchUpX - touchDownX > 100) {
                        index = index == 0 ? arrayPicture.length - 1 : index - 1;
                        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_in_left)); //左边进入
                        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_out_right)); //右边滑出
                        imageSwitcher.setImageResource(arrayPicture[index]);
                    } else if (touchDownX - touchUpX > 100) {
                        index = index == arrayPicture.length - 1 ? 0 : index + 1;
                        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_in_right)); //右边进入
                        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_out_left)); //左边滑出
                        imageSwitcher.setImageResource(arrayPicture[index]);
                    }

                }
                return true;
            }
        });
    }
}