仿京东首页双层吸顶效果

最新推荐文章于 2024-05-16 04:43:42 发布
最新推荐文章于 2024-05-16 04:43:42 发布
阅读量1.8k 收藏 4
点赞数 1
分类专栏： 效果实现 文章标签： java android android studio
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WOL965/article/details/106990259
版权

仿京东首页双层吸顶效果，或者叫双组吸顶.

今天已经是端午节假日最后一天了，快乐的时光总是很短暂的.

端午节期间用叮咚买菜App买菜，发现他们的App首页有两个吸顶功能，而下面的tabLayout那个吸顶，居然把上部分和下部分的手指滑动事件给阻断了，没能将滑动事件传递给到另一部分接着滑动.

叮咚买菜应该用户量不少，但对于我个人来说这用户体验还是不大能接受，用着感觉不太爽，可能是大厂的APP太溜了的原因吧，像京东这些也有双层的吸顶，但就不会有这种问题.

这放假疫情期间也不太敢出去，就打算来研究研究这个双层的吸顶效果.

所以仿着京东首页，实现了双层吸顶的效果，并且不会阻断滑动事件的传递，下面看下效果图：

                                       

 

                                               

思路解析：

第一个吸顶采用搜索框悬浮view固定显示隐藏实现，第二个吸顶是原生的CollapsingToolbarLayout + AppBarLayout实现，本来想着用两层CollapsingToolbarLayout + AppBarLayout嵌套，但经过验证后确实是行不通的.

第二个吸顶的位置得悬停在第一个吸顶的底部，所以用了Toolbar做占位，它的高度正是悬浮的搜索框的高度.

因为首页大多都会有刷新功能，所以还要考虑到与刷新的滑动冲突，这里设置了监听只有AppBarLayout是完全关闭状态时刷新控件才可用.

项目地址：https://github.com/weioule/DoubleSuckTopDemo

