当前位置：移动技术网 > 移动技术>移动开发>Android > Android实现美团、大众点评的购买悬浮效果（ScrollView滚动监听）

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

2019年07月24日 | 移动技术网移动技术 | 我要评论

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

如上图(2)我们看到了，当立即抢购布局向上滑动到导航栏布局的时候，立即抢购布局就贴在导航栏布局下面，下面的其他的布局还是可以滑动，当我们向下滑动的时候，立即抢购的布局又随着往下滑动了，看似有点复杂，但是一说思路可能你就顿时恍然大悟了。
当我们向上滑动过程中，我们判断立即抢购的布局是否滑到导航栏布局下面，如果立即抢购的上面顶到了导航栏，我们新建一个立即抢购的悬浮框来显示在导航栏下面，这样子就实现了立即抢购贴在导航栏下面的效果啦，而当我们向下滑动的时候，当立即抢购布局的下面刚好到了刚刚新建的立即抢购悬浮框的下面的时候，我们就移除立即抢购悬浮框，可能说的有点拗口，既然知道了思路，接下来我们就来实现效果。
新建一个android项目，取名meituandemo,先看立即抢购（buy_layout.xml）的布局，这里为了方便我直接从美团上面截去了图片

<?xml version="1.0" encoding="utf-8"?> 
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:orientation="horizontal" 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" > 
 
 <imageview 
  android:id="@+id/buy_layout" 
  android:layout_width="fill_parent" 
  android:layout_height="wrap_content" 
  android:background="@drawable/buy" /> 
 
</linearlayout>

立即抢购的布局实现了，接下来实现主界面的布局，上面是导航栏布局，为了方便还是直接从美团截取的图片，然后下面的viewpager布局，立即抢购布局，其他布局放在scrollview里面，界面还是很简单的

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:tools="http://schemas.android.com/tools" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:orientation="vertical" > 
 
  <imageview 
  android:id="@+id/imageview1" 
  android:scaletype="centercrop" 
  android:layout_width="match_parent" 
  android:layout_height="45dip" 
  android:src="@drawable/navigation_bar" /> 
   
 
 <com.example.meituandemo.myscrollview 
  android:id="@+id/scrollview" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" > 
 
  <linearlayout 
   android:layout_width="match_parent" 
   android:layout_height="wrap_content" 
   android:orientation="vertical" > 
 
   <imageview 
    android:id="@+id/iamge" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@drawable/pic" 
    android:scaletype="centercrop" /> 
 
   <include 
    android:id="@+id/buy" 
    layout="@layout/buy_layout" /> 
 
   <imageview 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@drawable/one" 
    android:scaletype="centercrop" /> 
 
   <imageview 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@drawable/one" 
    android:scaletype="centercrop" /> 
 
   <imageview 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@drawable/one" 
    android:scaletype="centercrop" /> 
  </linearlayout> 
 </com.example.meituandemo.myscrollview> 
 
</linearlayout>

你会发现上面的主界面布局中并不是scrollview,而是自定义的一个myscrollview,接下来就看看myscrollview类中的代码

package com.example.meituandemo; 
 
import android.content.context; 
import android.os.handler; 
import android.util.attributeset; 
import android.view.motionevent; 
import android.widget.scrollview; 
/** 
 * 博客地址:http://blog.csdn.net/xiaanming 
 * 
 * @author xiaanming 
 * 
 */ 
public class myscrollview extends scrollview { 
 private onscrolllistener onscrolllistener; 
 /** 
  * 主要是用在用户手指离开myscrollview，myscrollview还在继续滑动，我们用来保存y的距离，然后做比较 
  */ 
 private int lastscrolly; 
  
 public myscrollview(context context) { 
  this(context, null); 
 } 
  
 public myscrollview(context context, attributeset attrs) { 
  this(context, attrs, 0); 
 } 
 
 public myscrollview(context context, attributeset attrs, int defstyle) { 
  super(context, attrs, defstyle); 
 } 
  
 /** 
  * 设置滚动接口 
  * @param onscrolllistener 
  */ 
 public void setonscrolllistener(onscrolllistener onscrolllistener) { 
  this.onscrolllistener = onscrolllistener; 
 } 
 
 
 /** 
  * 用于用户手指离开myscrollview的时候获取myscrollview滚动的y距离，然后回调给onscroll方法中 
  */ 
 private handler handler = new handler() { 
 
  public void handlemessage(android.os.message msg) { 
   int scrolly = myscrollview.this.getscrolly(); 
    
   //此时的距离和记录下的距离不相等，在隔5毫秒给handler发送消息 
   if(lastscrolly != scrolly){ 
    lastscrolly = scrolly; 
    handler.sendmessagedelayed(handler.obtainmessage(), 5); 
   } 
   if(onscrolllistener != null){ 
    onscrolllistener.onscroll(scrolly); 
   } 
    
  }; 
 
 }; 
 
