使用ViewFlipper+GestureDetector实现轮播图（APP引导页面）

　首先在布局文件中要有个ViewFlipper，这个可以用来加载View。可以在加载的View中做动画，但只能显示一个View。

实现步骤：

1.new出GestureDetector的对象系统会让你接口GestureDetector.OnGestureListener并且实现接口下需要重写的方法

2.new出ViewFlipper的对象系统会让你实现接口View.OnTouchListener（监听滑动时的操作）并且实现接口重写的方法

3.下面说一下OntouchListener和OnGestureListener的区别

我们可以通过MotionEvent的getAction()方法来获取Touch事件的类型，包括 ACTION_DOWN（按下触摸屏）, ACTION_MOVE（按下触摸屏后移动受力点）, ACTION_UP（松开触摸屏）和ACTION_CANCEL（不会由用户直接触发）。借助对于用户不同操作的判断，结合getRawX()、 getRawY()、getX()和getY()等方法来获取坐标后，我们可以实现诸如拖动某一个按钮，拖动滚动条等功能。**

可以看到OnTouchListener只能监听到三种触摸事件，即按下，移动，松开，如果想要监听到双击、滑动、长按等复杂的手势操作，这个时候就必须得用到OnGestureListener了。

4.通过手势滑动进行view间的切换，因为需要实现的是app的引导页面的功能，所以我们需要对view进行判断是否为最后一个view和第一个view，否则就会是个循环的轮播图具体实现的方法在下面已经贴出来的onFling方法里。

先上存储轮播图片容器的布局文件代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent" >
<ViewFlipper
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/viewFlipper"
android:inAnimation="@anim/slide_in_right"
android:outAnimation="@anim/slide_out_right">

</ViewFlipper>

</RelativeLayout>

程序轮播图为三张

以下为图片的XML文件：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">

<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/imageView"
android:layout_gravity="center_vertical"
android:background="@drawable/guit1" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="跳出"
android:id="@+id/guide_out1"
android:background="#00000000"
android:layout_gravity="right|top"
android:textSize="20dp" />

</FrameLayout>

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">

<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/imageView2"
android:layout_gravity="center_vertical"
android:background="@drawable/guit2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="跳出"
android:id="@+id/guide_out2"
android:background="#00000000"
android:layout_gravity="right|top"
android:textSize="20dp" />
</FrameLayout>

@Override
//左右滑动的事件执行方法
public boolean onFling(MotionEvent motionEvent, MotionEvent motionEvent1, float v, float v1) {
if (motionEvent.getX() - motionEvent1.getX()>0)
{
if (viewFlipper.getCurrentView()!=item03) {
viewFlipper.showNext();
//showShortToast("已向右滑动");
// Toast.makeText(this, "已向右滑动", Toast.LENGTH_SHORT).show();
}
else if (viewFlipper.getCurrentView()==item03)
{
startActivity(LoginActivity.class,null);//使用基类里面的方法
//                Intent intent = new Intent(Guide.this,MainActivity.class);
//                startActivity(intent);
finish();
}

}
else if (motionEvent1.getX() - motionEvent.getX()>0)
{
if (viewFlipper.getCurrentView()!=item01)
{
viewFlipper.showPrevious();
// showShortToast("已向左滑动");
// Toast.makeText(this,"已向左滑动",Toast.LENGTH_SHORT).show();
}
}
return true;

}

3.将3个ImageView添加进Flipper容器里

gestureDetector = new GestureDetector(this);
item01 = (getLayoutInflater().inflate(R.layout.viewflipper_one_layout,null));
item02 = (getLayoutInflater().inflate(R.layout.viewflipper_two_layout,null));
item03 = (getLayoutInflater().inflate(R.layout.viewflipper_three_layout,null));
viewFlipper = (ViewFlipper)findViewById(R.id.viewFlipper);
//将新的view添加到viewFlipper里，一共有3个引导页面
viewFlipper.addView(item01);
viewFlipper.addView(item02);
viewFlipper.addView(item03);

viewFlipper.setAutoStart(false);
viewFlipper.setOnTouchListener(this);

