Android学习笔记之滑动翻页（屏幕切换）

如何实现手机上手动滑动翻页效果呢？呵呵，在这里我们就给你们介绍一下吧。

一般实现这个特效会用到一个控件：ViewFlipper

<1>View切换的控件—ViewFlipper

这个控件是什么呢？请注意观看博文Android学习笔记之ViewFilpper 。

除了这个ViewFlipper，我们还需要了解一下ViewAnimator。它主要是为其中的View切换提供动画效果。

还会用到几个方法：

setInAnimation：设置View进入屏幕时候使用的动画。该方法有两个重载方法，即可以直接传入Animation对象，也可以传入定义的Animation文件的resourceID。

setOutAnimation：设置View退出屏幕时候使用的动画。使用方法和setInAnimation方法一样。

showNext：调用该方法可以显示FrameLayout里面的下一个View。

showPrevious：调用该方法可以来显示FrameLayout里面的上一个View。

以及它的属性：

属性名称	描述
android:inAnimation	（译者注：设置View进入屏幕时候使用的动画）
android:outAnimation	（译者注：设置View离开屏幕时候使用的动画）

第一个属性对应着第一个方法，第二个属性对应第二个方法。

<2>实现滑动

实现滑动就必须介绍一下GestureDetector：

GestureDetector类中可以用来检测各种手势事件。

该类有两个回调接口，分别用来通知具体的事件。

GestureDetector.OnDoubleTapListener：用来通知DoubleTap事件，类似于鼠标的双击事件，该接口有如下三个回调函数：

1. onDoubleTap(MotionEvent e)：通知DoubleTap手势，

2. onDoubleTapEvent(MotionEvent e)：通知DoubleTap手势中的事件，包含down、up和move事件（这里指的是在双击之间发生的事件，例如在同一个地方双击会产生DoubleTap手势，而在DoubleTap手势里面还会发生down和up事件，这两个事件由该函数通知）；

3. onSingleTapConfirmed(MotionEvent e)：用来判定该次点击是SingleTap而不是DoubleTap，如果连续点击两次就是DoubleTap手势，如果只点击一次，系统等待一段时间后没有收到第二次点击则判定该次点击为SingleTap而不是DoubleTap，然后触发SingleTapConfirmed事件。

GestureDetector.OnGestureListener：用来通知普通的手势事件，该接口有如下六个回调函数：

1. onDown(MotionEvent e)：down事件；

2. onSingleTapUp(MotionEvent e)：一次点击up事件；

3. onShowPress(MotionEvent e)：down事件发生而move或则up还没发生前触发该事件；

4. onLongPress(MotionEvent e)：长按事件；

5. onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)：滑动手势事件；

6. onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)：在屏幕上拖动事件。

本次仅用到了 OnGestureListener类中的onFling方法。其他手势事件各位可以自己回去试验。

public boolean onDown(MotionEvent arg0){return false;}public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY){return false;}public void onLongPress(MotionEvent e){}public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,float distanceY){return false;}public void onShowPress(MotionEvent e){}public boolean onSingleTapUp(MotionEvent e){return false;}

要实现屏幕切换的话，首先需要定义一个GestureDetector：

private GestureDetector mGestureDetector;

并在onCreate函数中初始化：

mGestureDetector = new GestureDetector( this);

同时Activity要继承OnGestureListener接口，并实现其中的onFling方法。

另外Activity的onTouchEvent事件也要实现！！

另外本例View切换时还有动画效果。使用Animation类实现，相关的函数：

setInAnimation：设置View进入屏幕时候使用的动画，该函数有两个版本:

一个接受单个参数，类型为android.view.animation.Animation；

一个接受两个参数，类型为Context和int，分别为Context对象和定义Animation的resourceID。

setOutAnimation: 设置View退出屏幕时候使用的动画，参数setInAnimation函数一样。
showNext：调用该函数来显示FrameLayout里面的下一个View。
showPrevious：调用该函数来显示FrameLayout里面的上一个View。

<4>范例

package xiaosi.ViewFlipper;import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ViewFlipper;public class ViewFlipperActivity extends Activity implements OnGestureListener
{/** Called when the activity is first created. */private int[] imageID = { R.drawable.a, R.drawable.b, R.drawable.c,R.drawable.d, R.drawable.e, R.drawable.f, R.drawable.g,R.drawable.h };private ViewFlipper viewFlipper = null;private GestureDetector gestureDetector = null;@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.main);viewFlipper = (ViewFlipper) findViewById(R.id.viewflipper);// 生成GestureDetector对象，用于检测手势事件gestureDetector = new GestureDetector(this);// 添加用于切换的图片for (int i = 0; i < imageID.length; i++){// 定义一个ImageView对象ImageView image = new ImageView(this);image.setImageResource(imageID[i]);// 充满父控件image.setScaleType(ImageView.ScaleType.FIT_XY);// 添加到viewFlipper中viewFlipper.addView(image, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));}}public boolean onDown(MotionEvent arg0){return false;}public boolean onFling(MotionEvent arg0, MotionEvent arg1, float arg2,float arg3){//对手指滑动的距离进行了计算，如果滑动距离大于120像素，就做切换动作，否则不做任何切换动作。// 从左向右滑动if (arg0.getX() - arg1.getX() > 120){// 添加动画this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,R.anim.push_left_in));this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,R.anim.push_left_out));this.viewFlipper.showNext();return true;}// 从右向左滑动else if (arg0.getX() - arg1.getX() < -120){this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,R.anim.push_right_in));this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,R.anim.push_right_out));this.viewFlipper.showPrevious();return true;}return true;}public void onLongPress(MotionEvent e){}public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,float distanceY){return false;}public void onShowPress(MotionEvent e){}public boolean onSingleTapUp(MotionEvent e){return false;}@Overridepublic boolean onTouchEvent(MotionEvent event){return this.gestureDetector.onTouchEvent(event);}
}

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" ><ViewFlipperandroid:id="@+id/viewflipper"android:layout_width="fill_parent"android:layout_height="fill_parent"/></LinearLayout>

