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

来源：互联网发布：硬盘开盘数据恢复编辑：程序博客网时间：2024/06/07 12:17

　首先在布局文件中要有个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

这里写图片描述

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

这里写图片描述

源码正在上传，请关注

0 0