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

一般实现这个特效会用到一个控件: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方法。  其他手势事件各位可以自己回去试验。
  1. public boolean onDown(MotionEvent arg0)
  2. {
  3. return false;
  4. }
  5. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
  6. float velocityY)
  7. {
  8. return false;
  9. }
  10. public void onLongPress(MotionEvent e)
  11. {
  12. }
  13. public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
  14. float distanceY)
  15. {
  16. return false;
  17. }
  18. public void onShowPress(MotionEvent e)
  19. {
  20. }
  21. public boolean onSingleTapUp(MotionEvent e)
  22. {
  23. return false;
  24. }

要实现屏幕切换的话,首先需要定义一个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>范例

  1. package xiaosi.ViewFlipper;
  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.view.GestureDetector;
  5. import android.view.GestureDetector.OnGestureListener;
  6. import android.view.MotionEvent;
  7. import android.view.ViewGroup.LayoutParams;
  8. import android.view.animation.AnimationUtils;
  9. import android.widget.ImageView;
  10. import android.widget.ViewFlipper;
  11. public class ViewFlipperActivity extends Activity implements OnGestureListener
  12. {
  13. /** Called when the activity is first created. */
  14. private int[] imageID = { R.drawable.a, R.drawable.b, R.drawable.c,
  15. R.drawable.d, R.drawable.e, R.drawable.f, R.drawable.g,
  16. R.drawable.h };
  17. private ViewFlipper viewFlipper = null;
  18. private GestureDetector gestureDetector = null;
  19. @Override
  20. public void onCreate(Bundle savedInstanceState)
  21. {
  22. super.onCreate(savedInstanceState);
  23. setContentView(R.layout.main);
  24. viewFlipper = (ViewFlipper) findViewById(R.id.viewflipper);
  25. // 生成GestureDetector对象,用于检测手势事件
  26. gestureDetector = new GestureDetector(this);
  27. // 添加用于切换的图片
  28. for (int i = 0; i < imageID.length; i++)
  29. {
  30. // 定义一个ImageView对象
  31. ImageView image = new ImageView(this);
  32. image.setImageResource(imageID[i]);
  33. // 充满父控件
  34. image.setScaleType(ImageView.ScaleType.FIT_XY);
  35. // 添加到viewFlipper中
  36. viewFlipper.addView(image, new LayoutParams(
  37. LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
  38. }
  39. }
  40. public boolean onDown(MotionEvent arg0)
  41. {
  42. return false;
  43. }
  44. public boolean onFling(MotionEvent arg0, MotionEvent arg1, float arg2,
  45. float arg3)
  46. {
  47. //对手指滑动的距离进行了计算,如果滑动距离大于120像素,就做切换动作,否则不做任何切换动作。
  48. // 从左向右滑动
  49. if (arg0.getX() - arg1.getX() > 120)
  50. {
  51. // 添加动画
  52. this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
  53. R.anim.push_left_in));
  54. this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,
  55. R.anim.push_left_out));
  56. this.viewFlipper.showNext();
  57. return true;
  58. }// 从右向左滑动
  59. else if (arg0.getX() - arg1.getX() < -120)
  60. {
  61. this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
  62. R.anim.push_right_in));
  63. this.viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,
  64. R.anim.push_right_out));
  65. this.viewFlipper.showPrevious();
  66. return true;
  67. }
  68. return true;
  69. }
  70. public void onLongPress(MotionEvent e)
  71. {}
  72. public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
  73. float distanceY)
  74. {
  75. return false;
  76. }
  77. public void onShowPress(MotionEvent e)
  78. {}
  79. public boolean onSingleTapUp(MotionEvent e)
  80. {
  81. return false;
  82. }
  83. @Override
  84. public boolean onTouchEvent(MotionEvent event)
  85. {
  86. return this.gestureDetector.onTouchEvent(event);
  87. }
  88. }

main.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. android:orientation="vertical" >
  6. <ViewFlipper
  7. android:id="@+id/viewflipper"
  8. android:layout_width="fill_parent"
  9. android:layout_height="fill_parent"/>
  10. </LinearLayout>

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

push_left_in.xml

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

push_left_out.xml

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

push_right_in.xml

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

push_right_out.xml

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

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

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

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

源代码下载(完整工程):点击打开链接