在res目录下创建动画文件：

push_left_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><translate android:fromXDelta="100%p" android:toXDelta="0"android:duration="500" /><alpha android:fromAlpha="0.1" android:toAlpha="1.0"android:duration="500" />
</set>

push_left_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><translate android:fromXDelta="0" android:toXDelta="-100%p"android:duration="500" /><alpha android:fromAlpha="1.0" android:toAlpha="0.1"android:duration="500" />
</set>

push_right_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><translate android:fromXDelta="-100%p" android:toXDelta="0"android:duration="500" /><alpha android:fromAlpha="0.1" android:toAlpha="1.0"android:duration="500" />
</set>

push_right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><translate android:fromXDelta="0" android:toXDelta="100%p"android:duration="500" /><alpha android:fromAlpha="1.0" android:toAlpha="0.1"android:duration="500" />
</set>

在这段代码里，创建了多个IamgeView（用来显示图片），用一个for循环来添加到了ViewFlipper中。程序运行后，当用手指在屏幕上向左滑动，会显示下一个图片，用手指在屏幕上向右滑动，会显示前一个图片。实现滑动切换的主要代码都在onFling()方法中，用户按下触摸屏，快速移动后松开，就会触发这个事件。在这段代码示例中，对手指滑动的距离进行了计算，如果滑动距离大于120像素，就做切换动作，否则不做任何切换动作。

可以看到，onFling()方法有四个参数，arg0和arg1上面代码用到了，比较好理解。参数arg3和arg4是做什么用的呢？arg3和arg4实际上是X轴和Y轴上的移动速度，单位是像素/秒。结合这两个参数，可以判断滑动的速度，从而做更多的处理。

为了显示出滑动的效果，这里调用了ViewFlipper的setInAnimation()和setOutAnimation()方法设置了View进入和退出的动画。

源代码下载（完整工程）：点击打开链接

Android学习笔记之滑动翻页（屏幕切换）相关推荐

android学习笔记---66_自定义标签页
2013/7/17 66_自定义标签页技术qq交流群:JavaDream:251572072 教程下载,在线交流:创梦IT社区:___________以前的网站现在不弄了,抱歉 smdl2tmp1. ...
Android中实现滑动翻页—使用ViewFlipper
有一些场景,我们需要向用户展示一系列的页面.比如我们正在开发一个看漫画的应用,可能就需要向用户展示一张一张的漫画图片,用户使用手指滑动屏幕,可以在前一幅漫画和后一幅漫画之间切换.这个时候ViewFli ...
android控件翻书效果,android ViewPager实现滑动翻页效果实例代码
实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下:import android.content.Context;import androi ...
android 翻书动画效果怎么做,android ViewPager实现滑动翻页效果实例代码
实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import andr ...
android viewpager 上下滚动条,安卓中使用ViewPager2实现上下滑动翻页
目标实现上下滑动翻页,类似于抖音.快手短视频的操作方式. 实现方案添加依赖 implementation "androidx.viewpager2:viewpager2:1.0.0&qu ...
程序猿媛一：Android滑动翻页+区域点击事件
2019独角兽企业重金招聘Python工程师标准>>> 滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段. ...
Android学习笔记：Android基础知识点（不断更新中）
1.Android学习笔记:OkHttp 2.Android学习笔记:更新UI的方法(UI线程和非UI线程) 3.Android学习笔记:Volley 4.Android学习笔记:Handler 5. ...
php左右滑动翻页代码,C#_NGUI实现滑动翻页效果实例代码，废话不多说了，直接给大家上 - phpStudy...
NGUI实现滑动翻页效果实例代码废话不多说了,直接给大家上干货了. 具体代码如下所示: using UnityEngine; using System.Collections; public cla ...
Android学习笔记：TabHost 和 FragmentTabHost
2019独角兽企业重金招聘Python工程师标准>>> Android学习笔记:TabHost 和 FragmentTabHostTabHost命名空间:android.widget ...

Android学习笔记之滑动翻页（屏幕切换）

Android学习笔记之滑动翻页（屏幕切换）相关推荐

最新文章

热门文章