Recycleview实现复杂页面 三种以上布局 瀑布流 多布局 scrollview嵌套recyclerView 显示不全 滑动冲突 之进阶终极篇
来源:互联网 发布:知己而知彼软件 编辑:程序博客网 时间:2024/06/14 09:25
*本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布
相信很多安卓开发的朋友,尤其是刚从事安卓开发的朋友, 当产品经理递过来一张复杂页面的设计图时 , 都会有一种茫然的感觉 , 在心里想着如何实现 , 然后网上搜索如何实现复杂布局页面,当初我也是这么过来的, 可以说踩了很多很大的坑 , 所以决定写下这篇博客 , 供各位猿猿参观 , 想相信看完此篇 , 绝对是最后一篇 , 不用再找了 , 当然 此篇为进阶篇 。 如果你对recycleview 还不熟悉 , 建议先了解recycleview , 熟悉其基本使用。如果有问题 , 欢迎加Q385841539 , 备注一下安卓就可以了,问题答案是 郭嘉 (额,不好意思 本猿 三国杀 狂迷)。
言归正传, 先来看一下效果图:
gif录出来 有点怪 , 所以就截图了,源码已放入github
点击打开链接
下面我来分析一下这种复杂界面的具体实现思路, 当然这里非常感谢 liaoinstan 大神的文章 http://blog.csdn.net/liaoinstan/article/details/52671101,朋友可以看一下 , 最初我也是看了此篇 , 但是此篇并非完美, 在此我进一步总结一下 。
首先我们来做一个分水岭, 就是布局中上拉加载的布局是否是瀑布流,
1、如果不是瀑布流, 那就很简单了,借鉴一下liaoinstan的图片,
如果实现此图, liaoinstan给了如下两种方案,
第一种:
这里recycleview5 应该还是列表管理器, 懒得画图了,意思一样 。
这种方案构思就是recycleview里面嵌套多recycleview,构思简单,编写也是行如流水,能够实现需求,但是问题来了,以下是重点,这种多嵌套的写法,在上拉加载的时候,拉到后面基本就会很卡,就算释放glide(或者其他图片加载框架)的内存也是释放不掉,直至oom或者卡死不动,所以这种嵌套思路只适合没有加载更多的的情况。
第二种:
这中思路里面最重要的方法就是
@Override public void onAttachedToRecyclerView(final RecyclerView recyclerView) { super.onAttachedToRecyclerView(recyclerView); RecyclerView.LayoutManager manager = recyclerView.getLayoutManager(); if(manager instanceof GridLayoutManager) { final GridLayoutManager gridManager = ((GridLayoutManager) manager); gridManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() { @Override public int getSpanSize(int position) { int type = getItemViewType(position); switch (type){ case TYPE_SLIDER: case TYPE_TYPE2_HEAD: case TYPE_TYPE3_HEAD: return 6; case TYPE_TYPE2: return 3; case TYPE_TYPE3: return 2; default: return 3; } } }); } }liaoinstan大神已经给了具体代码和思路,完美实现功能,非常感谢。
2.如果需求是带瀑布流的
那么,第一种情况里面的 onAttachedToRecyclerView方法瀑布流管理器里面就不存在,因此无法使用,只能另寻他法,liaoinstan大神推荐TwowayView能实现上图这种效果,但是, 呵呵,不好意思,当你用TwowayView写实际应用时, 需要网络加载时, 问题出现了,那就是你来回下拉刷新几次,布局上面就会有一块白的空白区域, 直至最后你的布局完全看不见, 只剩下一片白 ,我没有解决此问题。当时我写我们公司的应用时, 写到这里的时候,我就一脸懵逼了, 然后就用最最古老的办法,直接scrollview里面嵌套几个recycleview,写到最后还是意料之中出现问题了,上拉加载到最后还是会卡顿,而且在6.0以上 高度总是有问题。
到这里,我差点想和产品说我们不用瀑布流好不好,但我又从新搜了一下,在瀑布流管理器里面有LayoutParams.setFullSpan(true);方法,在
onCreateViewHolder(ViewGroup parent, int viewType)
总体思路就是,把下面的瀑布流部分作为一种type,其他无需加载更多的布局放在recycleview里面
使用此方法使这一行占满全屏,这是我到现在总结出来的最好实现方式。
思路图如下:
部分代码如下
@Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { if (viewType == TYPE_TOP) { //头部轮播图 View viewtop = inflater.inflate(R.layout.adapter_slider, parent, false); StaggeredGridLayoutManager.LayoutParams params = (StaggeredGridLayoutManager.LayoutParams) viewtop.getLayoutParams(); params.setFullSpan(true);//最为重要的一个方法,占满全屏,以下同理 viewtop.setLayoutParams(params); return new TypeTopsliderHolder(viewtop); } else if (viewType == TYPE_HEADER) { View view2 = inflater.inflate(R.layout.item_homepagertypeheader_type, parent, false); StaggeredGridLayoutManager.LayoutParams params = (StaggeredGridLayoutManager.LayoutParams) view2.getLayoutParams(); params.setFullSpan(true); view2.setLayoutParams(params); return new TypeheadHolder(view2); } else if (viewType == TYPE_CENTER) { //中间head下面的布局 View view = inflater.inflate(R.layout.itam_homepageradapter_rv2, parent, false); StaggeredGridLayoutManager.LayoutParams params2 = (StaggeredGridLayoutManager.LayoutParams) view.getLayoutParams(); params2.setFullSpan(true); view.setLayoutParams(params2); return new TypetypeHolder2(view); } else if (viewType == TYPE_CATEGORY) {//四个快速入口的holder//这里的TypetypeHolder和上面的TypetypeHolder2 其实可以写成一个holder,这里为了简单,避免引起复用带来的问题,分开了 View view = inflater.inflate(R.layout.itam_homepageradapter_rv2, parent, false); StaggeredGridLayoutManager.LayoutParams params2 = (StaggeredGridLayoutManager.LayoutParams) view.getLayoutParams(); params2.setFullSpan(true); view.setLayoutParams(params2); return new TypetypeHolder(view); } else if (viewType == TYPE_REFRESH) { return new TypeRefresh(inflater.inflate(R.layout.item_raiders2, parent, false)); } else { View viewtop = inflater.inflate(R.layout.adapter_slider, parent, false); StaggeredGridLayoutManager.LayoutParams params = (StaggeredGridLayoutManager.LayoutParams) viewtop.getLayoutParams(); params.setFullSpan(true); viewtop.setLayoutParams(params); return new TypeTopsliderHolder(viewtop); } }
这个方法 在大神的文章里 只是 副作用的 提了一下, 光想着TwowayView 了 所以没在意 ,最后还是此方法解决了这种需求。
我的线上项目为[空艺术,朋友可以点击下载看一下效果](http://a.app.qq.com/o/simple.jsp?pkgname=com.happyo2o.artexhibition),首页就是这个原理实现的,大家可以看一下效果。
总结:本人只是理论性的总结了复杂布局的实现方式,以及一些坑 , 避免各位浪费时间和精力 ,鄙人在此献丑了,代码已经全部上传,github项目源码 欢迎star , 转载 , 万分感谢 。
- Recycleview实现复杂页面 三种以上布局 瀑布流 多布局 scrollview嵌套recyclerView 显示不全 滑动冲突 之进阶终极篇
- ScrollView 内部嵌套 ListView +复杂布局 设置页面全屏滑动
- ScrollView嵌套RecyclerView滑动冲突,禁止RecycleView滑动
- 解决ScrollView嵌套RecyclerView 滑动卡顿和嵌套多个RecyclerView 显示不全的问题
- 竖向ScrollView嵌套横向滑动布局冲突
- ScrollView嵌套复杂布局
- ScrollView嵌套RecyclerView显示不全
- 解决Scrollview嵌套recycleview的显示不完全,滑动冲突问题
- ScrollView 嵌套ListView 滑动冲突,与显示不全
- 解决ScrollView嵌套ListView滑动冲突显示不全的问题
- ScrollView嵌套RecyclerView滑动冲突
- ScrollView 嵌套 Recyclerview 滑动冲突
- scrollview嵌套recycleview滑动冲突的问题之2
- RecycleView 实现复杂首页布局三种方式
- ScrollView中嵌套recycleView 出现的不显示,显示不全,终极解决方案
- ScrollView中嵌套recycleView 出现的不显示,显示不全,终极解决方案
- 安卓学习笔记---ScrollView中嵌套recycleView 出现的不显示,显示不全,终极解决方案
- ScrollView中嵌套recycleView 出现的不显示,显示不全,终极解决方案
- 从十二大科技热词看互联网科技行业趋势
- Ajax 知识
- flask成长记(三)
- LeetCode 4 Median of Two Sorted Arrays 解题报告
- 紫书 例题11-1 公共表达式消除 UVa12219 表达式树,递归
- Recycleview实现复杂页面 三种以上布局 瀑布流 多布局 scrollview嵌套recyclerView 显示不全 滑动冲突 之进阶终极篇
- uboot 内存布局及启动过程
- Linux常用的配置文件整理
- 第一行安卓代码——从相册中选择照片8.3.2
- 迷宫
- winedt 破解方法和软件下载
- PAT1021. 个位数统计 (15)
- LeetCode 409. Longest Palindrome
- 你不能不知道到的Hook!