文档章节

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

谁带我去看看世界
 谁带我去看看世界
发布于 2015/06/16 17:41
字数 1233
阅读 5165
收藏 30
点赞 3
评论 4

做了个类似美团app的一个效果

 

当一个浮动layout的滑动到顶部时,这个浮动layout就悬停下来,当屏幕往下滑动时,浮动layout也跟着往下移动。

       因此,我特意也写了一个:浮动layuot滑动到顶部悬停demo,下图:

(妈蛋上传图片不能超过200k,只能把图片阉割成这样,凑合着看吧)

 

 

 

原理
        好,看完效果图之后,我们来看一下这个效果的设计原理。
        首先,我们来看一张整体的设计图:

 

 

 

 

 

 

 

设计效果图是分为三个部分:顶部区域、浮动区域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"
    tools:context=".MainActivity" >

    <com.jimstin.topfloatdemo.view.MyScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/image_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/pic01"/>
           <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:background="#f6e4c0">
                <TextView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textSize="10pt"
                    android:text="可乐鸡翅  55元"
                    android:textColor="#e68b4e"/>
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="立即购买"
                    android:textColor="#ffffff"/>
            </LinearLayout>
            <ListView
                android:id="@+id/list_view"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1">
               
            </ListView>
           
        </LinearLayout>
    </com.jimstin.topfloatdemo.view.MyScrollView>

    <LinearLayout
         android:id="@+id/flow_llay"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
         android:background="#f6e4c0"
         android:visibility="gone">
         <TextView
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:layout_weight="1"
              android:textSize="10pt"
              android:text="可乐鸡翅  55元"
              android:textColor="#e68b4e"/>
          <Button
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="立即购买"
              android:textColor="#ffffff"/>
     </LinearLayout>
</RelativeLayout>

 

 

布局文件效果

 

 

顶部的“可乐鸡翅”就是刚刚所说的浮动区域B,中间的“可乐鸡翅”则是浮动区域A,布局文件应该不难理解。
那么我们怎么知道何时隐藏、显示顶部的浮动layout呢?

 

 

由于整体的布局内容都是放在一个自定义的ScrollView里面。所以,只要我们在ScrollView里面判断:
      当Scrollview向上滑动的距离大于等于顶部区域的高度时,也就是浮动区域A的顶边贴到屏幕顶部的时候,这是将浮动区域B的可见性设置为VISIBLE即可,否则设置为GONE即可。
      这样就实现了我们想要的效果了。
关键代码:

 

@Override
        protected void onScrollChanged(int l, int t, int oldl, int oldt) {
               
                super.onScrollChanged(l, t, oldl, oldt);
                if(mTopView != null) {
                        if(t >= mTopView.getHeight()) {
                                mFlowView.setVisibility(View.VISIBLE);
                        } else {
                                mFlowView.setVisibility(View.GONE);
                        }
                }
        }

 

代码的意思是,当ScrollView向上滚动的高度大于等于mTopView顶部区域的高度时,那么就将mFlowView浮动layout的可见性设置为VISIBLE,否则设置为GONE。
那么这个判读是在哪里的呢?

 

 


其实这个方法是在自定义的ScrollView里面的,可能这里就有人疑问,为什么要自定义ScrollView?因为onScrollChange方法是一个protected的方法,直接使用ScrollView是使用不了该方法的。

 

好的,今天的分享就到此为止!

 

如果大家喜欢就请多多支持我博客的文章,我会尽量抽时间来分享干货!!嫩们的支持是仁家的动力!!!

 

1       想要盈利吗?想,就对了

2       android 开发赚钱

 

这是在我的博客点击率最高的两篇文章,看来大家还是对赚钱感兴趣啊,有需要的朋友可以去看看,不用谢,我是雷锋,嘻嘻!!!

 

 

 

 

 

 

© 著作权归作者所有

共有 人打赏支持
谁带我去看看世界
粉丝 11
博文 11
码字总数 12762
作品 0
广州
加载中

评论(4)

C
C0612
雷锋同志,我要带你去看看世界
太阳bb
太阳bb
zan····zan····zan····zan····zan····zan····zan····zan····zan····zan····zan····
这个杀手不太冷额
好东西,谢谢楼主
高仿新浪微博客户端(未完待续)

