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

时间  2019-11-13
标签 android scrollview 滚动 监听 实现 大众 点评 购买 悬浮 效果 栏目 Android 繁體版
原文   原文链接

转：http://blog.csdn.net/xiaanming/article/details/17374599html

 

很荣幸我可以成为CSDN 2013年度博客之星评选的候选人，但愿继续获得你们的支持与鼓励,看到的朋友帮我投上宝贵的一票吧！java

 

       投票地址：http://vote.blog.csdn.net/blogstaritem/blogstar2013/xiaanmingandroid

 

转帖请注明本文出自xiaanming的博客（http://blog.csdn.net/xiaanming），请尊重他人的辛勤劳动成果，谢谢！app

随着移动互联网的快速发展，它已经和咱们的生活息息相关了，在公交地铁里面都能看到不少人的人低头看着本身的手机屏幕，今后“低头族”一词就产生了，做为一名移动行业的开发人员，我本身也是一名“低头族”，上下班时间在公交地铁上看看新闻来打发下时间，有时候也会看看那些受欢迎的App的一些界面效果，为何人家的app那么受欢迎？跟用户体验跟UI设计也有直接的关系，最近在美团和大众点评的App看到以下效果，我感受用户好，很人性化，因此本身也尝试着实现了下，接下来就讲解下实现思路！ide

如上图(2)咱们看到了，当当即抢购布局向上滑动到导航栏布局的时候，当即抢购布局就贴在导航栏布局下面，下面的其余的布局仍是能够滑动，当咱们向下滑动的时候，当即抢购的布局又随着往下滑动了，看似有点复杂，可是一说思路可能你就顿时恍然大悟了。布局

当咱们向上滑动过程当中，咱们判断当即抢购的布局是否滑到导航栏布局下面，若是当即抢购的上面顶到了导航栏，咱们新建一个当即抢购的悬浮框来显示在导航栏下面，这样子就实现了当即抢购贴在导航栏下面的效果啦，而当咱们向下滑动的时候，当当即抢购布局的下面恰好到了刚刚新建的当即抢购悬浮框的下面的时候，咱们就移除当即抢购悬浮框，可能说的有点拗口，既然知道了思路，接下来咱们就来实现效果。this

新建一个Android项目，取名MeiTuanDemo,先看当即抢购（buy_layout.xml）的布局，这里为了方便我直接从美团上面截去了图片spa

 

[html]  view plain copy 在CODE上查看代码片 派生到个人代码片
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="horizontal"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="wrap_content" >  
  6.   
  7.     <ImageView  
  8.         android:id="@+id/buy_layout"  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:background="@drawable/buy" />  
  12.   
  13. </LinearLayout>  


当即抢购的布局实现了，接下来实现主界面的布局，上面是导航栏布局，为了方便仍是直接从美团截取的图片，而后下面的ViewPager布局，当即抢购布局，其余布局 放在ScrollView里面，界面仍是很简单的.net

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

你会发现上面的主界面布局中并非ScrollView,而是自定义的一个MyScrollView,接下来就看看MyScrollView类中的代码设计

 