 /** 
  * 重写ontouchevent， 当用户的手在myscrollview上面的时候， 
  * 直接将myscrollview滑动的y方向距离回调给onscroll方法中，当用户抬起手的时候， 
  * myscrollview可能还在滑动，所以当用户抬起手我们隔5毫秒给handler发送消息，在handler处理 
  * myscrollview滑动的距离 
  */ 
 @override 
 public boolean ontouchevent(motionevent ev) { 
  if(onscrolllistener != null){ 
   onscrolllistener.onscroll(lastscrolly = this.getscrolly()); 
  } 
  switch(ev.getaction()){ 
  case motionevent.action_up: 
    handler.sendmessagedelayed(handler.obtainmessage(), 5); 
   break; 
  } 
  return super.ontouchevent(ev); 
 } 
 
 
 /** 
  * 
  * 滚动的回调接口 
  * 
  * @author xiaanming 
  * 
  */ 
 public interface onscrolllistener{ 
  /** 
   * 回调方法， 返回myscrollview滑动的y方向距离 
   * @param scrolly 
   *    、 
   */ 
  public void onscroll(int scrolly); 
 } 
  
  
 
}

一看代码你也许明白了，就是对scrollview的滚动y值进行监听，我们知道scrollview并没有实现滚动监听，所以我们必须自行实现对scrollview的监听，我们很自然的想到在ontouchevent()方法中实现对滚动y轴进行监听，可是你会发现，我们在滑动scrollview的时候，当我们手指离开scrollview。它可能还会继续滑动一段距离，所以我们选择在用户手指离开的时候每隔5毫秒来判断scrollview是否停止滑动，并将scrollview的滚动y值回调给onscrolllistener接口的onscroll(int scrolly)方法中，我们只需要对scrollview调用我们只需要对scrollview调用setonscrolllistener方法就能监听到滚动的y值。
实现了对scrollview滚动的y值进行监听，接下来就简单了，我们只需要显示立即抢购悬浮框和移除悬浮框了，接下来看看主界面activity的代码编写

package com.example.meituandemo; 
 
import android.app.activity; 
import android.content.context; 
import android.graphics.pixelformat; 
import android.os.bundle; 
import android.view.gravity; 
import android.view.layoutinflater; 
import android.view.view; 
import android.view.windowmanager; 
import android.view.windowmanager.layoutparams; 
import android.widget.linearlayout; 
import com.example.meituandemo.myscrollview.onscrolllistener; 
/** 
 * 博客地址:http://blog.csdn.net/xiaanming 
 * 
 * @author xiaanming 
 * 
 */ 
public class mainactivity extends activity implements onscrolllistener{ 
 private myscrollview myscrollview; 
 private linearlayout mbuylayout; 
 private windowmanager mwindowmanager; 
 /** 
  * 手机屏幕宽度 
  */ 
 private int screenwidth; 
 /** 
  * 悬浮框view 
  */ 
 private static view suspendview; 
 /** 
  * 悬浮框的参数 
  */ 
 private static windowmanager.layoutparams suspendlayoutparams; 
 /** 
  * 购买布局的高度 
  */ 
 private int buylayoutheight; 
 /** 
  * myscrollview与其父类布局的顶部距离 
  */ 
 private int myscrollviewtop; 
 
 /** 
  * 购买布局与其父类布局的顶部距离 
  */ 
 private int buylayouttop; 
  
 
 @override 
 protected void oncreate(bundle savedinstancestate) { 
  super.oncreate(savedinstancestate); 
  setcontentview(r.layout.activity_main); 
   
  myscrollview = (myscrollview) findviewbyid(r.id.scrollview); 
  mbuylayout = (linearlayout) findviewbyid(r.id.buy); 
   
  myscrollview.setonscrolllistener(this); 
  mwindowmanager = (windowmanager) getsystemservice(context.window_service); 
  screenwidth = mwindowmanager.getdefaultdisplay().getwidth(); 
 } 
 
 /** 
  * 窗口有焦点的时候，即所有的布局绘制完毕的时候，我们来获取购买布局的高度和myscrollview距离父类布局的顶部位置 
  */ 
 @override 
 public void onwindowfocuschanged(boolean hasfocus) { 
  super.onwindowfocuschanged(hasfocus); 
  if(hasfocus){ 
   buylayoutheight = mbuylayout.getheight(); 
   buylayouttop = mbuylayout.gettop(); 
    
   myscrollviewtop = myscrollview.gettop(); 
  } 
 } 
 
 
 
