热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

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

这篇文章主要为大家详细介绍了Android对ScrollView滚动监听,实现美团、大众点评的购买悬浮效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

<&#63;xml version="1.0" encoding="UTF-8"&#63;> 
 
 
  
 
 

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

 
 
   
   
 
  
 
   
 
    
 
    
 
    
 
    
 
    
   
  
 
 

你会发现上面的主界面布局中并不是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中加入

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


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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 本文讲述了如何通过代码在Android中更改Recycler视图项的背景颜色。通过在onBindViewHolder方法中设置条件判断,可以实现根据条件改变背景颜色的效果。同时,还介绍了如何修改底部边框颜色以及提供了RecyclerView Fragment layout.xml和项目布局文件的示例代码。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • Android系统移植与调试之如何修改Android设备状态条上音量加减键在横竖屏切换的时候的显示于隐藏
    本文介绍了如何修改Android设备状态条上音量加减键在横竖屏切换时的显示与隐藏。通过修改系统文件system_bar.xml实现了该功能,并分享了解决思路和经验。 ... [详细]
  • 本文介绍了Android 7的学习笔记总结,包括最新的移动架构视频、大厂安卓面试真题和项目实战源码讲义。同时还分享了开源的完整内容,并提醒读者在使用FileProvider适配时要注意不同模块的AndroidManfiest.xml中配置的xml文件名必须不同,否则会出现问题。 ... [详细]
  • Android开发实现的计时器功能示例
    本文分享了Android开发实现的计时器功能示例,包括效果图、布局和按钮的使用。通过使用Chronometer控件,可以实现计时器功能。该示例适用于Android平台,供开发者参考。 ... [详细]
  • ZSI.generate.Wsdl2PythonError: unsupported local simpleType restriction ... [详细]
  • HDFS2.x新特性
    一、集群间数据拷贝scp实现两个远程主机之间的文件复制scp-rhello.txtroothadoop103:useratguiguhello.txt推pushscp-rr ... [详细]
  • flowable工作流 流程变量_信也科技工作流平台的技术实践
    1背景随着公司业务发展及内部业务流程诉求的增长,目前信息化系统不能够很好满足期望,主要体现如下:目前OA流程引擎无法满足企业特定业务流程需求,且移动端体 ... [详细]
  • 本文介绍了在使用MSXML解析XML文件时出现DTD禁用问题的解决方案。通过代码示例和错误信息获取方法,解释了默认情况下DTD是禁用的,以及如何启用DTD的方法。此外,还提到了网上关于该问题的信息相对较少,因此本文提供了解决方案以供参考。 ... [详细]
  • 在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板
    本文介绍了在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板的方法和步骤,包括将ResourceDictionary添加到页面中以及在ResourceDictionary中实现模板的构建。通过本文的阅读,读者可以了解到在Xamarin XAML语言中构建控件模板的具体操作步骤和语法形式。 ... [详细]
author-avatar
冬季梅花1991_156
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有