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. maven自动打包到tomcat 8

    <build> <finalName>maven-project</finalName> <plugins> <plugin> <gr ...

  2. ubuntu安装Skype 4.3

    Install Skype 4.3 Step 1: Remove previous version sudo apt-get remove skype skype-bin:i386 skype:i38 ...

  3. DEDECMS 添加栏目图片

    当我们一个栏目列表都用缩略图来表示产,而不仅仅只是文字,如果没有这项功能会非常麻烦,网上有很多这方面的资料,但是都试过了有很多问题,自己研究一下,测试基本通过.需要新加字段 typeimg 后台执行S ...

  4. II7.5配置IIS支持2G文件下载

    IIS默认支持下载在20M让IIS7.5支持大文件下载,有两个地方 1.打IIS管理器->asp->点限制属性+->设置最大请求实体主体限制为2147483648 2.打开路径C:\ ...

  5. SSH整合简单例子

    说明:简单SSH整合,struts版本2.3.32,spring版本3.2.9,hibernate版本3.6.10 一.开发步骤 1 引jar包,创建用户library.使用的包和之前博文相同,可以参 ...

  6. ultragrid checkbox

    울트라그리드에 체크박스 넣을 사용하는 속성. cols["checked"].Header.Caption = ""; cols["checked ...

  7. macbook的终端中使用gnu的ls命令

    1.首先,我用的是iterm2终端.方法是:到iterm2.com中下载后,复制到applications文件夹下,就可以了. 2.其次,mac下的ls不是gnu的ls,两者是有区别的,看来开源世界还 ...

  8. 关于UI功能解锁,UI特效动画,UI tips的再思考

    之前写过一篇这样的文章,但当时的思路可行性太低 首先所有的UI面板通过发送字符串消息来告知,是否触发了解锁检测,tips检测,动画特效.可以理解为这样的接口: AsyncResult SendUIMe ...

  9. 绝不能错过的10款最新OpenStack网络运维 & 监控工具

    摘要 今天我们要推荐给大家的是关于奥斯汀OpenStack Summit的OpenStack网络方面功能与工具相关的技术演讲. 希望可以帮助国内的开发者.架构师和用户更好地了解OpenStack在SD ...

  10. 关于 web中 使用 java.net.URLEncoder.encode 要编码两次呢 , js的encodeURIComponent 同理

    因为在jsp中对中文进行了编码的时候用的是UTF-8的编码方式,而在servlet中调用request.getParameter();方法的时候使用服务器指定的原始编码格式(ISO-8859-1)自动 ...