RecyclerView上拉隐藏Toolbar,下拉显示
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,下拉显示的更多相关文章
- RecyclerView 上拉加载下拉刷新
RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...
- 使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突
使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种冲突 如果你还在为处理滑动冲突而发愁,那么你需要静 ...
- 使用SwipeRefreshLayout和RecyclerView实现仿“简书”下拉刷新和上拉载入很多其它
一.概述 本篇博客介绍的是怎样使用SwipeRefreshLayout和RecyclerView实现高仿简书Android端的下拉刷新和上拉载入很多其它的效果. 依据效果图能够发现,本案例实现了例如以 ...
- 微信小程序上拉加载下拉刷新
微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...
- iOS--MJRefresh的使用 上拉刷新和下拉加载
1.一般使用MJRefresh 来实现上拉刷新和下拉加载功能 2.MJRefresh 下载地址:https://github.com/CoderMJLee/MJRefresh 3. MJRefresh ...
- 上拉加载下拉刷新控件WaterRefreshLoadMoreView
上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...
- Android PullToRefreshListView上拉刷新和下拉刷新
PullToRefreshListView实现上拉和下拉刷新有两个步骤: 1.设置刷新方式 pullToRefreshView.setMode(PullToRefreshBase.Mode.BOTH) ...
- ListView(2)最简单的上拉刷新,下拉刷新
最简单的上拉刷新和下拉刷新,当listview滚动到底部时向上拉刷新数据.当listview滚动到最顶部时下拉刷新. 图1,上拉刷新 图2,下拉刷新 1,设置lisview,加载heade ...
- Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记
之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...
随机推荐
- Linux命令-网络命令:setup
setup 进入设置网络信息的界面 上图中选“网络配置”进入设置网络信息 上图中选“设备配置”进行配置IP地址,下图显示网卡信息 上图中,选择“eth0”回车进入设置eth0网卡信息界面 上图中选择“ ...
- TypeScript 映射类型
typescript支持定义类型加入推导式后产生新的类型 属性不变 但会改变对象的使用方式 这个是类型Person中加入ReadOnly推导出的新类型 他的属性全部是只读的 这个是推导出部分属性 这是 ...
- AssionShop开源B2C电子商务系统-(二)定单流程活动图状态图(转载)
B2C系统的灵魂所在就是定单的流程了,下面展示下定单的最重要的两个动态图,一个是定单流程活动图.还有一个是简单的定单状态图.通过这两张图,基本可以 了解系统定单流的大概情况了啊.图画的只是初步的设想, ...
- SignalR IOS Android
http://www.dotblogs.com.tw/toysboy21/archive/2014/03/24/144505.aspx https://www.youtube.com/watch?v= ...
- linux下的几个cd命令
linux cd命令 cd data 进入到 data 目录 cd .. 返回上级文件夹 cd ~ 返回用户主文件夹 cd / 返回根文件夹
- Atitit.ati dwr的原理and设计 attilax 总结 java php 版本
Atitit.ati dwr的原理and设计 attilax 总结 java php 版本 1. dwr的优点相对于ajax来说..1 2. DWR工作原理1 3. Dwr的架构2 4. 自定义dwr ...
- 已安装 SQL Server 2005 Express 工具。若要继续,请删除 SQL Server 2005 Express 工具
数据库安装sql server2008R2时遇到. 安装sql server 2008 management,提示错误:Sql2005SsmsExpressFacet 检查是否安装了 SQL Serv ...
- [Android]Volley源代码分析(叁)Network
假设各位看官细致看过我之前的文章,实际上Network这块的仅仅是点小功能的补充.我们来看下NetworkDispatcher的核心处理逻辑: <span style="font-si ...
- 495. Implement Stack【easy】
Implement a stack. You can use any data structure inside a stack except stack itself to implement it ...
- mahout相关介绍
https://blog.csdn.net/xiaopihaierletian/article/details/72674592 https://www.cnblogs.com/zlslch/p/67 ...