[java]  view plain copy 在CODE上查看代码片 派生到个人代码片
 
  1. package com.example.meituandemo;  
  2.   
  3. import android.content.Context;  
  4. import android.os.Handler;  
  5. import android.util.AttributeSet;  
  6. import android.view.MotionEvent;  
  7. import android.widget.ScrollView;  
  8. /** 
  9.  * 博客地址:http://blog.csdn.net/xiaanming 
  10.  *  
  11.  * @author xiaanming 
  12.  * 
  13.  */  
  14. public class MyScrollView extends ScrollView {  
  15.     private OnScrollListener onScrollListener;  
  16.     /** 
  17.      * 主要是用在用户手指离开MyScrollView，MyScrollView还在继续滑动，咱们用来保存Y的距离，而后作比较 
  18.      */  
  19.     private int lastScrollY;  
  20.       
  21.     public MyScrollView(Context context) {  
  22.         this(context, null);  
  23.     }  
  24.       
  25.     public MyScrollView(Context context, AttributeSet attrs) {  
  26.         this(context, attrs, 0);  
  27.     }  
  28.   
  29.     public MyScrollView(Context context, AttributeSet attrs, int defStyle) {  
  30.         super(context, attrs, defStyle);  
  31.     }  
  32.       
  33.     /** 
  34.      * 设置滚动接口 
  35.      * @param onScrollListener 
  36.      */  
  37.     public void setOnScrollListener(OnScrollListener onScrollListener) {  
  38.         this.onScrollListener = onScrollListener;  
  39.     }  
  40.   
  41.   
  42.     /** 
  43.      * 用于用户手指离开MyScrollView的时候获取MyScrollView滚动的Y距离，而后回调给onScroll方法中 
  44.      */  
  45.     private Handler handler = new Handler() {  
  46.   
  47.         public void handleMessage(android.os.Message msg) {  
  48.             int scrollY = MyScrollView.this.getScrollY();  
  49.               
  50.             //此时的距离和记录下的距离不相等，在隔5毫秒给handler发送消息  
  51.             if(lastScrollY != scrollY){  
  52.                 lastScrollY = scrollY;  
  53.                 handler.sendMessageDelayed(handler.obtainMessage(), 5);    
  54.             }  
  55.             if(onScrollListener != null){  
  56.                 onScrollListener.onScroll(scrollY);  
  57.             }  
  58.               
  59.         };  
  60.   
  61.     };   
  62.   
  63.     /** 
  64.      * 重写onTouchEvent， 当用户的手在MyScrollView上面的时候， 
  65.      * 直接将MyScrollView滑动的Y方向距离回调给onScroll方法中，当用户抬起手的时候， 
  66.      * MyScrollView可能还在滑动，因此当用户抬起手咱们隔5毫秒给handler发送消息，在handler处理 
  67.      * MyScrollView滑动的距离 
  68.      */  
  69.     @Override  
  70.     public boolean onTouchEvent(MotionEvent ev) {  
  71.         if(onScrollListener != null){  
  72.             onScrollListener.onScroll(lastScrollY = this.getScrollY());  
  73.         }  
  74.         switch(ev.getAction()){  
  75.         case MotionEvent.ACTION_UP:  
  76.              handler.sendMessageDelayed(handler.obtainMessage(), 5);    
  77.             break;  
  78.         }  
  79.         return super.onTouchEvent(ev);  
  80.     }  
  81.   
  82.   
  83.     /** 
  84.      *  
  85.      * 滚动的回调接口 
  86.      *  
  87.      * @author xiaanming 
  88.      * 
  89.      */  
  90.     public interface OnScrollListener{  
  91.         /** 
  92.          * 回调方法， 返回MyScrollView滑动的Y方向距离 
  93.          * @param scrollY 
  94.          *              、 
  95.          */  
  96.         public void onScroll(int scrollY);  
  97.     }  
  98.       
  99.       
  100.   
  101. }  

一看代码你也许明白了，就是对ScrollView的滚动Y值进行监听，咱们知道ScrollView并无实现滚动监听，因此咱们必须自行实现对ScrollView的监听，咱们很天然的想到在onTouchEvent()方法中实现对滚动Y轴进行监听，但是你会发现，咱们在滑动ScrollView的时候，当咱们手指离开ScrollView。它可能还会继续滑动一段距离，因此咱们选择在用户手指离开的时候每隔5毫秒来判断ScrollView是否中止滑动，并将ScrollView的滚动Y值回调给OnScrollListener接口的onScroll(int scrollY)方法中，咱们只须要对ScrollView调用咱们只须要对ScrollView调用setOnScrollListener方法就能监听到滚动的Y值。

实现了对ScrollView滚动的Y值进行监听，接下来就简单了，咱们只须要显示当即抢购悬浮框和移除悬浮框了，接下来看看主界面Activity的代码编写

 

