Android RecyclerView加载复杂布局

用一个RecyclerView实现多种复杂布局，复用机制要保存

简书：Android RecyclerView加载复杂布局
demo源码挂载在码云上面。
https://git.oschina.net/GoodBaoZi/FuZaJieMianRecyclerViewFuYong/tree/master
在开发过程中，特别是电商类的，有时要开发一个很复杂的页面，但是又要性能好，不怎么出现内存问题，所以今天就写一个demo，一来巩固知识，二来给大家一个看看我实现的方式。

1.jpg

我们先看看两种内存消耗的情况

gaollg0.GIF
第一种是NestedScrollView ，可以看到瞬间内存就增加，然后不停的滑动，加载越来越多的内容，内存消耗越来越大，没用复用机制的缺点。

gaollg1.GIF

扫描二维码关注公众号，回复： 3732829 查看本文章

第二种是只用一个RecyclerView的情况，内存就不会继续上涨了，即使后面再增加内容，内存也是相对稳定。

比如像这样的布局要求，如果用一个NestedScrollView里面嵌套多个RecyclerView，就能轻松解决，但是随着越用越久，上滑继续加载，越滑动，消耗的内存越多，而且，一进到这个界面，就开始加载全部的图片，有的用户不需要看到最底下的东西，就导致消耗流量。网速慢的情况下，下面的图片内容也在加载，抢占上面的网络资源，就会下面有的图片，比上面先出现，这样体验不好。如果你试试后台给你1000个item，下一子加载出来，小米6都会吃不消的。
因为NestedScrollView嵌套的缺点，导致我换一种写法，用一个RecyclerView，多种item，来实现这种布局，一是复用了，内存消耗就小了，然后你滑到哪里，就加载到哪，流量消耗也好一些.

先看NestedScrollView实现功能

<android.support.v4.widget.NestedScrollView
android:id="@+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/item_head"/>
<include layout="@layout/item_message_1"/>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView_product"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<View
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="@color/line_color"/>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView_other"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

这是NestedScrollView是布局xml，我用的是25.3.1版本，就不会有无法计算里面RecyclerView的高度问题。

//设置滑动惯性
recyclerViewProduct.setNestedScrollingEnabled(false);

要记得RecyclerView要设置恢复滑动惯性，不然上下滑动没有惯性了。

//GridLayoutManager，垂直方向
gridLayoutManagerProduct = new GridLayoutManager(this, 3, GridLayoutManager.VERTICAL, false);
//设置头部占3个，其他占1个
gridLayoutManagerProduct.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup()
{
@Override
public int getSpanSize(int position)
{
if (productAdapter.getItemViewType(position) == ProductAdapter.ITEM_HEAD)
{
return 3;
} else
{
return 1;
}
}
});

使用网格布局的话，就用setSpanSizeLookup这个方法，这个不是说每行3个item，你也能写6，然后分组头占6份，他就占满整行宽度了，item写2份，这样的话，就能每行3个item。这个自己去试一试就懂了，就是return 多少，占几份。

//滑动监听
nestedScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener()
{
@Override
public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY)
{
View view = v.getChildAt(0);
if (view.getHeight() == scrollY + v.getHeight())
{
//加载更多、增加数据
otherAdapter.addData(DataOther.getOtherList());
}
}
});

4.NestedScrollView的滑动监听，判断滑动到底部的方法。

接下来说重点，就是使用一个RecyclerView来实现复制的布局，主要讲Adapter。

//头部
public static final int ITEM_HEAD = 0;
//信息
public static final int ITEM_MESSAGE = 1;
//图片
public static final int ITEM_IMAGE = 2;
//还有别类型

首先把这个布局进行拆分，我将它分为 6 种，像“头部”部分，还有“信息”部分，只会出现一次的，其他的就会多出出现，
其实之前，我是将“头部”和“信息”放一起，但是这个item太大了，超出2个屏幕高度，导致显示不全，原因估计是item的高度计算问题，如果不解决问题，可以把item拆成不大于屏幕高度的大小。

