您的位置：首页 > 其它

RecycleView 实现复杂首页布局三种方式

2016-11-21 11:58 489 查看

做过电商类应用的朋友可能都会遇到一个比较头疼的问题：复杂的首页布局如何实现。参考百度糯米，美团，bilibili等应用，都会发现其首页的布局相对复杂，例如下图bilibili的首页（第二张是demo实现的效果图），可以看到在同一个页面中先是有列表布局出现，然后出现了2列的网格布局，接着3列的网格布局，最后还出现了瀑布流式布局：

这样的效果该怎么做呢？是使用LinearLayoutManager、GridLayoutManager还是StaggeredGridLayoutManager？还是根本不是使用的RecycleView，是用ScrollView硬布局实现的？或者使用了多个RecycleView进行嵌套，来实现3种混合布局的排版的？

下面我们一条一条进行梳理：
首先，我们发现页面的长度是无限长度的，可以不断下拉刷新，所有排除ScrollView的可能，基本断定是使用的是RecyclerView
我们注意到同一个页面中出现了3中混合布局的排版，有可能是使用RecycleView进行了2级嵌套，在线性RecycleView中嵌套了网格和瀑布的RecycleView？
如果没有进行嵌套的话，有没有办法用一种自定义的布局管理器实现这3种效果呢？
会不会是使用了某些3方控件？

针对以上3点疑问，我分别提供3种对应的解决方案来实现上图的效果：

方案一：RecyclerView的2级嵌套

看到同一个滚动控件中出现了3种混合布局，多数人第一映像就是进行嵌套。

如果进行嵌套的话，嵌套什么？从效果图来看，上图的一个栏目中的视图数量似乎是固定的，这意味着可以使用RelativeLayout等布局进行硬排版。确实如果真是固定的这样做当然更好，但是注意到点击每个栏目上的刷新按钮的时候，偶尔会出现两个视图交换位置的动画，这是RecyclerView特有的，而且也没有人告诉我每个栏目中的视图数量就是固定，万一哪天又多了一排呢，所以我们还是嵌套RecyclerView，具体嵌套规则如下图：

其实最外层的RecyclerView1换成ScrollView也可以，只要把内部的RecyclerView依次拼接起来就可以，实现起来也更加简单，实现方式千千万，自己选个喜欢的而已，我只是为了便于拓展，万一需要动态的增加栏目呢。

上一篇就说到了RecyclerView的嵌套的问题，给每个RecyclerView设置对应的Fully****LayoutManager就可以了。具体实现参见源码，我就不贴了，重新getItemViewType方法为每个position位置的item设置不同的type类型，然后在onCreateViewHolder创建对应的Holder，最后在onBindViewHolder为不同类型的item设置不同的Fully布局的子RecyclerView就行了。

上关键代码（有删减）：

@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; } } }); } }

来自CODE的代码片
GridView.java

gridManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() { @Override public int getSpanSize(int position) { return gridManager.getSpanCount(); }}

来自CODE的代码片
GridViewManager.java

@Override public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { if (holder instanceof MyViewHolder1){ holder.child_recyclerView.setLayoutManager(new FullyLinearLayoutManager(context)); }else if (holder instanceof MyViewHolder2){ holder.child_recyclerView.setLayoutManager(new FullyGridLayoutManager(context, 2, GridLayoutManager.VERTICAL, false)); }else if (holder instanceof MyViewHolder3){ holder.child_recyclerView.setLayoutManager(new FullyGridLayoutManager(context, 3, GridLayoutManager.VERTICAL, false)); }else if (holder instanceof MyViewHolder4){ holder.child_recyclerView.setLayoutManager(new FullyGridLayoutManager(context, 3, GridLayoutManager.VERTICAL, false)); } }

来自CODE的代码片
RecyclerView.java

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">recyclerView.setLayoutManager(new GridLayoutManager(recyclerView.getContext(), 6, GridLayoutManager.VERTICAL, false));</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

来自CODE的代码片
blog_20160928_3_4374465

这种方式我不多介绍，因为在前一篇也说过，google不建议对RecyclerView、ListView进行嵌套，嵌套使用的话那么视图复用机制就等于白费了，

依然会在第一次加载时初始化所有的item，如果数据量过大则会产生性能障碍，所以我也遵循google的建议不推荐使用嵌套解决问题，我更加推荐下

面一种方案。

方案二：使用特殊的(自定义)布局管理器

这种方案是我认为最为优秀的做法，它完全符合Google制定的标准：使用布局管理器来管理布局。我们继续观察首页布局的图示，我们真的要为了实现这种混合布局自己去写一个布局管理器吗？我们发现上面出现了列表、网格、瀑布流3种交叉混排的混合布局。我们先把瀑布流放在一边，仔细想想如果我们把网格的列数设置为1列，那不就是一个列表布局吗，也就是说我们使用网格布局管理器就可以做出列表的样式，所以说虽然是说用自定义布局管理器，但实际上不需要我们自定义，GridLayoutManager为我们提供了动态改变每个item所占列数的方法：

来自CODE的代码片
GridView.java

gridManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() { @Override public int getSpanSize(int position) { return gridManager.getSpanCount(); }}

来自CODE的代码片
GridViewManager.java

来自CODE的代码片
RecyclerView.java

来自CODE的代码片
blog_20160928_3_4374465

getSpanSize方法，返回值就表示当前item占多少列，例如如果我们列数设置的为3列，返回3就表示铺满，也就是和列表一样了。

如图所示，我们给RecyclerView设置一个列数为6的GridLayoutManager，然后再动态地为不同部位的item分别设置SpanSize为6（铺满）、3（1/2）、2（1/3）就行了

设置一个列数为6的GridLayoutManager：

recyclerView.setLayoutManager(new
GridLayoutManager(recyclerView.getContext(),6,
GridLayoutManager.VERTICAL,
false));

在onAttachedToRecyclerView方法中动态为不同position设置不同的SpanSize：

来自CODE的代码片
GridView.java

gridManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() { @Override public int getSpanSize(int position) { return gridManager.getSpanCount(); }}

来自CODE的代码片
GridViewManager.java

来自CODE的代码片
RecyclerView.java

来自CODE的代码片
blog_20160928_3_4374465

那么有朋友就要问了，说好的瀑布流呢？

我查阅了StaggeredGridLayoutManager，发现它并没有提供动态设置所占列的方法，只是在StaggeredGridLayoutManager.LayoutParams中提供了这样一个方法：

LayoutParams.setFullSpan(true);

作用是把当前item的宽度设为full（填满），也就是说如果使用StaggeredGridLayoutManager要么不设置，要么就只能填满，

所以无法完成图上的效果，我们也并不是非要完全仿照它，bilibili在最近一次更新后也放弃使用瀑布流式的布局了，统一为列表和网格式混排。

当然如果要实现图上的效果也不是没有办法，只需要换一种方式，改一下item，把设置为FullSpan的item设置为一个多个视图组合的复合item就行了，放个图，代码就不上了：

哪种方案最好？

上面的2种方案中，无疑第二种是最佳的解决方案，没有引入过多的依赖，完全使用RecyclerView布局管理器的特性实现，从性能上来说也最佳。但是TwowayView能做到更多其他的支持，比如网格布局等（具体参见github : twoway-view），也不失为一种好的方式，而第一种方案我也就不多说了，不推荐，这种嵌套不仅让代码逻辑变得复杂凌乱（demo里写嵌套的时候我差点没写吐），同时还有性能障碍，所以给出一个结论：2>1

下载

最后，附上demo下载：
demo下载地址

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航