转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢!

我之前写了一篇关于美团网,大众点评的购买框效果的文章Android对ScrollView滚动监听,实现美团、大众点评的购买悬浮效果,我自己感觉效果并不是很好,如果快速滑动界面,显示悬浮框的时候会出现一卡的现象,有些朋友说有时候会出现两个布局的情况,特别是对ScrollView滚动的Y值得监听,我还使用了Handler来获取,还有朋友给我介绍了Scrolling Tricks这个东西,我下载试了下,确实美团网,大众点评的购买框用的是这种效果,但是Scrolling Tricks只能在API11以上使用,这个有点小悲剧,然后我做了下修改,并将实现思路分享给大家,实现起来很简单

首先还是要先对ScrollView进行滚动监听,直接在onScrollChanged()方法中就能获取滚动的Y值,之前那篇文章使用了Handler,走弯路了,直接看代码吧

  1. package com.example.meituandemo;
  2. import android.content.Context;
  3. import android.util.AttributeSet;
  4. import android.widget.ScrollView;
  5. /**
  6. * @blog http://blog.csdn.net/xiaanming
  7. *
  8. * @author xiaanming
  9. *
  10. */
  11. public class MyScrollView extends ScrollView {
  12. private OnScrollListener onScrollListener;
  13. public MyScrollView(Context context) {
  14. this(context, null);
  15. }
  16. public MyScrollView(Context context, AttributeSet attrs) {
  17. this(context, attrs, 0);
  18. }
  19. public MyScrollView(Context context, AttributeSet attrs, int defStyle) {
  20. super(context, attrs, defStyle);
  21. }
  22. /**
  23. * 设置滚动接口
  24. * @param onScrollListener
  25. */
  26. public void setOnScrollListener(OnScrollListener onScrollListener) {
  27. this.onScrollListener = onScrollListener;
  28. }
  29. @Override
  30. public int computeVerticalScrollRange() {
  31. return super.computeVerticalScrollRange();
  32. }
  33. @Override
  34. protected void onScrollChanged(int l, int t, int oldl, int oldt) {
  35. super.onScrollChanged(l, t, oldl, oldt);
  36. if(onScrollListener != null){
  37. onScrollListener.onScroll(t);
  38. }
  39. }
  40. /**
  41. *
  42. * 滚动的回调接口
  43. *
  44. * @author xiaanming
  45. *
  46. */
  47. public interface OnScrollListener{
  48. /**
  49. * 回调方法, 返回MyScrollView滑动的Y方向距离
  50. * @param scrollY
  51. *              、
  52. */
  53. public void onScroll(int scrollY);
  54. }
  55. }

接下来看看主界面的布局文件

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:id="@+id/parent_layout"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:orientation="vertical" >
  7. <ImageView
  8. android:id="@+id/imageView1"
  9. android:layout_width="match_parent"
  10. android:layout_height="45dip"
  11. android:scaleType="centerCrop"
  12. android:src="@drawable/navigation_bar" />
  13. <com.example.meituandemo.MyScrollView
  14. android:id="@+id/scrollView"
  15. android:layout_width="fill_parent"
  16. android:layout_height="fill_parent" >
  17. <FrameLayout
  18. android:layout_width="match_parent"
  19. android:layout_height="wrap_content" >
  20. <LinearLayout
  21. android:layout_width="match_parent"
  22. android:layout_height="wrap_content"
  23. android:orientation="vertical" >
  24. <ImageView
  25. android:id="@+id/iamge"
  26. android:layout_width="match_parent"
  27. android:layout_height="wrap_content"
  28. android:background="@drawable/pic"
  29. android:scaleType="centerCrop" />
  30. <include
  31. android:id="@+id/buy"
  32. layout="@layout/buy_layout" />
  33. <ImageView
  34. android:layout_width="match_parent"
  35. android:layout_height="wrap_content"
  36. android:background="@drawable/one"
  37. android:scaleType="centerCrop" />
  38. <ImageView
  39. android:layout_width="match_parent"
  40. android:layout_height="wrap_content"
  41. android:background="@drawable/one"
  42. android:scaleType="centerCrop" />
  43. <ImageView
  44. android:layout_width="match_parent"
  45. android:layout_height="wrap_content"
  46. android:background="@drawable/one"
  47. android:scaleType="centerCrop" />
  48. </LinearLayout>
  49. <include
  50. android:id="@+id/top_buy_layout"
  51. layout="@layout/buy_layout" />
  52. </FrameLayout>
  53. </com.example.meituandemo.MyScrollView>
  54. </LinearLayout>