@Override
public int getItemViewType(int position)
{
if (position == 0)
{
//确定第一个是头部
return ITEM_HEAD;
} else if (position == 1)
{
//确定第二个是信息
return ITEM_MESSAGE;
} else if (datas.get(position) instanceof BeanImage)
{
return ITEM_IMAGE;
} else if (datas.get(position) instanceof BeanProduct.BeanData)
{
return ITEM_PRODUCT;
} else if (datas.get(position) instanceof BeanOther)
{
return ITEM_OTHER;
} else
{
//确定String用户商品头部
return ITEM_PRODUCT_HEAD;
}
}

在adapter里面，要重写 getItemViewType 这个方法，这个方法呢，就是根据 item 的下标 position 返回对应的 ViewHolder，
demo可以看到，“头部”和“信息”部分，我能确定他是出现一次，而且位置是固定的，所以，position 为 0 和 1 的时候，我就放回对应的值，其他ViewHolder 我根据对应的数据类型来放回。

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
{
if (viewType == ITEM_HEAD)
{
return new HeadViewHolder(LayoutInflater.from(parent.getContext())
.inflate(R.layout.item_head, parent, false));
}
.
.
//还有别的类型，省略
}

adapter必须重新的 onCreateViewHolder 这个方法，给我们一个参数 int viewType，这个参数就是上面 getItemViewType 这个方法判断类型后返回的值，我们根据这个值，来 create 对应的 ViewHolder。

@Override
public void onAttachedToRecyclerView(RecyclerView recyclerView)
{
super.onAttachedToRecyclerView(recyclerView);
RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
if (layoutManager instanceof GridLayoutManager)
{
GridLayoutManager gridLayoutManager = (GridLayoutManager) layoutManager;
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup()
{
@Override
public int getSpanSize(int position)
{
//取多个item的每行占用个数的最小公倍数，
//比如item1一行2个，item2一行3个，item3一行1个，就取6
//他们对应的return 3，return 2，return 6
if (ITEM_PRODUCT == getItemViewType(position))
{
return 2;
} else if (ITEM_OTHER == getItemViewType(position))
{
return 3;
} else
{
return 6;
}
}
});
}
}

adapter再写一个方法 onAttachedToRecyclerView，这个方法就能获取到RecyclerView ，然后再获取到对应的LayoutManager，复制的布局，一般都是用网格（GridLayoutManager），或者瀑布流（ StaggeredGridLayoutManager）
这个看自己的需求了，获取到之后，再根据position对应的ViewHolder，设置他们的占位值（我理解的）。

//滑动监听
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener()
{
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState)
{
super.onScrollStateChanged(recyclerView, newState);
//判断是否到底部,offset是滑动距离，Extent是控件高度，range是总的内容高度
if (recyclerView.getChildCount() > 0
&& recyclerView.computeVerticalScrollOffset() + recyclerView.computeVerticalScrollExtent()
>= recyclerView.computeVerticalScrollRange())
{
detailAdapter.addData(DataOther.getOtherList());
}
}
});

最后来个RecyclerView的滑动到底部，可靠的方法。

这个demo用原始的方法，继承 RecyclerView.Adapter ，将方法一个个重写，好处就是让你理解RecyclerView，可以实现复杂的布局复用，缺点就是写起来，有点费时间，不过学习嘛，搞懂了再去用开源框架。
介绍一些可能用的到的
BaseRecyclerViewAdapterHelper：https://github.com/CymChad/BaseRecyclerViewAdapterHelper/wiki/%E9%A6%96%E9%A1%B5

SwipeLayout 滑动(删除)菜单：https://github.com/daimajia/AndroidSwipeLayout
http://blog.csdn.net/yanzhenjie1003/article/details/52115566

Android RecyclerView加载复杂布局

Android RecyclerView加载复杂布局

用一个RecyclerView实现多种复杂布局，复用机制要保存

猜你喜欢