android开发游记：RecycleView 实现复杂首页布局三种方式

版权声明：本文为博主原创文章，未经博主允许不得转载。

目录(?)[+]
方案一RecyclerView的2级嵌套
方案二使用特殊的自定义布局管理器
方案三使用第三方控件实现
哪种方案最好
下载

做过电商类应用的朋友可能都会遇到一个比较头疼的问题：复杂的首页布局如何实现。参考百度糯米，美团，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就行了。

上关键代码（有删减）：

<code class="hljs java has-numbering">    <span class="hljs-annotation">@Override</span>
<span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onBindViewHolder</span>(RecyclerView.ViewHolder holder, <span class="hljs-keyword">int</span> position) {
<span class="hljs-keyword">if</span> (holder <span class="hljs-keyword">instanceof</span> MyViewHolder1){
holder.child_recyclerView.setLayoutManager(<span class="hljs-keyword">new</span> FullyLinearLayoutManager(context));
}<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (holder <span class="hljs-keyword">instanceof</span> MyViewHolder2){
holder.child_recyclerView.setLayoutManager(<span class="hljs-keyword">new</span> FullyGridLayoutManager(context, <span class="hljs-number">2</span>, GridLayoutManager.VERTICAL, <span class="hljs-keyword">false</span>));
}<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (holder <span class="hljs-keyword">instanceof</span> MyViewHolder3){
holder.child_recyclerView.setLayoutManager(<span class="hljs-keyword">new</span> FullyGridLayoutManager(context, <span class="hljs-number">3</span>, GridLayoutManager.VERTICAL, <span class="hljs-keyword">false</span>));
}<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (holder <span class="hljs-keyword">instanceof</span> MyViewHolder4){
holder.child_recyclerView.setLayoutManager(<span class="hljs-keyword">new</span> FullyGridLayoutManager(context, <span class="hljs-number">3</span>, GridLayoutManager.VERTICAL, <span class="hljs-keyword">false</span>));
}
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul><div class="save_code tracking-ad" style="display: none;" data-mod="popu_249"><a target=_blank target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div>

这种方式我不多介绍，因为在前一篇也说过，google不建议对RecyclerView、ListView进行嵌套，嵌套使用的话那么视图复用机制就等于白费了，依然会在第一次加载时初始化所有的item，如果数据量过大则会产生性能障碍，所以我也遵循google的建议不推荐使用嵌套解决问题，我更加推荐下面一种方案。

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

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

<code class="hljs java has-numbering">gridManager.setSpanSizeLookup(<span class="hljs-keyword">new</span> GridLayoutManager.SpanSizeLookup() {
<span class="hljs-annotation">@Override</span>
<span class="hljs-keyword">public</span> <span class="hljs-keyword">int</span> <span class="hljs-title">getSpanSize</span>(<span class="hljs-keyword">int</span> position) {
<span class="hljs-keyword">return</span> gridManager.getSpanCount();
}
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div>

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

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



设置一个列数为6的GridLayoutManager：

<code class="hljs avrasm has-numbering">recyclerView<span class="hljs-preprocessor">.setLayoutManager</span>(new GridLayoutManager(recyclerView<span class="hljs-preprocessor">.getContext</span>(), <span class="hljs-number">6</span>, GridLayoutManager<span class="hljs-preprocessor">.VERTICAL</span>, false))<span class="hljs-comment">;</span></code><ul class="pre-numbering"><li>1</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div>

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

<code class="hljs java has-numbering">    <span class="hljs-annotation">@Override</span>
<span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onAttachedToRecyclerView</span>(<span class="hljs-keyword">final</span> RecyclerView recyclerView) {
<span class="hljs-keyword">super</span>.onAttachedToRecyclerView(recyclerView);

RecyclerView.LayoutManager manager = recyclerView.getLayoutManager();
<span class="hljs-keyword">if</span>(manager <span class="hljs-keyword">instanceof</span> GridLayoutManager) {
<span class="hljs-keyword">final</span> GridLayoutManager gridManager = ((GridLayoutManager) manager);
gridManager.setSpanSizeLookup(<span class="hljs-keyword">new</span> GridLayoutManager.SpanSizeLookup() {
<span class="hljs-annotation">@Override</span>
<span class="hljs-keyword">public</span> <span class="hljs-keyword">int</span> <span class="hljs-title">getSpanSize</span>(<span class="hljs-keyword">int</span> position) {
<span class="hljs-keyword">int</span> type = getItemViewType(position);
<span class="hljs-keyword">switch</span> (type){
<span class="hljs-keyword">case</span> TYPE_SLIDER:
<span class="hljs-keyword">case</span> TYPE_TYPE2_HEAD:
<span class="hljs-keyword">case</span> TYPE_TYPE3_HEAD:
<span class="hljs-keyword">return</span> <span class="hljs-number">6</span>;
<span class="hljs-keyword">case</span> TYPE_TYPE2:
<span class="hljs-keyword">return</span> <span class="hljs-number">3</span>;
<span class="hljs-keyword">case</span> TYPE_TYPE3:
<span class="hljs-keyword">return</span> <span class="hljs-number">2</span>;
<span class="hljs-keyword">default</span>:
<span class="hljs-keyword">return</span> <span class="hljs-number">3</span>;
}
}
});
}
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div>

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

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

<code class="hljs bash has-numbering">LayoutParams.setFullSpan(<span class="hljs-literal">true</span>);</code><ul class="pre-numbering"><li>1</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div>

作用是把当前item的宽度设为full（填满），也就是说如果使用StaggeredGridLayoutManager要么不设置，要么就只能填满，所以无法完成图上的效果，我们也并不是非要完全仿照它，bilibili在最近一次更新后也放弃使用瀑布流式的布局了，统一为列表和网格式混排。

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

方案三：使用第三方控件实现

我几乎翻遍了github上的三方RecyclerView，最后发现一款挺有意思的twoway-view

TwowayView是继承自RecyclerView在其功能上拓展的一个特殊TwowayView，其实现了可动态进行自由排列的布局管理器，可实现列表，网格，瀑布，表格布局。功能比较强大，这里主要使用其瀑布流来实现效果：

添加依赖：

<code class="hljs nginx has-numbering"><span class="hljs-title">repositories</span> {
<span class="hljs-title">maven</span> { <span class="hljs-title">url</span> <span class="hljs-string">"https://oss.sonatype.org/content/repositories/snapshots/"</span> }
maven { <span class="hljs-title">url</span> <span class="hljs-string">"https://jitpack.io"</span> }
}
dependencies {
<span class="hljs-title">compile</span> <span class="hljs-string">'org.lucasr.twowayview:core:1.0.0-SNAPSHOT<span class="hljs-variable">@aar</span>'</span>
compile <span class="hljs-string">'org.lucasr.twowayview:layouts:1.0.0-SNAPSHOT<span class="hljs-variable">@aar</span>'</span>
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div>

添加布局：

<code class="hljs avrasm has-numbering"><org<span class="hljs-preprocessor">.lucasr</span><span class="hljs-preprocessor">.twowayview</span><span class="hljs-preprocessor">.widget</span><span class="hljs-preprocessor">.TwoWayView</span>
android:id=<span class="hljs-string">"@+id/twowayView"</span>
android:scrollbars=<span class="hljs-string">"vertical"</span>
android:layout_width=<span class="hljs-string">"match_parent"</span>
android:layout_height=<span class="hljs-string">"match_parent"</span>
app:twowayview_layoutManager=<span class="hljs-string">"StaggeredGridLayoutManager"</span>
app:twowayview_numColumns=<span class="hljs-string">"6"</span> /></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div>

TwoWayView支持在属性中设置布局管理器，这样就不必在代码中设置了，设置列数为6列

设置适配器：

<code class="hljs r has-numbering">public class TwowayRecycleAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
<span class="hljs-keyword">...</span>
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
<span class="hljs-keyword">...</span>
}

@Override
public int getItemCount() {
<span class="hljs-keyword">...</span>
}
@Override
public int getItemViewType(int position) {
<span class="hljs-keyword">...</span>
}
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div>

具体代码参见demo，只说下重点：

实现getItemViewType方法，划分不同的item类型：

<code class="hljs java has-numbering">    <span class="hljs-annotation">@Override</span>
<span class="hljs-keyword">public</span> <span class="hljs-keyword">int</span> <span class="hljs-title">getItemViewType</span>(<span class="hljs-keyword">int</span> position) {
<span class="hljs-keyword">if</span> (position == <span class="hljs-number">0</span>){
<span class="hljs-keyword">return</span> TYPE_SLIDER;
}<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (position == <span class="hljs-number">1</span>){
<span class="hljs-keyword">return</span> TYPE_TYPE2_HEAD;
}<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-number">2</span><=position && position <= <span class="hljs-number">7</span>){
<span class="hljs-keyword">return</span> TYPE_TYPE2;
}<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (position == <span class="hljs-number">8</span>){
<span class="hljs-keyword">return</span> TYPE_TYPE3_HEAD;
}<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-number">9</span><=position && position <= <span class="hljs-number">14</span>){
<span class="hljs-keyword">return</span> TYPE_TYPE3;
}<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-number">15</span><=position && position <= <span class="hljs-number">18</span>){
<span class="hljs-keyword">return</span> TYPE_TYPE4;
}<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span> TYPE_TYPE5;
}
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div>

<code class="hljs java has-numbering">    <span class="hljs-annotation">@Override</span>
<span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onBindViewHolder</span>(RecyclerView.ViewHolder holder, <span class="hljs-keyword">int</span> position) {
View itemView = holder.itemView;
<span class="hljs-keyword">final</span> StaggeredGridLayoutManager.LayoutParams lp = (StaggeredGridLayoutManager.LayoutParams) itemView.getLayoutParams();
<span class="hljs-keyword">switch</span> (getItemViewType(position)) {
<span class="hljs-keyword">case</span> TYPE_SLIDER:
<span class="hljs-keyword">case</span> TYPE_TYPE2_HEAD:
<span class="hljs-keyword">case</span> TYPE_TYPE3_HEAD:
<span class="hljs-keyword">case</span> TYPE_TYPE4:
lp.span = <span class="hljs-number">6</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> TYPE_TYPE2:
lp.span = <span class="hljs-number">3</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> TYPE_TYPE3:
lp.span = <span class="hljs-number">2</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> TYPE_TYPE5:
lp.span = <span class="hljs-number">3</span>;
<span class="hljs-keyword">if</span> (position % <span class="hljs-number">3</span> == <span class="hljs-number">0</span>) {
lp.height = <span class="hljs-number">200</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (position % <span class="hljs-number">5</span> == <span class="hljs-number">0</span>) {
lp.height = <span class="hljs-number">300</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (position % <span class="hljs-number">7</span> == <span class="hljs-number">0</span>) {
lp.height = <span class="hljs-number">500</span>;
} <span class="hljs-keyword">else</span> {
lp.height = <span class="hljs-number">400</span>;
}
<span class="hljs-keyword">break</span>;
}
itemView.setLayoutParams(lp);

...
}</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div>

在onBindViewHolder中通过item的position判断其类型，然后设置item的span（及所占几列），height（高度，不设置及为item本身高度）

哪种方案最好？

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

下载

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