下面是布局的效果图

从主界面的布局你可以看出,我们在上面放置了一个购买的布局,可能你会想,先让上面的布局隐藏起来,等下面的布局滑动上来就将其显示出来,如果这样子就跟我之前写的那篇文章差不多,效果不是很棒,所以这篇修改版的肯定不是这样子的,我们还是先看主界面的代码吧

  1. package com.example.meituandemo;
  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.view.ViewTreeObserver.OnGlobalLayoutListener;
  5. import android.widget.LinearLayout;
  6. import com.example.meituandemo.MyScrollView.OnScrollListener;
  7. /**
  8. * @blog http://blog.csdn.net/xiaanming
  9. *
  10. * @author xiaanming
  11. *
  12. */
  13. public class MainActivity extends Activity implements OnScrollListener{
  14. /**
  15. * 自定义的MyScrollView
  16. */
  17. private MyScrollView myScrollView;
  18. /**
  19. * 在MyScrollView里面的购买布局
  20. */
  21. private LinearLayout mBuyLayout;
  22. /**
  23. * 位于顶部的购买布局
  24. */
  25. private LinearLayout mTopBuyLayout;
  26. @SuppressWarnings("deprecation")
  27. @Override
  28. protected void onCreate(Bundle savedInstanceState) {
  29. super.onCreate(savedInstanceState);
  30. setContentView(R.layout.activity_main);
  31. myScrollView = (MyScrollView) findViewById(R.id.scrollView);
  32. mBuyLayout = (LinearLayout) findViewById(R.id.buy);
  33. mTopBuyLayout = (LinearLayout) findViewById(R.id.top_buy_layout);
  34. myScrollView.setOnScrollListener(this);
  35. //当布局的状态或者控件的可见性发生改变回调的接口
  36. findViewById(R.id.parent_layout).getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
  37. @Override
  38. public void onGlobalLayout() {
  39. //这一步很重要,使得上面的购买布局和下面的购买布局重合
  40. onScroll(myScrollView.getScrollY());
  41. }
  42. });
  43. }
  44. @Override
  45. public void onScroll(int scrollY) {
  46. int mBuyLayout2ParentTop = Math.max(scrollY, mBuyLayout.getTop());
  47. mTopBuyLayout.layout(0, mBuyLayout2ParentTop, mTopBuyLayout.getWidth(), mBuyLayout2ParentTop + mTopBuyLayout.getHeight());
  48. }
  49. }

主界面就短短的几行代码,可能看完这些代码你还是没有明白到底是怎么做到的,没关系,我给大家说说,其实我们是让上面的购买布局和下面的购买布局重合起来了,layout()这个方法是确定View的大小和位置的,然后将其绘制出来,里面的四个参数分别是View的四个点的坐标,他的坐标不是相对屏幕的原点,而且相对于他的父布局来说的,
我们在主页面最外层的ViewGroup添加了布局状态改变的监听器,当绘制完了屏幕会回调到方法onGlobalLayout()中,我们在onGlobalLayout()方法中手动调用了下onScroll()方法,刚开始myScrollView.getScrollY()等于0,所以说当scrollY小于mBuyLayout.getTop()的时候,上面的购买布局的上边缘到myScrollView的上边缘的距离等于mBuyLayout.getTop()(即下面布局的上边缘到myScrollView的上边缘)所以刚开始上面的购买布局和下面的购买布局重合了。
当myScrollView向上滚动,而上面购买布局的上边缘始终要和myScrollView的上边缘保持mBuyLayout.getTop()这个距离,所以上面的购买布局也跟着向上滚动,当scrollY大于mBuyLayout.getTop()的时候,表示购买布局上边缘滑动到了导航栏布局,所以此时购买布局的上边缘与myScrollView的上边缘始终要保持scrollY这个距离,所以购买布局才会一直在导航栏下面,就好像粘住了一样,不知道你了解了没有?好了,不过根据这种思路你也可以刚开始使用一个悬浮框来覆盖在下面的购买布局上面,然后onScroll()方法中更新悬浮框的位置,不过悬浮框的x,y不是相对于父布局的,这点要注意下,这样子也能实现效果,不过相对于此,要复杂的多,所以我们遇到类似的功能直接使用这种就行了,简洁明了,好了,你是不迫不及待的想看下效果,那我们接下来就运行下程序吧

