Android 滑动效果基础篇（三）—— Gallery仿图像集浏览

以你之姓@ 2022-08-24 11:08 199阅读 0赞

原文地址：[http://blog.csdn.net/ithomer/article/details/7455601][http_blog.csdn.net_ithomer_article_details_7455601] 作者：[阳光岛主][Link 1]

Android系统自带一个Gallery浏览图片的应用，通过手指拖动时能够非常流畅的显示图片，用户交互和体验都很好。

本示例就是通过Gallery和自定义的View，模仿实现一个仿Gallery图像集的图片浏览效果。效果图如下：

![1334580909_4026.png][]

**1、基本原理**

在 Activity 中实现 OnGestureListener 的接口 onFling() 手势事件，通过自定义的 View 绘制draw() 图片

**2、Activity**

Activity中，通过onTouchEvent() 注册 myGesture.onTouchEvent(event)

**\[java\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  @Override  
2.  **public** **boolean** onTouchEvent(MotionEvent event) \{  
3.      **switch** (event.getAction()) \{  
4.      **case** MotionEvent.ACTION\_UP:  
5.          flingView.onFling(0);           // 手指抬起后，重置滑动距离offsetX = 0  
6.          **break**;  
7.      \}  
8.    
9.      **return** myGesture.onTouchEvent(event);  
10. \}

接着实现接口OnGestureListener 的 onScroll()方法，给继承自View的 FlingView 的handleScroll()成员方法传递滑动参数，获取滑动的x轴距离

**\[java\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  @Override  
2.  **public** **boolean** onScroll(MotionEvent e1, MotionEvent e2, **float** distanceX, **float** distanceY) \{  
3.      flingView.handleScroll(-1 \* (**int**) distanceX);  
4.      **return** **true**;  
5.  \}

接着实现接口OnGestureListener 的 OnFling()方法，给继承自View的 FlingView 的onFling()成员方法传递滑动参数，获取手势的速度

**\[java\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  @Override  
2.  **public** **boolean** onFling(MotionEvent e1, MotionEvent e2, **float** velocityX, **float** velocityY) \{  
3.      flingView.onFling((**int**) - velocityX);  
4.      **return** **true**;  
5.  \}

**3、FlingView**

FlingView中，获取来自Activity中的手势速度

**\[java\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  **public** **void** onFling(**int** paramFloat1) \{  
2.      **if** (offsetX > GalleryDemoActivity.deviceScreenWidth / 5) \{  
3.          **if** (fBitmap != **null**) \{  
4.              isFling = **true**;  
5.              isFlingRight = **true**;  
6.          \}  
7.      \} **else** **if** (offsetX < -GalleryDemoActivity.deviceScreenWidth / 5) \{  
8.          **if** (nBitmap != **null**) \{  
9.              isFling = **true**;  
10.             isFlingLeft = **true**;  
11.         \}  
12.     \}  
13.     // 开始动画效果  
14.     startAnimation(**new** MyAnimation());  
15. \}

在滑动过程中，通过实现View的Draw()方法绘制图片，注意：此时需要同时绘制当前图片（获取焦点）和下一张图片（即将获取焦点）共两张图片

**\[java\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  @Override  
2.  **public** **void** draw(Canvas canvas) \{  
3.      Paint paint = **new** Paint();  
4.      Rect rect = **new** Rect();  
5.      canvas.drawColor(Color.BLACK);  
6.    
7.      // 绘制当前图片  
8.      **if** (bitmap != **null**) \{  
9.          **int** left = offsetX;  
10.         **int** top = offsetY;  
11.         **int** right = offsetX + GalleryDemoActivity.deviceScreenWidth;  
12.         **int** bottom = offsetY + GalleryDemoActivity.deviceScreenHeight;  
13.         rect.set(left, top, right, bottom);  
14.         canvas.drawBitmap(bitmap, **null**, rect, paint);  
15.     \}  
16.       
17.     // 绘制下一张图片  
18.     **if** (offsetX < 0) \{           // 向左滑动  
19.         **if** (nBitmap != **null**) \{  
20.             **int** left = GalleryDemoActivity.deviceScreenWidth + 15 + offsetX;  
21.             **int** top = 0;  
22.             **int** right = left + GalleryDemoActivity.deviceScreenWidth;  
23.             **int** bottom = GalleryDemoActivity.deviceScreenHeight;  
24.             rect.set(left, top, right, bottom);  
25.             canvas.drawBitmap(nBitmap, **null**, rect, paint);  
26.         \}  
27.     \} **else** **if** (offsetX > 0) \{        // 向右滑动  
28.         **if** (fBitmap != **null**) \{  
29.             **int** left = -GalleryDemoActivity.deviceScreenWidth - 15 + offsetX;  
30.             **int** top = 0;  
31.             **int** right = left + GalleryDemoActivity.deviceScreenWidth;  
32.             **int** bottom = GalleryDemoActivity.deviceScreenHeight;  
33.             rect.set(left, top, right, bottom);  
34.             canvas.drawBitmap(fBitmap, **null**, rect, paint);  
35.         \}  
36.     \}  
37. \}

在滑动图片结束后，需要做滑动动画后的处理，重新设置当前图片和当前图片的上一张和下一张的状态，为下次滑动做准备

**\[java\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  @Override  
2.  **protected** **void** onAnimationEnd() \{  
3.      **if** (isFlingRight) \{         // 向右滑动，position减1  
4.          nBitmap = bitmap;  
5.          bitmap = fBitmap;  
6.          fBitmap = **null**;  
7.          postion = postion - 1;  
8.      \} **else** **if** (isFlingLeft) \{       // 向左滑动，position加1  
9.          fBitmap = bitmap;  
10.         bitmap = nBitmap;  
11.         nBitmap = **null**;  
12.         postion = postion + 1;  
13.     \}  
14.       
15.     isFlingRight = **false**;             
16.     isFlingLeft = **false**;  
17.     isFling = **false**;  
18.     offsetX = 0;  
19.     **if** (fBitmap == **null** && offsetX == 0) \{          // 如果前一张图片为空（向右滑），则重置前一张图片（position - 1）  
20.         **if** (postion > 0) \{  
21.             fBitmap = getBitmap(postion - 1);  
22.         \}  
23.   
24.     \} **else** **if** (nBitmap == **null** && offsetX == 0) \{       // 如果后一张图片为空（向左滑），则重置后一张图片（position + 1）  
25.         **if** (postion < bitmaps.length - 1) \{  
26.             nBitmap = getBitmap(postion + 1);  
27.         \}  
28.     \}  
29.     clearAnimation();             
30. \}

4、手势坐标介绍

本示例中，用到了OnGestureListener接口的onScroll()和OnFling()方法，涉及到了Android系统坐标及触摸MotionEvent e1和e2、速度velocityX、velocityY等值

Android屏幕坐标系如下图（左）

![1339581389_3855.png][]

（1）MotionEvent中 e1是手指第一次按上屏幕的起点，e2是抬起手指离开屏幕的终点，根据上图Android屏幕坐标系可知：

手指向右滑动，终点（e2）在起点（e1）的右侧，有e2.getX() - e1.getX() 大于0  
手指向左滑动，终点（e2）在起点（e1）的左侧，有e2.getX() - e1.getX() 小于0  
手指向下滑动，终点（e2）在起点（e1）的下侧，有e2.getY() - e1.getY() 大于0  
手指向上滑动，终点（e2）在起点（e1）的上侧，有e2.getY() - e1.getY() 小于0

（2）onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)

distanceX，是前后两次call的X距离，不是e2与e1的水平距离

distanceX，是前后两次call的Y距离，不是e2与e1的垂直距离

具体数值的方向，请详见上图（中）

（3）onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)

velocityX，是X轴的每秒速度

velocityY，是Y轴的每秒速度

具体数值的方向，请详见上图（右）

仔细观察可以发现：velocityX、velocityY的方向与distanceX、distanceY方向正好相反

更多OnGestureListener接口函数介绍，请见上一篇博客 [Android 滑动效果入门篇（一）—— ViewFlipper][Android _ ViewFlipper]

[http_blog.csdn.net_ithomer_article_details_7455601]: http://blog.csdn.net/ithomer/article/details/7455601
[Link 1]: http://my.csdn.net/sunboy_2050
[1334580909_4026.png]: https://img-my.csdn.net/uploads/201204/16/1334580909_4026.png
[view plain]: http://blog.csdn.net/ithomer/article/details/7455601#
[1339581389_3855.png]: https://img-my.csdn.net/uploads/201206/13/1339581389_3855.png
[Android _ ViewFlipper]: http://blog.csdn.net/sunboy_2050/article/details/7420567

发表评论取消回复

表情：

评论列表（有 0 条评论，199人围观）

还没有评论，来说两句吧...

相关阅读

相关 android ui覆盖,Android UI控件之Gallery --拖动、覆盖、循环、3D图片浏览效果之一

Android中的Gallery控件是十分灵活的,使用它可以做出许多很炫的效果.接下来要实现的一中效果在上一篇文章的基础上,实现了循环、覆盖、3D的效果。具体的情况如何？

我不是女神ヾ/ 2022年10月05日 01:53/ 0 赞/ 81 阅读

相关 Android 滑动效果进阶篇（六）—— 倒影效果

原文地址：[http://blog.csdn.net/ithomer/article/details/7483169][http_blog.csdn.net_ithomer_a

妖狐艹你老母/ 2022年08月24日 11:08/ 0 赞/ 190 阅读

相关 Android 滑动效果基础篇（四）—— Gallery + GridView

原文地址：[http://blog.csdn.net/ithomer/article/details/7467739][http_blog.csdn.net_ithomer_a

我会带着你远行/ 2022年08月24日 11:08/ 0 赞/ 185 阅读

相关 Android 滑动效果基础篇（三）—— Gallery仿图像集浏览

原文地址：[http://blog.csdn.net/ithomer/article/details/7455601][http_blog.csdn.net_ithomer_a

以你之姓@/ 2022年08月24日 11:08/ 0 赞/ 200 阅读

相关 Android 滑动效果入门篇（二）—— Gallery

原文地址：[http://blog.csdn.net/ithomer/article/details/7442556][http_blog.csdn.net_ithomer_a

红太狼/ 2022年08月24日 11:08/ 0 赞/ 190 阅读

相关 Android 滑动效果入门篇（一）—— ViewFlipper

原文地址：[http://blog.csdn.net/ithomer/article/details/7420567][http_blog.csdn.net_ithomer_a

我不是女神ヾ/ 2022年08月24日 11:07/ 0 赞/ 283 阅读

相关 Android 滑动效果入门篇（一）—— ViewFlipper

[ViewFilpper][]是[Android][]官方提供的一个View容器类，继承于ViewAnimator类，用于实现页面切换，也可以设定时间间隔，让它自动播放。

偏执的太偏执、/ 2022年08月22日 04:53/ 0 赞/ 182 阅读

相关 Android 仿微信对话列表滑动删除效果

package com.fxsky.swipelist.widget; import android.annotation.SuppressLint;

梦里梦外;/ 2022年08月08日 11:47/ 0 赞/ 164 阅读

相关 Android 仿百度手机助手首页滑动效果

今天看到百度手机助手首页上的滑动效果非常nice，主要功能归结为： > 1、当手指上划时，顶部搜索栏随手指移动距离而缩小到隐藏，隐藏后内容还是可以继续移动 > 2、手指下

朴灿烈づ我的快乐病毒、/ 2022年08月01日 16:34/ 0 赞/ 185 阅读

相关 Android 仿新浪微博热门榜单滑动效果

一个比较好的自定义View，继承自LinearLayout，可使用于Activity与Fragment之间 `https://github.com/shallcheek/Ca

ゝ一纸荒年。/ 2021年06月11日 15:12/ 0 赞/ 442 阅读