[java]  view plain copy 在CODE上查看代码片 派生到个人代码片
 
  1. package com.example.meituandemo;  
  2.   
  3. import android.app.Activity;  
  4. import android.content.Context;  
  5. import android.graphics.PixelFormat;  
  6. import android.os.Bundle;  
  7. import android.view.Gravity;  
  8. import android.view.LayoutInflater;  
  9. import android.view.View;  
  10. import android.view.WindowManager;  
  11. import android.view.WindowManager.LayoutParams;  
  12. import android.widget.LinearLayout;  
  13. import com.example.meituandemo.MyScrollView.OnScrollListener;  
  14. /** 
  15.  * 博客地址:http://blog.csdn.net/xiaanming 
  16.  *  
  17.  * @author xiaanming 
  18.  * 
  19.  */  
  20. public class MainActivity extends Activity implements OnScrollListener{  
  21.     private MyScrollView myScrollView;  
  22.     private LinearLayout mBuyLayout;  
  23.     private WindowManager mWindowManager;  
  24.     /** 
  25.      * 手机屏幕宽度 
  26.      */  
  27.     private int screenWidth;  
  28.     /** 
  29.      * 悬浮框View 
  30.      */  
  31.     private static View suspendView;  
  32.     /** 
  33.      * 悬浮框的参数 
  34.      */  
  35.     private static WindowManager.LayoutParams suspendLayoutParams;  
  36.     /** 
  37.      * 购买布局的高度 
  38.      */  
  39.     private int buyLayoutHeight;  
  40.     /** 
  41.      * myScrollView与其父类布局的顶部距离 
  42.      */  
  43.     private int myScrollViewTop;  
  44.   
  45.     /** 
  46.      * 购买布局与其父类布局的顶部距离 
  47.      */  
  48.     private int buyLayoutTop;  
  49.       
  50.   
  51.     @Override  
  52.     protected void onCreate(Bundle savedInstanceState) {  
  53.         super.onCreate(savedInstanceState);  
  54.         setContentView(R.layout.activity_main);  
  55.           
  56.         myScrollView = (MyScrollView) findViewById(R.id.scrollView);  
  57.         mBuyLayout = (LinearLayout) findViewById(R.id.buy);  
  58.           
  59.         myScrollView.setOnScrollListener(this);  
  60.         mWindowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);  
  61.         screenWidth = mWindowManager.getDefaultDisplay().getWidth();    
  62.     }  
  63.   
  64.     /** 
  65.      * 窗口有焦点的时候，即全部的布局绘制完毕的时候，咱们来获取购买布局的高度和myScrollView距离父类布局的顶部位置 
  66.      */  
  67.     @Override    
  68.     public void onWindowFocusChanged(boolean hasFocus) {    
  69.         super.onWindowFocusChanged(hasFocus);    
  70.         if(hasFocus){  
  71.             buyLayoutHeight = mBuyLayout.getHeight();  
  72.             buyLayoutTop = mBuyLayout.getTop();  
  73.               
  74.             myScrollViewTop = myScrollView.getTop();  
  75.         }  
  76.     }   
  77.   
  78.   
  79.   
  80.     /** 
  81.      * 滚动的回调方法，当滚动的Y距离大于或者等于 购买布局距离父类布局顶部的位置，就显示购买的悬浮框 
  82.      * 当滚动的Y的距离小于 购买布局距离父类布局顶部的位置加上购买布局的高度就移除购买的悬浮框 
  83.      *  
  84.      */  
  85.     @Override  
  86.     public void onScroll(int scrollY) {  
  87.         if(scrollY >= buyLayoutTop){  
  88.             if(suspendView == null){  
  89.                 showSuspend();  
  90.             }  
  91.         }else if(scrollY <= buyLayoutTop + buyLayoutHeight){  
  92.             if(suspendView != null){  
  93.                 removeSuspend();  
  94.             }  
  95.         }  
  96.     }  
  97.   
  98.   
  99.     /** 
  100.      * 显示购买的悬浮框 
  101.      */  
  102.     private void showSuspend(){  
  103.         if(suspendView == null){  
  104.             suspendView = LayoutInflater.from(this).inflate(R.layout.buy_layout, null);  
  105.             if(suspendLayoutParams == null){  
  106.                 suspendLayoutParams = new LayoutParams();  
  107.                 suspendLayoutParams.type = LayoutParams.TYPE_PHONE; //悬浮窗的类型，通常设为2002，表示在全部应用程序之上，但在状态栏之下   
  108.                 suspendLayoutParams.format = PixelFormat.RGBA_8888;   
  109.                 suspendLayoutParams.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL    
  110.                          | LayoutParams.FLAG_NOT_FOCUSABLE;  //悬浮窗的行为，好比说不可聚焦，非模态对话框等等   
  111.                 suspendLayoutParams.gravity = Gravity.TOP;  //悬浮窗的对齐方式  
  112.                 suspendLayoutParams.width = screenWidth;  
  113.                 suspendLayoutParams.height = buyLayoutHeight;    
  114.                 suspendLayoutParams.x = 0;  //悬浮窗X的位置  
  115.                 suspendLayoutParams.y = myScrollViewTop;  ////悬浮窗Y的位置  
  116.             }  
  117.         }  
  118.           
  119.         mWindowManager.addView(suspendView, suspendLayoutParams);  
  120.     }  
  121.       
  122.       
  123.     /** 
  124.      * 移除购买的悬浮框 
  125.      */  
  126.     private void removeSuspend(){  
  127.         if(suspendView != null){  
  128.             mWindowManager.removeView(suspendView);  
  129.             suspendView = null;  
  130.         }  
  131.     }  
  132.   
  133. }  


上面的代码比较简单，根据ScrollView滑动的距离来判断显示和移除悬浮框，悬浮框的实现主要是经过WindowManager这个类来实现的，调用这个类的addView方法用于添加一个悬浮框，removeView用于移除悬浮框。
经过上述代码就实现了美团，大众点评的这种效果，在运行项目以前咱们必须在AndroidManifest.xml中加入<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

 


咱们运行下项目看下效果吧

 

好了，今天的讲解到此结束，有疑问的朋友请在下面留言

项目源码，点击下载

PS:你们有兴趣的话能够看看Android 仿美团网,大众点评购买框悬浮效果之修改版

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程