高仿新浪微博手机客户端。目前更新到第二期,实现的功能包括: 1. 微博首页列表布局,即UITableViewCell的自定义; 2. 自定义导航栏(UINavigationBar)上的控件; 3. 点击导航栏(UINavigat...

匿名
2013/04/13
4.3K
0
Android5.0+(CoordinatorLayout)

英文原文:https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout 这篇文章专门讲解和CoordinatorLayout相关的知识点,这也是Design Support Library中最重要与最难...

让代码飞一会
2015/07/28
0
0
「iOS」高仿【少数派】客户端 代码+思路讲解

少数派 一、写在前面 在我的iOS开发学习过程中,阅读过许多同学的高仿项目文章、源码,对我助益颇深。但是许许多多的高仿项目在技术方面各有侧重,所以我先把本项目中值得探讨的技术点列出,...

halohily
2017/09/13
0
0
「iOS」高仿【少数派】客户端 代码+思路讲解

少数派 一、写在前面 在我的iOS开发学习过程中,阅读过许多同学的高仿项目文章、源码,对我助益颇深。但是许许多多的高仿项目在技术方面各有侧重,所以我先把本项目中值得探讨的技术点列出,...

halohily
2017/11/26
0
0
仿知乎首页学习 CoordinateLayout

前言 第一次接触CoordinateLayout的时候深深的被其炫酷的特效所吸引;想着什么时候在实际项目中可以使用一下,无奈实际项目因行业特点,并不需要使用到CoordinateLayout这么高端的交互体验;...

IAM四十二
2016/12/22
0
0
【React Native开发】React Native控件之ViewPagerAndroid讲解以及美团首页顶部效果实例(17)

转载请标明出处: http://blog.csdn.net/developerjiangqq/article/details/50619122 本文出自:【江清清的博客】 (一)前言 【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会...

jiangqq781931404
2016/02/01
0
0
【Android】快速实现仿美团选择城市界面,微信通讯录界面

概述 本文是这个系列的第三篇,不出意外也是终结篇。因为使用经过重构后的控件已经可以快速实现市面上带 索引导航、悬停分组的列表界面了。 在前两篇里,我们从0开始,一步一步实现了仿微信通...

zxt0601
2016/11/29
0
0
简书的滑动悬停效果

2017-11-16 171045.gif 最近,浏览简书的时候,发现简书iOS客户端的个人主页,有这种滑动悬停的效果,自己也想动手实现下。下面是我的实现效果: 2.gif 3.gif 整个代码实现过程不复杂,复杂的...

Jesse1949
2017/11/16
0
0
高仿淘宝和聚美优品商城详情页实现《IT蓝豹》

android-vertical-slide-view高仿淘宝和聚美优品商城详情页实现,在商品详情页,向上拖动时,可以加载下一页。 使用ViewDragHelper,滑动比较流畅。 scrollView滑动到底部的时候,再行向上拖...

抉择很难
2015/11/06
0
0
Android-UI控件

手摸手教你写 Slack 的 Loading 动画 四步实现: 画布旋转及线条变化动画(Canvas Rotate Line Change) 画布旋转动画(Canvas Rotate) 画布旋转圆圈变化动画(Canvas Rotate Circle Change...

掘金官方
01/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

07、Vue.js---Vue对象的实例方法和属性

Vue对象的实例属性和方法分为全局和局部实例属性和方法。全局和局部的区别在于调用者不同。 · 局部实例属性和方法: vm | this .$方法名或属性; · 全局实例熟悉和方法: Vue .方法名或属性...

秋季长青
3分钟前
0
0
乐观锁

最近公司一个项目中会遇到一个用户记录被多次插入的情况。其实在保存之前先判断有没有的。 觉得可以采用乐观锁机制来解决问题。 JPA之@Version进行乐观锁并发更新 使用JPA实现乐观锁 spring...

miaojiangmin
7分钟前
0
0
并发插入引发的死锁问题排查

一.业务背景 我们现在的业务是一款数据产品,有不少实时计算和爬取来的数据都汇总到大数据仓库、数据挖掘平台ODPS上。然后应用在读取这些数据时,这些数据会先导入到并发读能力更强,适合结构...

tantexian
17分钟前
0
0
docker 搭建nginx+php5.6+mysql

因为要重新做服务器系统,正好把公司官网,放到容器中,生成个镜像,以后就不用管它了。我看看公司官网使用php写的,并且使用thinkPHP3.1的框架,看到这里崩溃了。没办法,服务器得做系统,硬...

始终初心
19分钟前
0
0
应用实战:从Redis到Aerospike,我们踩了这些坑

个推专注为开发者们提供消息推送服务多年。通过个推SDK,手机终端与服务器建立长连接,维持在线状态。然而在网络异常等情况下,消息无法实时送达到终端用户,因而推送服务器建立了一份离线消...

个推
23分钟前
0
0
0718日志

c端线上地址 http://x.diandanme.com/fe/?d=183#/ 什么时候来需求,我做好准备了吗? router取值问题 --host 192.168.33.121 git下拉覆盖本地文件 $ git fetch --all $ git reset origin/mas...

大美琴
23分钟前
0
0
Swift 学习网址推荐

1."航哥" http://www.hangge.com/blog/cache/category_72_1.html 2.https://nintendoboy.gitbooks.io/swift-study-note-v2/content/swift.html...

west_zll
24分钟前
1
0
istio 0.8 服务限流配置

此任务说明如何使用Istio动态限制服务的流量。 在你开始之前 按照安装指南中的快速入门说明在Kubernetes群集中设置Istio 。 部署Bookinfo示例应用程序。 初始化应用程序版本路由以将reviews...

xiaomin0322
25分钟前
0
0
SpringCloud架构设计

最近一直在针对SpringCloud框架做项目,从中踩了不少的坑,也渐渐梳理出了一些内容,由于SpringCloud作为一个全家桶,其中东西太多,所以这时候就要有所取舍,这里就想把自己比较常用组件及架...

xiaoxin
25分钟前
1
0
XamarinSQLite教程创建数据库

XamarinSQLite教程创建数据库 安装SQLite/SQL Server Compact Toolbox后,就可以使用该插件创建数据库了。操作步骤如下: (1)在Visual Studio中,单击“工具”|SQLite/SQL Server Compact ...

大学霸
28分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部