运行程序你会发现,无论我们怎么滑动,都不会出现之前那篇文章的那些情况,很流畅吧,这跟美团,大众点评的效果完全一致,好了,修改版的讲解就到这里结束了,有问题的请在下面留言,我会为大家解答的!

项目源码,点击下载

http://blog.csdn.net/y150481863/article/details/17954191

Android对ScrollView滚动监听,实现美团、大众点评的购买悬浮效果的更多相关文章

  1. Android 对ScrollView滚动监听,实现美团、大众点评的购买悬浮效果

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming),请尊重他人的辛勤劳动成果,谢谢! 随着移动互联网的快速发展,它已经和我们的生活息息相关了,在 ...

  2. js和jquery实现页面滚动监听

    js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...

  3. 滚动监听(bootstrap)

    1.05 腊八节   一直都想知道滚动监听是怎么做出来的,今天终于扒拉出来了,在使用的时候只要加上div定位就可以了... <head> <link rel="styles ...

  4. Bootstrap滚动监听

    滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标.其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class. <!DO ...

  5. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  6. Bootstrap 下拉菜单和滚动监听插件

    一.下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...

  7. Android EditText截获与监听输入事件

      Android EditText截获与监听输入事件共有2种方法: 1.第一种方法:使用setOnKeyListener(),不过这种方式只能监听硬键盘事件. edittext.setOnKeyLi ...

  8. bootstrap的滚动监听

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  9. bootstap 滚动监听

    ---首先结合源代码介绍官网的说明 ---然后总结了使用滚动监听的几个步骤 ---最后给出一个简单的例子 ---关键的一点:整体有点零散和乱七八糟,辛苦你的思维和眼睛了,呵呵 ------------ ...

随机推荐

  1. mongodb 3.2 用户权限管理配置

    使用mongodb 有段时间了,由于是在内网使用,便没有设置权限,一直是裸奔. 最近有时间,研究了下mongodb 3.2 的用户权限配置,网上有许多用户权限配置的文章,不过大多是之前版本,有些出入, ...

  2. linux第7天 I/O的五种模型, select

    服务器端避免僵尸进程的方法: 1)通过忽略SIGCHLD信号,解决僵尸进程 signal(SIGCHLD, SIG_IGN) 2)通过wait方法,解决僵尸进程 signal(SIGCHLD, han ...

  3. android 学习随笔二(读写文件)

    在android读写文件 RAM:运行内存,相当于电脑的内存 ROM:内部存储空间,相当电脑硬盘,android手机必须有的 SD卡:外部存储空间,相当电脑的移动硬盘,不是必须的.手机如果内置16G存 ...

  4. android 弹出框(输入框和选择框)

    1.输入框: final EditText inputServer = new EditText(this); inputServer.setFilters(new InputFilter[]{new ...

  5. NFS服务器端配置

    服务器端配置1 创建共享目录# mkdir /home/share# chown nobody.nogroup /home/share2 创建或修改/etc/exports 配置文件这个文件的内容非常 ...

  6. C#基础知识回顾--线程传参

    C#基础知识回顾--线程传参 在不传递参数情况下,一般大家都使用ThreadStart代理来连接执行函数,ThreadStart委托接收的函数不能有参数, 也不能有返回值.如果希望传递参数给执行函数, ...

  7. 矩阵的奇异值分解(SVD)(理论)

    矩阵的奇异值分解(Singular Value Decomposition,SVD)是数值计算中的精彩之处,在其它数学领域和机器学习领域得到了广泛的应用,如矩阵的广义逆,主分成分析(PCA),自然语言 ...

  8. mysql常见的优化需要注意的点

    1.explain分析explian引用索引基数show indexes from table_name;主键索引具有最好的基数 测试时 不走缓存SELECT SQL_NO_CACHE id from ...

  9. python底层原理

    有同学问到了一个问题,python中存储变量是通过内存地址来存储,那么python又是如何去判断内存中的地址是什么数据类型的呢.经过查找,找到这篇文章: 原博客地址:http://www.cnblog ...

  10. 机器学习数据处理时label错位对未来数据做预测

    这篇文章继上篇机器学习经典模型简单使用及归一化(标准化)影响,通过将测试集label(行)错位,将部分数据作为对未来的预测,观察其效果. 实验方式 以不同方式划分数据集和测试集 使用不同的归一化(标准 ...