用一个RecyclerView实现多种复杂布局,复用机制要保存
- 在开发过程中,特别是电商类的,有时要开发一个很复杂的页面,但是又要性能好,不怎么出现内存问题,所以今天就写一个demo,一来巩固知识,二来给大家一个看看我实现的方式。
-
我们先看看两种内存消耗的情况
- 第一种是NestedScrollView ,可以看到瞬间内存就增加,然后不停的滑动,加载越来越多的内容,内存消耗越来越大,没用复用机制的缺点。
- 第二种是只用一个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