weioule
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
23. Compose 仿京东商品详情页面 3d全景图触摸旋转功能
u010436867的博客
01-06 501
探索这个功能的时候发现有几种实现方式，其效果也不太一样。 用OpenGL 通过写GLSL文件来实现的，这种实现方式我本人认为最好，但是对Open GL的研究不是很多，也在学习的APP中嵌入了一个第三方库来实现了，感兴趣的可以去看 地址在这里 欢迎Start，这里面有我最近学习的Compose组件教程。 使用多张图片来实现，京东的实现是在H5里面完成的，含有多个Webp图片（为了优化内存吧），通过触摸监听的方式来达到旋转的效果。我这里用Compose来实现。 地址在这里 fun Goods3dImag
Android 仿京东、拼多多商品分类页的示例代码
01-04
最近接了一个项目，要仿照京东写一个商品分类页，但需要滑动右边子分类，左边的主分类也跟着变换，写了个demo，需要的同学可以自取。 先放一个写完之后的样子： 写这个需求的思路也很清晰，首先左边肯定是一个listView，右边也是一个listView，这两个listView要达到一个联动的效果。右边的listView再嵌套一个GridView即可。如下图所示。 所以，我们需要的数据结构也就确定了，应该是数组套数组，也就说护肤大分类下又有子分类商品，类似于这个样子： ok，数据和UI结构确定了，就可以编写代码了 1、先确定主体结构，即两个listView 先不用管上面那个Hello Wor
2024年安卓最新Android之AppBarLayout实现悬停吸附伸缩效果，面试官撕简历
最新发布
2301_79985012的博客
05-16 1139
对程序员来说，很多技术的学习都是“防御性”的。也就是说，我们是在为未来学习。我们学习新技术的目的，或是为了在新项目中应用，或仅仅是为了将来的面试。但不管怎样，一定不能“止步不前”，不能荒废掉。!文章以下内容会给出阿里与美团的面试题（答案+解析）、面试题库、Java核心知识点梳理等网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化学习资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！
嵌套滑动的简单应用——仿京东淘宝首页
tmacfrank的博客
06-10 721
系列文章目录 View 的绘制与事件分发（一）——视图层级与布局加载 例如：第一章 Python 机器学习入门之pandas的使用 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings
基于vue页面的多个标题滑动吸顶与多选分页加载
this_ITBoy的博客
04-16 1648
最近做一个需求，产品要求一个发票列表可以多选发送到邮箱，而且分页加载，并且按照月份排序，滑动的时候月份的部分吸顶，先看看设计图吧。 由于整个项目都是基于vue开发的，项目里有的页面是用vux中的scroll组件实现分页的，看文档里这个组件都已经不维护了，所以用的是vue-infinite-scroll组件，分页就不用多说了。 这里有个多选与全选，如果点...
【android】安卓高仿京东分类页
GuoguoDad的博客
08-11 1743
android 实现商城类app的分类页，高仿哦
最贴近京东首页体验的嵌套滑动吸顶效果
Android技术之家
11-16 901
吸顶效果是各家 App 或多或少都会用的一个交互，这种交互也常见于 PC、H5，可以说是一种通用性很强的前端交互体验，相比较来说京东首页的嵌套滑动吸顶效果是各个类似效果中体验比较好的一个，...
Android 仿京东首页 淘宝首页双层吸顶效果 悬停效果
12-12
总之，"Android 仿京东首页 淘宝首页双层吸顶效果 悬停效果"是一个涉及到Android高级布局和动画技术的项目。通过熟练运用`CoordinatorLayout`家族的组件以及Java代码的动态控制，开发者可以为用户提供更加直观和便捷...
Android仿京东首页
10-31
本项目"Android仿京东首页"就是一个实例，它旨在重现京东App的首页特性，包括上拉时头部颜色变化、搜索框吸顶效果以及下拉时背景图片的展示。以下将详细解析这些功能的实现原理和相关技术点。 1. **上拉头部变色**...
Android - 吸顶效果，悬停效果
12-12
在Android开发中，吸顶效果（Sticky Header）和悬停效果是常见于滚动视图，如RecyclerView或ListView，为了增强用户体验而设计的一种交互模式。这些效果通常用于创建类似新闻应用、社交媒体应用或者电商应用的分组...
原生js实现吸顶效果
10-20
在网页设计中，"吸顶效果"是一种常见的用户体验优化技巧，它使得某个元素在页面滚动时始终保持在屏幕顶部，直到用户滚动到特定位置后才恢复原位。这种效果通常用于固定导航栏，以便用户在浏览长页面时可以方便地访问...
淘宝、京东首页浏览效果、tab悬浮吸顶
09-01
实现淘宝、京东首页效果，完整demo可运行CoordinatorLayout+AppBarLayout+TabLayout+ViewPager+Fragment
android 仿京东商城app
04-22
android 仿京东商城 （首页架构很不错）
Android仿京东、天猫下拉刷新效果
08-31
主要为大家详细介绍了Android仿京东、天猫下拉刷新效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
RecyclerVIew实现悬浮吸顶效果
08-29
部分内容：RecyclerVIew实现悬浮吸顶效果实现悬浮吸顶效果主要为大家详细介绍了RecyclerVIew实现悬浮吸顶效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下RecyclerVIew实现悬浮吸顶效果图。 知识点一：悬浮...
Android 仿京东头部滚动头像动态变化
qq_32136827的博客
08-03 779
Android仿京东头部滚动，头像动态位移变化
Android开发笔记（一百六十四）仿京东首页的下拉刷新
aqi00的博客
02-28 3179
上一篇文章介绍了高仿京东的沉浸式状态栏，可是跟京东首页的头部轮播图相比，依然有三处缺憾：1、京东的头部Banner上方，除了有悬浮着的状态栏，状态栏下面还有一行悬浮工具栏，内嵌扫一扫图标、搜索框，以及消息图标；2、把整个页面往上拉，状态栏的背景色从透明变为深灰，同时工具栏的背景也从透明变为白色；3、页面下拉到顶后，继续下拉会拉出带有“下拉刷新”字样的布局，此时松手则会触发页面的刷新动作；上面第一点
[android进阶]仿京东app分类特效
az44yao的专栏
04-03 241
https://blog.csdn.net/xiaolinxx/article/details/22108985 在eoe论坛上看到某人高分求助，想实现京东分类效果 效果如图1： 图2： 1、首先是图1，点击某分类后，右侧滑动出覆盖层（过程有动画），如图二。 2、图一的分类列表在覆盖动画过程中，字体缩放，图片推出，直到图二效果。 3、图二中，一级列表选中效果的小箭头（见图二），在一级分类切换时箭头有滑动动画（这点可以暂不实现，若有高手那自然更好）。 4、图2分类切换时，右侧覆盖层更新内容。 5、图
Android实现淘宝、京东首页浏览效果
weixin_39592302的博客
09-01 2203
CoordinatorLayout+AppBarLayout+TabLayout+ViewPager+Fragment 实现淘宝、京东首页效果 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的
jetpack compose 吸顶效果实现
10-23
Jetpack Compose 是一种用于构建 Android UI 的现代工具包。要实现吸顶效果，可以使用 Jetpack Compose 的 ConstraintLayout 组件。 首先，在你的布局文件中引入 ConstraintLayout 组件。然后，在需要实现吸顶效果的视图组件前方放置一个占位符组件，作为吸顶效果的起点。 接下来，使用 ConstraintLayout 的 createModifier 函数来创建一个修饰符(Modifier)，并将其应用到需要实现吸顶效果的视图组件上。在修饰符中，通过调用该组件的位置限制函数来设置视图组件的约束条件。 例如，使用 Modifier.offset() 函数将吸顶组件固定在布局的顶部： ```kotlin val modifier = Modifier.constrainAs(view) { top.linkTo(parent.top) } ``` 或者，使用 Modifier.padding() 函数来设置视图组件距离父布局顶部的间距： ```kotlin val modifier = Modifier.padding(top = offset) ``` 其中，offset 可以是一个动态的数值，用于实现吸顶效果的变化。你可以根据滚动位置来调整 offset 的值，实现吸顶视图随滚动而变化的效果。 最后，将该修饰符应用到你的视图组件上： ```kotlin Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .offset { IntOffset(0, offset) } ) { // 吸顶视图组件 } ``` 这样，你就可以实现吸顶效果了。通过调整约束条件或距离顶部的间距，你可以自定义吸顶效果的具体表现。注意，吸顶效果通常与滚动视图组件（如 ListView 或 ScrollView）结合使用，以便根据滚动位置来动态调整吸顶视图的位置和显示状态。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值