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

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

今天在帖子上看到有人需要做一个类似美团app的一个效果,就是当一个浮动layout的滑动到顶部时,这个浮动layout就悬停下来,当屏幕往下滑动时,浮动layout也跟着往下移动。
因此,我特意也写了一个:浮动layuot滑动到顶部悬停demo,下图:
这里写图片描述
原理
好,看完效果图之后,我们来看一下这个效果的设计原理。
首先,我们来看一张整体的设计图:
这里写图片描述
设计效果图是分为三个部分:顶部区域、浮动区域A、列表区域。
1.当屏幕往上面滑动的时候,互动区域A也跟着滑动;
2.当浮动区域A滑动到顶部的时候,浮动区域A停留在顶部(上右图);
3.当屏幕往下滑动的时候,浮动区域A也跟着往下滑动。
这是整个滑动的效果流程。

那么,这时问题来了。怎么能让浮动区域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"
    
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值