RecyclerView下拉隐藏Toolbar,上拉显示效果图

先说个事:最近我准备做个开源的博客园android客户端!符合Google最新的material design设计风格的!不知道有没有小伙伴愿意和我一起做呢?如果有愿意的,请私信我哦!!!!我还打算每天直播我们工作的进度,代码,以及BUG等!!




分析

1.首先看toolbar的滚动,肯定用属性动画(没得说)

2.toolbar何时滚动?从动图中我们可以看到是用户向下滑动一定的距离之后才消失,出现反之!注意:这边的距离手我们控制随意

3.大家不知道注意了了没,就是在toolbar完全隐藏的时候,我们的RecyclerView是完全显示的,并没有距离顶部一个toolbar的高度!!这个地方实现有点取巧 我会在下面的代码中说明!!

代码实现

1.首先来为toolbar实现隐藏和显示的两个动画,在这里 我就定义两个函数来分别实现这两个动画。代码过于简单我就直接上代码了:

2.现在我们只要监听RecyclerView的滚动事件来控制toolbar的显示与隐藏就行了!。我简单的来说一下思路:当用户向下滑动一定的距离(这个距离我们人为控制),当滑动的距离超过这个距离且当前的toolbar是显示的,就隐藏!反之显示。但是在这里我们要注意下这个问题:就是这个滑动距离怎么算?
我们先来看一下recyclerview的滑动监听函数RecyclerView.OnScrollListener他有两个回调函数 我们只要关注其中的一个就行啦!就是这个:

其中dy就表示垂直方向的滑动距离!了解玩这个之后 我就来看代码


在这里,我首先是判断是了当前页面的第一个显示的是否是列表中的第一个,如果是就显示toolbar!另外我还定义了两个变量
isshow和disy,分别表示toolbar是否显示和滑动的总距离。还有个细节要注意下 就是当你触发到某种状态之后 disy一定要清零啊!!切记切记!!!另外,这个disy的总滑动距离的计算方式也要注意下!

3.到第二步为止,就可以正常的滑动隐藏啦!!(RecyclerView的Adaper自己写啊!!)。要实现效果图中的效果 我们还差几步!首先呢 ,我们在布局文件上取点巧,就是用FrameLayout作为父控件布局!看xml布局文件:

大家可以看到其实recyclerview还是充满屏幕的 那个toolbar只是我们叠在上面的!OK,布局文件取巧完了,我们再来取巧下Adapter!大家应该知道在适配器中有这么个方法: public int getItemViewType(int position) 就是根据位置不同返回不同的ViewType 当然这个ViewType是我们自己定义 在一般的列表中我们的item view都是相同的,但是有时候会有不相同的view在同一个列表中,此时我么就用到这个方法啦!我现在的解决方案呢,就是在第一个View中添加一个和toolbar相同的view,那么在正常的显示的时候 列表的第一个能被用户看到 而不是被toolbar遮挡住了!!!现在就请大家看一下适配器的代码吧!

上面两段代码 就是适配器的全部代码了 !很简单的!大家一看就会拉!!!

好了 今天就讲到这儿吧!!!

欢迎大家评论啊!!!!!!!!!!!!!!!!!!!!!

RecyclerView上拉隐藏Toolbar,下拉显示的更多相关文章

  1. RecyclerView 上拉加载下拉刷新

    RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...

  2. 使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突

    使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种冲突 如果你还在为处理滑动冲突而发愁,那么你需要静 ...

  3. 使用SwipeRefreshLayout和RecyclerView实现仿“简书”下拉刷新和上拉载入很多其它

    一.概述 本篇博客介绍的是怎样使用SwipeRefreshLayout和RecyclerView实现高仿简书Android端的下拉刷新和上拉载入很多其它的效果. 依据效果图能够发现,本案例实现了例如以 ...

  4. 微信小程序上拉加载下拉刷新

    微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...

  5. iOS--MJRefresh的使用 上拉刷新和下拉加载

    1.一般使用MJRefresh 来实现上拉刷新和下拉加载功能 2.MJRefresh 下载地址:https://github.com/CoderMJLee/MJRefresh 3. MJRefresh ...

  6. 上拉加载下拉刷新控件WaterRefreshLoadMoreView

    上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...

  7. Android PullToRefreshListView上拉刷新和下拉刷新

    PullToRefreshListView实现上拉和下拉刷新有两个步骤: 1.设置刷新方式 pullToRefreshView.setMode(PullToRefreshBase.Mode.BOTH) ...

  8. ListView(2)最简单的上拉刷新,下拉刷新

    最简单的上拉刷新和下拉刷新,当listview滚动到底部时向上拉刷新数据.当listview滚动到最顶部时下拉刷新.       图1,上拉刷新 图2,下拉刷新 1,设置lisview,加载heade ...

  9. Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记

    之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...

随机推荐

  1. JavaScript Map 实现

    //定义map function Map() { this.container = {}; } //将key-value放入map中 Map.prototype.put = function(key, ...

  2. 网站缓存技术(Redis、Memcached、Ehcache)

    Redis 是什么? 通常而言目前的数据库分类有几种,包括 SQL/NSQL,,关系数据库,键值数据库等等等. 分类的标准也不一,Redis本质上也是一种键值数据库的,但它在保持键值数据库简单快捷特点 ...

  3. elem.attr()无法正确判断checkbox是否选中

    本篇文章由:http://xinpure.com/elem-attr-does-not-correctly-determine-whether-the-checkbox-is-selected/ 关于 ...

  4. 【转】火星坐标、百度坐标、WGS-84坐标相互转换及墨卡托投影坐标转经纬度JavaScript版

    原文地址:https://www.cnblogs.com/fwc1994/p/5884115.html 火星坐标 火星坐标是国家测绘局为了国家安全在原始坐标的基础上进行偏移得到的坐标,基本国内的电子地 ...

  5. 电子商务(电销)平台中用户模块(User)数据库设计明细(转载)

    电子商务(电销)平台中用户模块(User)数据库设计明细 以下是自己在电子商务系统设计中的订单模块的数据库设计经验总结,而今发表出来一起分享,如有不当,欢迎跟帖讨论~ 用户基础表(user_base) ...

  6. Codeforces 455C Civilization(并查集+dfs)

    题目链接:Codeforces 455C Civilization 题目大意:给定N.M和Q,N表示有N个城市,M条已经修好的路,修好的路是不能改变的.然后是Q次操作.操作分为两种.一种是查询城市x所 ...

  7. hbase replication原理分析

    本文只是从总体流程来分析replication过程,很多细节没有提及,下一篇文章准备多分析分析细节.   replicationSource启动过程 org.apache.hadoop.hbase.r ...

  8. zooKeeper_《ZooKeeper官方指南》一致性保障

    转 http://ifeve.com/zookeeper-consistency-guarantees/ 本文翻译自<ZooKeeper官方指南>,译者:追云,校对:追云 一致性保障 Zo ...

  9. java强行删除文件(针对进程正在使用的文件的删除)

    boolean result = f.delete(); if(!result)    { System.gc(); f.delete; }

  10. ubuntu更新root密码