 /** 
  * 滚动的回调方法，当滚动的y距离大于或者等于 购买布局距离父类布局顶部的位置，就显示购买的悬浮框 
  * 当滚动的y的距离小于 购买布局距离父类布局顶部的位置加上购买布局的高度就移除购买的悬浮框 
  * 
  */ 
 @override 
 public void onscroll(int scrolly) { 
  if(scrolly >= buylayouttop){ 
   if(suspendview == null){ 
    showsuspend(); 
   } 
  }else if(scrolly <= buylayouttop + buylayoutheight){ 
   if(suspendview != null){ 
    removesuspend(); 
   } 
  } 
 } 
 
 
 /** 
  * 显示购买的悬浮框 
  */ 
 private void showsuspend(){ 
  if(suspendview == null){ 
   suspendview = layoutinflater.from(this).inflate(r.layout.buy_layout, null); 
   if(suspendlayoutparams == null){ 
    suspendlayoutparams = new layoutparams(); 
    suspendlayoutparams.type = layoutparams.type_phone; //悬浮窗的类型，一般设为2002，表示在所有应用程序之上，但在状态栏之下 
    suspendlayoutparams.format = pixelformat.rgba_8888; 
    suspendlayoutparams.flags = layoutparams.flag_not_touch_modal 
       | layoutparams.flag_not_focusable; //悬浮窗的行为，比如说不可聚焦，非模态对话框等等 
    suspendlayoutparams.gravity = gravity.top; //悬浮窗的对齐方式 
    suspendlayoutparams.width = screenwidth; 
    suspendlayoutparams.height = buylayoutheight; 
    suspendlayoutparams.x = 0; //悬浮窗x的位置 
    suspendlayoutparams.y = myscrollviewtop; ////悬浮窗y的位置 
   } 
  } 
   
  mwindowmanager.addview(suspendview, suspendlayoutparams); 
 } 
  
  
 /** 
  * 移除购买的悬浮框 
  */ 
 private void removesuspend(){ 
  if(suspendview != null){ 
   mwindowmanager.removeview(suspendview); 
   suspendview = null; 
  } 
 } 
 
}

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

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

好了，今天的讲解到此结束，有疑问的朋友可以留言。
项目源码，
ps:大家有兴趣的话可以看看android仿美团网,大众点评购买框悬浮效果之修改版。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

Activity的生命周期

为了更加生动的阐述 Activity 的生命周期，我们采用一个小例子来看看吧创建两个 Activity界面 A ... [阅读全文]
android 打包－－混淆配置详解

为了应用的安全，通常我们将Android项目打包时进行混淆加密。会用无意义的短变量去重命名类、变量、方法，以免代... [阅读全文]
LongClick原理、上下文菜单原理、EditText长按弹窗原理、WebView长按弹窗自定义、修复WebView全选重复bug ———————————————— 版权声明：本文为CSDN博主「

长按事件Android中按住一个View不松手，会触发长按事件。使用的场景1、EditText的长按快捷操作。2... [阅读全文]
ViewPager2，用起来！

一、缘起：ViewPager2推出已经有一段时间了，而且官方推出了稳定版本Version 1.0.0，相比Vie... [阅读全文]
CrashHandler全局异常捕获

应用在日常的开发中，我们经常需要去Logcat测试我们的App，但由于很多原因，Android Monitor会... [阅读全文]
JobScheduler 实现特定时间，特定条件（系统空闲，电池电量，磁盘空间 ……）下执行任务

JobScheduler 用法使用场景应用保活特定时间，特定条件（系统空闲，电池电量，磁盘空间 ……）下运行程序... [阅读全文]
为什么说国际站要做长尾词排名？

首先我们要明白一个点，长尾词越长，他就越精准，而且用的人少，当你一覆盖，你的产品就能在首页出现，这就是自然排名，... [阅读全文]
Android系统启动概览

1.Android启动概览。2.Art与Dalvik区别。. [阅读全文]
温习Android基础知识——《第一行代码（第三版）》读书笔记 Chapter 10 Service

第十章：后台默默的劳动者，探究Service目录第十章：后台默默的劳动者，探究ServiceService是什么... [阅读全文]
View体系和自定义View总结

有四种方式去改变View的位置layout(getLeft() + disX, getTop() + disY,... [阅读全文]

网友评论


验证码：

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

2019年07月24日 | 移动技术网移动技术 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论