仿美团app，浮动layout滑动到顶部悬停效果

最新推荐文章于 2022-07-03 17:00:40 发布

巴黎会飞的猪

最新推荐文章于 2022-07-03 17:00:40 发布

阅读量6.9k

点赞数

分类专栏： Android进阶文章标签：美团布局 app 设计移动

本文链接：https://blog.csdn.net/dakun012/article/details/50071081

版权

本文介绍如何创建类似美团APP的悬浮布局效果，当布局滑动到顶部时悬停，再次滑动则跟随。通过创建两个相同的浮动区域，并在ScrollView中判断滑动距离来控制其显示和隐藏，实现悬停效果。

摘要由CSDN通过智能技术生成

今天在帖子上看到有人需要做一个类似美团app的一个效果，就是当一个浮动layout的滑动到顶部时，这个浮动layout就悬停下来，当屏幕往下滑动时，浮动layout也跟着往下移动。
因此，我特意也写了一个：浮动layuot滑动到顶部悬停demo，下图：
这里写图片描述
原理
好，看完效果图之后，我们来看一下这个效果的设计原理。
首先，我们来看一张整体的设计图：

设计效果图是分为三个部分：顶部区域、浮动区域A、列表区域。
1.当屏幕往上面滑动的时候，互动区域A也跟着滑动；
2.当浮动区域A滑动到顶部的时候，浮动区域A停留在顶部（上右图）；
3.当屏幕往下滑动的时候，浮动区域Ａ也跟着往下滑动。
这是整个滑动的效果流程。

那么，这时问题来了。怎么能让浮动区域A停在顶部，而且不影响其他内容的滑动呢？
在这里我们可以写多一个和浮动区域A界面效果一模一样的浮动区域B。在布局的时候，先把浮动区域B的可见性设置为gone，即隐藏起来。当浮动区域A滑动到顶部的时候，就把浮动区域B的可见性设置为VISIBLE，即可见。这时浮动区域B会覆盖在整个屏幕的上面，即使整个屏幕在滑动的时候也不会影响浮动区域B的位置，那么看起来就好像浮动区域A是停留在顶部位置不动了，见下图。

这里写图片描述

（此时，设置浮动区域B的可见性为VISIBLE，即可见）
同理，当整个屏幕往下滑动的时候，再把浮动区域B的可见性设置为GONE，那么看起来的效果就好像浮动区域A又重新滑动起来了。

这个原理大家应该可以理解吧！

实现过程
   说完原理之后，让我们来看看在代码里面是怎么实现这个过程的。

我们先看看布局文件activity_main.xml

<RelativeLayout 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"