Android学习笔记之滑动翻页(屏幕切换)的更多相关文章

  1. Android中实现滑动翻页—使用ViewFlipper(dp和px之间进行转换)

    Android中实现滑动翻页—使用ViewFlipper(dp和px之间进行转换) Android中dp和px之间进行转换 在xml布局文件中,我们既可以设置px,也可以设置dp(或者dip).一般情 ...

  2. 【转】 Pro Android学习笔记(四十):Fragment(5):适应不同屏幕或排版

    目录(?)[-] 设置横排和竖排的不同排版风格 改写代码 对于fragment,经常涉及不同屏幕尺寸和不同的排版风格.我们在基础小例子上做一下改动,在横排的时候,仍是现实左右两个fragment,在竖 ...

  3. 【转】 Pro Android学习笔记(十九):用户界面和控制(7):ListView

    目录(?)[-] 点击List的item触发 添加其他控件以及获取item数据 ListView控件以垂直布局方式显示子view.系统的android.app.ListActivity已经实现了一个只 ...

  4. (java)selenium webdriver学习---实现简单的翻页,将页面内容的标题和标题链接取出

    selenium webdriver学习---实现简单的翻页,将页面内容的标题和标题链接取出: 该情况适合能能循环page=1~n,并且每个网页随着循环可以打开的情况, 注意一定是自己拼接的url可以 ...

  5. 【解决ViewPager在大屏上滑动不流畅】 设置ViewPager滑动翻页距离

    在项目中做了一个ViewPager+Fragment滑动翻页的效果,在模拟器和小米手机上测试也比较正常.但是换到4.7以上屏幕测试的时候发现老是滑动失效. 因为系统默认的滑动策略是当用户滑动超过半屏之 ...

  6. ViewPager实现滑动翻页效果

    实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import andr ...

  7. Android学习笔记之Activity详解

    1 理解Activity Activity就是一个包含应用程序界面的窗口,是Android四大组件之一.一个应用程序可以包含零个或多个Activity.一个Activity的生命周期是指从屏幕上显示那 ...

  8. 基于vue实现上下滑动翻页效果

    18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...

  9. 【转】 Pro Android学习笔记(七五):HTTP服务(9):DownloadManager

    目录(?)[-] 小例子 保存在哪里下载文件信息设置和读取 查看下载状态和取消下载 文章转载只能用于非商业性质,且不能带有虚拟货币.积分.注册等附加条件,转载须注明出处:http://blog.csd ...

随机推荐

  1. Excel 文本内容拆分

    1.首先把文本数据粘贴到excel-->在旁边插入空白列..选择数据-->分列-->固定宽度 2.数据预览点击下一步 3.最后分好的数据就在 归去来兮,田园将芜胡不归?既自以心为形役 ...

  2. Bootstrap Table 的用法

    记录下 Bootstrap Table 的用法,备忘. <!DOCTYPE html> <html> <head> <meta charset="u ...

  3. python学习二,字符串常用操作

    字符串可以说是在日常开发中应用最广泛的了,现在来总结下有关python中有关字符串一些常用操作 首先我们声明一个字符串变量 str = "hello world" 下面我们来依次介 ...

  4. CentOS 7上安装gitlab-runner

    1.yum install gitlab-runner -y 2.Registering Runners a.Run the following command: gitlab-runner regi ...

  5. CSUOJ 1644 超能陆战队

    1644: 超能陆战队 Time Limit: 1 Sec  Memory Limit: 256 MBSubmit: 6  Solved: 1[Submit][Status][Web Board] D ...

  6. R中读取文件,找不到路径问题 No such file or directory

      R中读取文件,找不到路径问题 No such file or directory 近日,读取文件时.出现例如以下问题 > passenger = read.csv('internationa ...

  7. amaze ui各个模块简单说明

    amaze ui各个模块简单说明 导航添加依据 http://amazeui.org/css/  下面内容属学习笔记,如有理解偏差和错误请留言相告,感谢!* =(官网这块写的很详细) 一.基本样式 1 ...

  8. idea python notebook连接pyspark

    1.启动pyspark 2.查看pyspark服务的token  jupyter notebook list 查看正在运行的notebook服务以及他们的token 3.在idea里运行noteboo ...

  9. 【Django】AJAX

    目录 JSON 序列化 stringify 反序列化 parse JSON与XML对比 AJAX简介 AJAX常见应用场景 jQuery实现AJAX JS实现AJAX AJAX请求设置csrf_tok ...

  10. lastlog---显示系统中所有用户最近一次登录信息。

    lastlog命令用于显示系统中所有用户最近一次登录信息. lastlog文件在每次有用户登录时被查询.可以使用lastlog命令检查某特定用户上次登录的时间,并格式化输出上次登录日志/var/log ...