好了，大致的实现方法就是这样，下面贴出java代码

package com.example.as.my_baseacitivity.suffile;

import android.annotation.TargetApi;
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.ViewFlipper;

import com.example.as.my_baseacitivity.R;
import com.example.as.my_baseacitivity.activity.LoginActivity;
import com.example.as.my_baseacitivity.activity.MainActivity;
import com.example.as.my_baseacitivity.base.BaseActivity;

/**
* Created by as on 2015/9/2.
*/
public class Guide extends BaseActivity  implements GestureDetector.OnGestureListener, View.OnTouchListener{

private ViewFlipper viewFlipper;
View item01,item02,item03;
private GestureDetector gestureDetector;
@TargetApi(Build.VERSION_CODES.ECLAIR_MR1)
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

}

@Override
protected int getLayoutId() {
return R.layout.activity_guide;
}

@Override
protected void initViews() {
// setContentView(R.layout.activity_guide);
gestureDetector = new GestureDetector(this);
item01 = (getLayoutInflater().inflate(R.layout.viewflipper_one_layout,null));
item02 = (getLayoutInflater().inflate(R.layout.viewflipper_two_layout,null));
item03 = (getLayoutInflater().inflate(R.layout.viewflipper_three_layout,null));
viewFlipper = (ViewFlipper)findViewById(R.id.viewFlipper);
//将新的view添加到viewFlipper里，一共有3个引导页面
viewFlipper.addView(item01);
viewFlipper.addView(item02);
viewFlipper.addView(item03);

viewFlipper.setAutoStart(false);
viewFlipper.setOnTouchListener(this);
Button guide_out1 = (Button)findViewById(R.id.guide_out1);
guide_out1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//页面1跳出按钮的单击事件
startActivity(LoginActivity.class,null);//使用基类里面的跳转方法
//                Intent intent = new Intent(Guide.this, LoginActivity.class);
//                startActivity(intent);
finish();
}
});
Button guide_out2 = (Button)findViewById(R.id.guide_out2);
guide_out2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//页面2的跳出按钮的单击事件
startActivity(LoginActivity.class,null);//使用基类的跳转方法
//                Intent intent = new Intent(Guide.this, LoginActivity.class);
//                startActivity(intent);
finish();
}
});
Button button = (Button)findViewById(R.id.button);

button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//最后一个页面的进入登录界面的单击事件
startActivity(LoginActivity.class,null);
//                Intent intent = new Intent(Guide.this, LoginActivity.class);
//                startActivity(intent);
finish();

}
});
}

@Override
protected void init() {

}

@Override
protected void initialized() {

}

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

@Override
public void onShowPress(MotionEvent motionEvent) {

}

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

@Override
public boolean onScroll(MotionEvent motionEvent, MotionEvent motionEvent1, float v, float v1) {
return false;
}

@Override
public void onLongPress(MotionEvent motionEvent) {

}

@Override
//左右滑动的事件执行方法
public boolean onFling(MotionEvent motionEvent, MotionEvent motionEvent1, float v, float v1) {
if (motionEvent.getX() - motionEvent1.getX()>0)
{
if (viewFlipper.getCurrentView()!=item03) {
viewFlipper.showNext();
//showShortToast("已向右滑动");
// Toast.makeText(this, "已向右滑动", Toast.LENGTH_SHORT).show();
}
else if (viewFlipper.getCurrentView()==item03)
{
startActivity(LoginActivity.class,null);//使用基类里面的方法
//                Intent intent = new Intent(Guide.this,MainActivity.class);
//                startActivity(intent);
finish();
}

}
else if (motionEvent1.getX() - motionEvent.getX()>0)
{
if (viewFlipper.getCurrentView()!=item01)
{
viewFlipper.showPrevious();
// showShortToast("已向左滑动");
// Toast.makeText(this,"已向左滑动",Toast.LENGTH_SHORT).show();
}
}
return true;

}

@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
gestureDetector.onTouchEvent(motionEvent);
return true;
}

}

下面是实现效果图：

图 1



图 2



图 3



途中点击跳转和最后一个界面的按钮都可以进入登录界面



源码正在上传，请关注