Android RecyclerView
RecyclerView已经逐渐的取代ListView。RecyclerView提供了一种插拔式的体验,高度的解耦,异常的灵活,通过设置它提供的不同LayoutManager,ItemDecoration , ItemAnimator实现令人瞠目的效果。
- 你想控制数据的显示方式,列表显示、网格显示、瀑布流显示等等,之前你需要ListView,GridView和自定义View,而现在你可以通过RecyclerView的布局管理器LayoutManager控制
- 你想要控制Item间的间隔(可绘制),想自定义更多样式的分割线,之前你可以设置divider,那么现在你可以使用RecyclerView的ItemDecoration,想怎么画怎么画。
- 你想要控制Item增删的动画,ListView呢我们只能自己通过属性动画来操作 Item 的视图。RecyclerView可使用ItemAnimator
- 你想要局部刷新某个Item,对于ListView来说,我们知道notifyDataSetChanged 来通知视图更新变化,但是该方法会重绘每个Item,而对于RecyclerView.Adapter 则提供了 notifyItemChanged 用于更新单个 Item View 的刷新,我们可以省去自己写局部更新的工作。
除此之外,RecyclerView强制使用了ViewHolder模式,我们知道ListView使用ViewHolder来进行性能优化,但是这不是必须得,但是在RecyclerView中是必须的,另外RecyclerView还有许多优势,这里就不一一列举了,总体来说现在越来越多的项目使用RecyclerView,许多老旧项目也渐渐使用RecyclerView来替代ListView。
注:当我们想要一个列表显示控件的时候,需要支持动画,或者频繁更新,局部刷新,建议使用RecyclerView,更加强大完善,易扩展;其他情况下ListView在使用上反而更加方便,快捷。
RecyclerView的四大组成分别是:
- Adapter:为Item提供数据。必须提供
- LayoutManager:Item的布局。必须提供,我们需要为RecyclerView指定一个布局管理器
- ItemAnimator:添加、删除Item动画。可选提供,默认是DefaultItemAnimator
- ItemDecoration:Item之间的Divider。可选提供,默认是空
LayoutManager布局管理器,通过不同的布局管理器来控制item的排列顺序,负责item元素的布局和复用。RecycleView提供了三种布局管理器:
- LinearLayoutManager:线性布局,以垂直或水平滚动列表方式显示项目。
- GridLayoutManager:网格布局,在网格中显示项目。
- StaggeredGridLayoutManager:瀑布流布局,在分散对齐网格中显示项目。
一、RecyclerView的简单使用
在build.gradle中添加依赖:
implementation 'androidx.recyclerview:recyclerview:1.1.0'
RecyclerViewDemo1Activity.java
public class RecyclerViewDemo1Activity extends AppCompatActivity {
@BindView(R.id.recycler_view)
RecyclerView mRecyclerView;
private List<String> mData;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_recycler_demo1_view);
ButterKnife.bind(this);
//LayoutManager必须指定,否则无法显示数据,这里指定为线性布局,
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
//虚拟数据
mData = createDataList();
//设置Adapter必须指定,否则数据怎么显示
mRecyclerView.setAdapter(new RecyclerViewDemo1Adapter(mData));
}
protected List<String> createDataList() {
mData = new ArrayList<>();
for (int i=0;i<20;i++){
mData.add("这是第"+i+"个View");
}
return mData;
}
}
我们再来看RecyclerViewDemo1Adapter
/**
* 与ListView的Adapter不同,RecyclerView的Adapter需要继承RecyclerView.Adapter<VH>(VH是ViewHolder的类名)
* 记为RecyclerViewDemo1Adapter。
* 创建ViewHolder:在RecyclerViewDemo1Adapter中创建一个继承RecyclerView.ViewHolder的静态内部类,记为ViewHolder
* (RecyclerView必须使用ViewHolder模式,这里的ViewHolder实现几乎与ListView优化时所使用的ViewHolder一致)
* 在RecyclerViewDemo1Adapter中实现:
* ViewHolder onCreateViewHolder(ViewGroup parent, int viewType): 映射Item Layout Id,创建VH并返回。
*
* void onBindViewHolder(ViewHolder holder, int position): 为holder设置指定数据。
*
* int getItemCount(): 返回Item的个数。
*
* 可以看出,RecyclerView将ListView中getView()的功能拆分成了onCreateViewHolder()和onBindViewHolder()。
*/
public class RecyclerViewDemo1Adapter extends RecyclerView.Adapter<RecyclerViewDemo1Adapter.ViewHolder> {
private List<String> mData;
public RecyclerViewDemo1Adapter(List<String> data) {
this.mData = data;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater
.from(parent.getContext())
.inflate(R.layout.item_menu_main, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
holder.setData(this.mData.get(position));
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//item点击事件
}
});
}
@Override
public int getItemCount() {
return this.mData != null ? this.mData.size() : 0;
}
static class ViewHolder extends RecyclerView.ViewHolder{
private TextView mTextView;
public ViewHolder(View itemView) {
super(itemView);
mTextView = (TextView) itemView.findViewById(R.id.tv_title);
}
public void setData(String title) {
this.mTextView.setText(title);
}
}
}
需要注意的是RecyclerView没有提供如ListView的setOnItemClickListener或者setOnItemLongClickListener之类的Item点击事件,我们必须自己去实现该部分功能,实现的方法有很多种,也比较容易,本例中采用在Adapter中BindViewHolder绑定数据的时候为item设置了点击事件。此外也可以在RecyclerView的Adapter中自定义一个接口,并创建一个供其他类设置监听的方法。
public class MyRecycleViewAdapter extends RecyclerView.Adapter<MyRecycleViewAdapter.MyHolder> {
private List mList;//数据源
private OnItemClickListener onItemClickListener;
/**
* 供外部调用设置监听
* @param onItemClickListener
*/
public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
this.onItemClickListener = onItemClickListener;
}
/**
* 自定义的接口
*/
public interface OnItemClickListener {
void onItemClick(View view, int position);
}
//通过方法提供的ViewHolder,将数据绑定到ViewHolder中
@Override
public void onBindViewHolder(final MyHolder holder, int position) {
holder.textView.setText(mList.get(position).toString());
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (onItemClickListener != null) {
onItemClickListener.onItemClick(v, holder.getAdapterPosition() + 1);
}
}
});
}
}
当我们定义好接口后,我们在onBindViewHolder()
方法中为holder.itemView
(itemView是列表中的每一个item项)设置了点击事件监听,然后在onClick()
中判断是否有用户传递过onItemClickListener
实例进来,有的话会调用他的onItemClick()
,将点击事件转移到我们的自定义接口上,传给外面的调用者。调用者代码如下:
mAdapter.setOnItemClickListener(new MyRecycleViewAdapter.OnItemClickListener() {
@Override
public void onItemClick(View view, int position) {
Toast.makeText(getApplicationContext(), "第" + position + "条数据", Toast.LENGTH_SHORT).show();
}
});
上面代码的运行结果看起来像是是一个没有分割线的ListView
二、RecyclerView的进阶使用
上面的基本使用我们是会了,而且点击Item也有反应了,不过巨丑无比啊有木有。起码的分割线都没有,真无语
1、为RecyclerView添加分割线
创建一个类并继承RecyclerView.ItemDecoration,重写以下两个方法:
- onDraw()或者onDrawOver: 绘制分割线。
- getItemOffsets(): 设置分割线的宽、高。
然后使用RecyclerView通过addItemDecoration()方法添加item之间的分割线。
public class RecyclerViewDemo2Activity extends AppCompatActivity {
@BindView(R.id.recycler_view)
RecyclerView mRecyclerView;
private List<String> mData;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_recycler_demo1_view);
ButterKnife.bind(this);
//LayoutManager必须指定,否则无法显示数据,这里指定为线性布局,
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
//虚拟数据
mData = createDataList();
//设置Adapter必须指定,否则数据怎么显示
mRecyclerView.setAdapter(new RecyclerViewDemo2Adapter(mData));
//设置分割线
mRecyclerView.addItemDecoration(
new DividerItemDecoration(this,DividerItemDecoration.VERTICAL));
}
protected List<String> createDataList() {
mData = new ArrayList<>();
for (int i=0;i<20;i++){
mData.add("这是第"+i+"个View");
}
return mData;
}
}
这里的DividerItemDecoration是Google给了一个参考的实现类,这里我们通过分析这个例子来看如何自定义Item Decoration。
DividerItemDecoration.java
public class DividerItemDecoration extends RecyclerView.ItemDecoration {
public static final int HORIZONTAL = LinearLayout.HORIZONTAL;
public static final int VERTICAL = LinearLayout.VERTICAL;
private static final int[] ATTRS = new int[]{ android.R.attr.listDivider };
private Drawable mDivider;
private int mOrientation;
private final Rect mBounds = new Rect();
/**
* 创建一个可使用于LinearLayoutManager的分割线
*
*/
public DividerItemDecoration(Context context, int orientation) {
final TypedArray a = context.obtainStyledAttributes(ATTRS);
mDivider = a.getDrawable(0);
a.recycle();
setOrientation(orientation);
}
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
if (parent.getLayoutManager() == null) {
return;
}
if (mOrientation == VERTICAL) {
drawVertical(c, parent);
} else {
drawHorizontal(c, parent);
}
}
@SuppressLint("NewApi")
private void drawVertical(Canvas canvas, RecyclerView parent) {
canvas.save();
final int left;
final int right;
if (parent.getClipToPadding()) {
left = parent.getPaddingLeft();
right = parent.getWidth() - parent.getPaddingRight();
canvas.clipRect(left, parent.getPaddingTop(), right,
parent.getHeight() - parent.getPaddingBottom());
} else {
left = 0;
right = parent.getWidth();
}
final int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = parent.getChildAt(i);
parent.getDecoratedBoundsWithMargins(child, mBounds);
final int bottom = mBounds.bottom + Math.round(ViewCompat.getTranslationY(child));
final int top = bottom - mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(canvas);
}
canvas.restore();
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent,
RecyclerView.State state) {
if (mOrientation == VERTICAL) {
outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
} else {
outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
}
}
}
首先看构造函数,构造函数中获得系统属性android:listDivider,该属性是一个Drawable对象。接着设置mOrientation,我们这里传入的是DividerItemDecoration.VERTICAL。
上面我们就说了如何添加分割线,那么作为实例,我们先看DividerItemDecoration的getItemOffsets方法
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent,
RecyclerView.State state) {
if (mOrientation == VERTICAL) {
outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
} else {
outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
}
}
outRect是当前item四周的间距,类似margin属性,现在设置了该item下间距为mDivider.getIntrinsicHeight()。
那么getItemOffsets()是怎么被调用的呢?
RecyclerView继承了ViewGroup,并重写了measureChild(),该方法在onMeasure()中被调用,用来计算每个child的大小,计算每个child大小的时候就需要加上getItemOffsets()设置的外间距:
public void measureChild(View child, int widthUsed, int heightUsed) {
final LayoutParams lp = (LayoutParams) child.getLayoutParams();
final Rect insets = mRecyclerView.getItemDecorInsetsForChild(child);
widthUsed += insets.left + insets.right;
heightUsed += insets.top + insets.bottom;
......
}
也就是说getItemOffsets()方法是确定分割线的大小的(这个大小指的是高度,宽度)
那么接着onDraw()以及onDrawOver(),两者的作用是什么呢以及两者之间有什么关系呢?
public class RecyclerView extends ViewGroup {
@Override
public void draw(Canvas c) {
super.draw(c);
final int count = mItemDecorations.size();
for (int i = 0; i < count; i++) {
mItemDecorations.get(i).onDrawOver(c, this, mState);
}
......
}
@Override
public void onDraw(Canvas c) {
super.onDraw(c);
final int count = mItemDecorations.size();
for (int i = 0; i < count; i++) {
mItemDecorations.get(i).onDraw(c, this, mState);
}
}
}
根据View的绘制流程,首先调用RecyclerView重写的draw()方法,随后super.draw()即调用View的draw(),该方法会先调用onDraw()(这个方法在RecyclerView重写了),再调用dispatchDraw()绘制children。因此:ItemDecoration的onDraw()在绘制Item之前调用,ItemDecoration的onDrawOver()在绘制Item之后调用。
在RecyclerView的onDraw()方法中会得到分割线的数目,并循环调用其onDraw()方法,我们再来看分割线实例DividerItemDecoration的onDraw()方法
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
if (parent.getLayoutManager() == null) {
return;
}
if (mOrientation == VERTICAL) {
drawVertical(c, parent);
} else {
drawHorizontal(c, parent);
}
}
这里调用了drawVertical
@SuppressLint("NewApi")
private void drawVertical(Canvas canvas, RecyclerView parent) {
canvas.save();
final int left;
final int right;
if (parent.getClipToPadding()) {
left = parent.getPaddingLeft();
right = parent.getWidth() - parent.getPaddingRight();
canvas.clipRect(left, parent.getPaddingTop(), right,
parent.getHeight() - parent.getPaddingBottom());
} else {
left = 0;
right = parent.getWidth();
}
final int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = parent.getChildAt(i);
parent.getDecoratedBoundsWithMargins(child, mBounds);
final int bottom = mBounds.bottom + Math.round(ViewCompat.getTranslationY(child));
final int top = bottom - mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(canvas);
}
canvas.restore();
}
drawVertical的逻辑比较简单,重要的代码
//为分割线设置bounds
mDivider.setBounds(left, top, right, bottom);
//画出来
mDivider.draw(canvas);
小结
在RecyclerView中添加分割线需要的操作已经在上文中比较详细的说明了,这里再总结一下。我们在为RecyclerView添加分割线的时候使用
//设置分割线
mRecyclerView.addItemDecoration(
new DividerItemDecoration(this,DividerItemDecoration.VERTICAL));
其中addItemDecoration方法的参数即为分割线的实例,那么如何创建分割线呢,
创建一个类并继承RecyclerView.ItemDecoration,重写以下两个方法:
- onDraw()或者onDrawOver: 绘制分割线。
- getItemOffsets(): 设置分割线的宽、高。
上面我们已经初步体验了下LinearLayoutManager,接下来看GridLayoutManager。
- GridLayoutManager
我们尝试去实现类似GridView,秒秒钟的事情:
//mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
mRecyclerView.setLayoutManager(new GridLayoutManager(this,4));
只需要修改LayoutManager即可,还是很nice的。
当然了,改为GridLayoutManager以后,对于分割线,前面的DividerItemDecoration就不适用了,主要是因为它在绘制的时候,比如水平线,针对每个child的取值为:
final int left = parent.getPaddingLeft();
final int right = parent.getWidth() - parent.getPaddingRight();
因为每个Item一行,这样是没问题的。而GridLayoutManager时,一行有多个childItem,这样就多次绘制了,并且GridLayoutManager时,Item如果为最后一列(则右边无间隔线)或者为最后一行(底部无分割线)。
针对上述,我们编写了DividerGridItemDecoration
。
public class DividerGridItemDecoration extends RecyclerView.ItemDecoration
{
private static final int[] ATTRS = new int[] { android.R.attr.listDivider };
private Drawable mDivider;
public DividerGridItemDecoration(Context context)
{
final TypedArray a = context.obtainStyledAttributes(ATTRS);
mDivider = a.getDrawable(0);
a.recycle();
}
@Override
public void onDraw(Canvas c, RecyclerView parent, State state)
{
drawHorizontal(c, parent);
drawVertical(c, parent);
}
private int getSpanCount(RecyclerView parent)
{
// 列数
int spanCount = -1;
LayoutManager layoutManager = parent.getLayoutManager();
if (layoutManager instanceof GridLayoutManager)
{
spanCount = ((GridLayoutManager) layoutManager).getSpanCount();
} else if (layoutManager instanceof StaggeredGridLayoutManager)
{
spanCount = ((StaggeredGridLayoutManager) layoutManager)
.getSpanCount();
}
return spanCount;
}
public void drawHorizontal(Canvas c, RecyclerView parent)
{
int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++)
{
final View child = parent.getChildAt(i);
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int left = child.getLeft() - params.leftMargin;
final int right = child.getRight() + params.rightMargin
+ mDivider.getIntrinsicWidth();
final int top = child.getBottom() + params.bottomMargin;
final int bottom = top + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}
public void drawVertical(Canvas c, RecyclerView parent)
{
final int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++)
{
final View child = parent.getChildAt(i);
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int top = child.getTop() - params.topMargin;
final int bottom = child.getBottom() + params.bottomMargin;
final int left = child.getRight() + params.rightMargin;
final int right = left + mDivider.getIntrinsicWidth();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}
private boolean isLastColum(RecyclerView parent, int pos, int spanCount,
int childCount)
{
LayoutManager layoutManager = parent.getLayoutManager();
if (layoutManager instanceof GridLayoutManager)
{
if ((pos + 1) % spanCount == 0)// 如果是最后一列,则不需要绘制右边
{
return true;
}
} else if (layoutManager instanceof StaggeredGridLayoutManager)
{
int orientation = ((StaggeredGridLayoutManager) layoutManager)
.getOrientation();
if (orientation == StaggeredGridLayoutManager.VERTICAL)
{
if ((pos + 1) % spanCount == 0)// 如果是最后一列,则不需要绘制右边
{
return true;
}
} else
{
childCount = childCount - childCount % spanCount;
if (pos >= childCount)// 如果是最后一列,则不需要绘制右边
return true;
}
}
return false;
}
private boolean isLastRaw(RecyclerView parent, int pos, int spanCount,
int childCount)
{
LayoutManager layoutManager = parent.getLayoutManager();
if (layoutManager instanceof GridLayoutManager)
{
childCount = childCount - childCount % spanCount;
if (pos >= childCount)// 如果是最后一行,则不需要绘制底部
return true;
} else if (layoutManager instanceof StaggeredGridLayoutManager)
{
int orientation = ((StaggeredGridLayoutManager) layoutManager)
.getOrientation();
// StaggeredGridLayoutManager 且纵向滚动
if (orientation == StaggeredGridLayoutManager.VERTICAL)
{
childCount = childCount - childCount % spanCount;
// 如果是最后一行,则不需要绘制底部
if (pos >= childCount)
return true;
} else
// StaggeredGridLayoutManager 且横向滚动
{
// 如果是最后一行,则不需要绘制底部
if ((pos + 1) % spanCount == 0)
{
return true;
}
}
}
return false;
}
@Override
public void getItemOffsets(Rect outRect, int itemPosition,
RecyclerView parent)
{
int spanCount = getSpanCount(parent);
int childCount = parent.getAdapter().getItemCount();
if (isLastRaw(parent, itemPosition, spanCount, childCount))// 如果是最后一行,则不需要绘制底部
{
outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
} else if (isLastColum(parent, itemPosition, spanCount, childCount))// 如果是最后一列,则不需要绘制右边
{
outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
} else
{
outRect.set(0, 0, mDivider.getIntrinsicWidth(),
mDivider.getIntrinsicHeight());
}
}
}
主要在getItemOffsets
方法中,去判断如果是最后一行,则不需要绘制底部;如果是最后一列,则不需要绘制右边,整个判断也考虑到了StaggeredGridLayoutManager
的横向和纵向,所以稍稍有些复杂。最重要还是去理解,如何绘制什么的不重要。一般如果仅仅是希望有空隙,还是去设置item的margin方便。
最后的效果是:
ok,看到这,你可能还觉得RecyclerView不够强大?
但是如果我们有这么个需求,纵屏的时候显示为ListView,横屏的时候显示两列的GridView,我们RecyclerView可以轻松搞定,而如果使用ListView去实现还是需要点功夫的~~~
当然了,这只是皮毛,下面让你心服口服。
- StaggeredGridLayoutManager
瀑布流式的布局,其实他可以实现GridLayoutManager
一样的功能,仅仅按照下列代码:
// mRecyclerView.setLayoutManager(new GridLayoutManager(this,4));
mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(4, StaggeredGridLayoutManager.VERTICAL));
这两种写法显示的效果是一致的,但是注意StaggeredGridLayoutManager构造的第二个参数传一个orientation,如果传入的是StaggeredGridLayoutManager.VERTICAL
代表有多少列;那么传入的如果是StaggeredGridLayoutManager.HORIZONTAL
就代表有多少行,比如本例如果改为:
mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(4,
StaggeredGridLayoutManager.HORIZONTAL));
那么效果为:
可以看到,固定为4行,变成了左右滑动。有一点需要注意,如果是横向的时候,item的宽度需要注意去设置,毕竟横向的宽度没有约束了,应为控件可以横向滚动了。
如果你需要一样横向滚动的GridView,那么恭喜你。
ok,接下来准备看大招,如果让你去实现个瀑布流,最起码不是那么随意就可以实现的吧?但是,如果使用RecyclerView,分分钟的事。
那么如何实现?其实你什么都不用做,只要使用StaggeredGridLayoutManager
我们就已经实现了,只是上面的item布局我们使用了固定的高度,下面我们仅仅在适配器的onBindViewHolder
方法中为我们的item设置个随机的高度,看看效果图:
是不是棒棒哒,通过RecyclerView去实现ListView、GridView、瀑布流的效果基本上没有什么区别,而且可以仅仅通过设置不同的LayoutManager即可实现。
2、为RecyclerView添加HeaderView以及FooterView
RecyclerView没有提供类似ListView的addHeaderView或者addFooterView方法,所以我们要自己实现。关于实现的方法也有很多种。目前网上能搜到的主流解决办法是在Adapter中重写getItemViewType方法为头部或者底部布局生成特定的item。从而实现头部布局以及底部布局。
1、首先要区分头布局、中间布局、尾布局三种不同的type,通过设置一个int值来判断不同的布局
2、通过getItemViewType来返回type
3、在onCreateViewHolder中根据不同的viewType显示不同的布局
4、在onBindViewHolder根据不同的holder加载不同的数据
注意
1、getItemCount这里需要返回的集合的数量+header数量+footer数量
2、当content布局中加载数据是通过position获取数据时需要将position-1
1、添加三种不同的type来区分不同的布局
public static final int ITEM_TYPE_CONTENT = 0;
public static final int ITEM_TYPE_FOOTER = 1;
public static final int ITEM_TYPE_HEADER = 2;
2、添加头、尾布局数量
private int footerCount = 1;
private int headerCount = 1;
3、根据position获取Item的类型
@Override
public int getItemViewType(int position) {
if (isHeaderView(position)) {
return ITEM_TYPE_HEADER;
} else if (isFooterView(position)) {
return ITEM_TYPE_FOOTER;
} else {
return ITEM_TYPE_CONTENT;
}
}
4、根据不同的viewType显示不同的布局
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {
/**
* 主要负责把加载子项的布局
* 将xml定义的布局实例化为view对象
*/
if (viewType == ITEM_TYPE_FOOTER) {
View view = LayoutInflater.from(mContext).inflate(R.layout.recycler_footer_item, viewGroup, false);
return new FooterViewHolder(view);
} else if (viewType == ITEM_TYPE_HEADER) {
View view = LayoutInflater.from(mContext).inflate(R.layout.recycler_header_item, viewGroup, false);
return new HeaderViewHolder(view);
} else if (viewType == ITEM_TYPE_CONTENT) {
View view = LayoutInflater.from(mContext).inflate(R.layout.recyclerview_item, viewGroup, false);
return new ContentViewHolder(view);
}
return null;
}
5、根据不同的ViewHolder加载不同的数据(注意content中通过position加载数据position需要-1)
@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
//主要负责绑定数据
if (holder instanceof HeaderViewHolder) {
} else if (holder instanceof FooterViewHolder) {
} else if (holder instanceof ContentViewHolder) {
((ContentViewHolder) holder).tvItem.setText(mList.get(position - 1));
((ContentViewHolder) holder).llLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (mOnItemClickListener != null) {
mOnItemClickListener.onItemClick(((ContentViewHolder) holder).llLayout, position - 1);
}
}
});
((ContentViewHolder) holder).llLayout.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
if (mOnItemClickListener != null) {
mOnItemClickListener.onItemLongClick(((ContentViewHolder) holder).llLayout, position - 1);
}
return true;
}
});
}
}
6、返回的集合数量(务必加上header、footer)
@Override
public int getItemCount() {
//返回集合的数量
return mList.size() + headerCount + footerCount;
}
7、判断当前 item 是否是 FooterView
/**
* 判断当前 item 是否是 FooterView
*/
public boolean isFooterView(int position) {
return footerCount != 0 && position >= (footerCount + mList.size());
}
8、判断当前 item 是否是 HeaderView
/**
* 判断当前 item 是否是 HeaderView
*/
public boolean isHeaderView(int position) {
return headerCount != 0 && position < headerCount;
}
需加
class HeaderViewHolder extends RecyclerView.ViewHolder {
public HeaderViewHolder(@NonNull View itemView) {
super(itemView);
}
}
class FooterViewHolder extends RecyclerView.ViewHolder {
public FooterViewHolder(@NonNull View itemView) {
super(itemView);
}
}
纵向添加头布局、尾布局.jpg
问题一
当我们为recyclerView设置表格布局时,设置footer、header,如果不做任何处理就会出现下方错误
解决思路
1、通过setSpanSizeLookup重新设置显示的列数
2、通过判断当前view是footer、header,若是footer、header则占取整列,否则占取自己列
@Override
public void onAttachedToRecyclerView(@NonNull RecyclerView recyclerView) {
RecyclerView.LayoutManager manager = recyclerView.getLayoutManager();
if (manager instanceof GridLayoutManager) {
//通过强转将manager转换成GridLayoutManager类型
final GridLayoutManager gridLayoutManager = (GridLayoutManager) manager;
//通过setSpanSizeLookup重新设置显示的列数
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
//通过判断当前view是否是footer、header
//若是footer、header则占取整列,否则占取自己列
return (isHeaderView(position) || isFooterView(position)) ? gridLayoutManager.getSpanCount() : 1;
}
});
}
}
3、ItemAnimator 动画
RecyclerView可以通过mRecyclerView.setItemAnimator(ItemAnimator animator)
来设置添加和移除时的动画效果。ItemAnimator
是一个抽象类,RecyclerView为我们提供了一个ItemAnimator
的实现类DefaultItemAnimator
。
使用方法:
//设置动画效果
mRecycleView.setItemAnimator(new DefaultItemAnimator());
在adapter中添加两个方法,用于添加和移除Item。这里要注意的是,更新数据集要用notifyItemInserted(position)
与notifyItemRemoved(position)
,而不是notifyDataSetChanged()
,否则没有动画效果。
/**
* 添加数据
*/
public void addItem() {
mList.add(0, "new ");
notifyItemInserted(0);
}
/**
* 移除数据
* @param position
*/
public void removeItem(int position) {
mList.remove(position);
notifyItemRemoved(position);
}
效果是按下底部“添加”按钮会在顶部插入数据,点击列表中的Item则删除该条数据。
如果我们对这种动画效果不满意,也可以去自定义各种动画效果。目前github上有许多开源的项目,例如RecyclerViewItemAnimators,我们可以直接去引用或学习它的动画效果。
recyclerview的增加、删除方法:
notifyDataSetChanged();//刷新整体布局
notifyItemChanged(position);//刷新指定position,会重新调用onBindViewHolder来进行刷新,如果当前position在屏幕之外,则不会调用,当重新滚动到屏幕内,会重新调用
notifyItemRangeChanged(position, 10);//刷新从position开始之后10条数据
notifyItemInserted(position);//在第position处插入数据,这个插入时会有动画
notifyItemMoved(position,5);//将当前position移动到position为5的地方,并且刷新
notifyItemRangeInserted(3,10);//批量增加
notifyItemRemoved(position);//删除第position条数据
notifyItemRangeRemoved(position, 10);//批量删除
/**
* 删除某条数据
*
* @param position
*/
public void removeData(int position) {
mList.remove(position);
notifyItemRemoved(position);
notifyItemRangeChanged(position, mList.size());
}
/**
* 在指定position添加数据
*
* @param position
*/
public void addData(int position, String msg) {
if (mList == null) {
mList = new ArrayList<>();
}
if (position < mList.size()) {
//说明这里是第一条
mList.add(position, msg);
} else {
mList.add(msg);
position = mList.size() - 1;
}
notifyItemInserted(position);
notifyItemRangeChanged(position, mList.size());
}
4、下拉刷新、上拉加载更多
下拉刷新:在RecyclerView布局外层添加SwipeRefreshLayout
上拉加载更多:通过RecyclerView的addOnScrollListener来判断房前滚动的状态是否是最后一个Item,来进行加载更多
布局
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycleview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.SwipeRefreshLayout>
2、通过swipeRefreshLayout.setOnRefreshListener来进行下拉刷新
swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
@Override
public void run() {
/**
*要执行的操作
*/
recyclerViewAdapter.addData(0, "我是刷新出来的数据");
swipeRefreshLayout.setRefreshing(false);
Toast.makeText(RecycleActivity.this, "下拉刷新成功", Toast.LENGTH_SHORT).show();
}
}, 1500);//3秒后执行Runnable中的run方法
}
});
3、通过调用addOnScrollListener来进行加载更多
onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState)//滚动状态变化时的回调
onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy)//滚动时回调
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
/**
*
* @param recyclerView 当前滚动的recyclerView
* @param newState 当前滚动的状态
*
* public static final int SCROLL_STATE_IDLE = 0;静止没有滚动
* public static final int SCROLL_STATE_DRAGGING = 1;正在被外部拖拽,即用户滑动
* public static final int SCROLL_STATE_SETTLING = 2;//自动滚动
*
*
*/
@Override
public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
//滚动状态变化时的回调
super.onScrollStateChanged(recyclerView, newState);
//先判断当前状态是否已停止
//判断最后一条数据+1是否是集合的数据
//判断是否滑动到最底部
if (newState == RecyclerView.SCROLL_STATE_IDLE && (lastVisibleItem + 1 == recyclerViewAdapter.getItemCount())) {
//判断总数>0 说明可以加载更多
if (total > 0) {
//判断total > count 说明还可以加载数据
if (total > count) {
Toast.makeText(RecycleActivity.this, "上拉加载", Toast.LENGTH_SHORT).show();
count += 10;//每次加载10条
getData();//加载的数据
recyclerViewAdapter.notifyDataSetChanged();//刷新适配器
} else {
Toast.makeText(RecycleActivity.this, "没有数据加载了", Toast.LENGTH_SHORT).show();
}
} else {
Toast.makeText(RecycleActivity.this, "没有数据加载了", Toast.LENGTH_SHORT).show();
}
}
}
/**
*
* @param recyclerView 当前滚动的recyclerView
* @param dx 水平滚动距离
* dx > 0 时为手指向左滚动,列表滚动显示右面的内容
* dx < 0 时为手指向右滚动,列表滚动显示左面的内容
* @param dy 垂直滚动距离
* dy > 0 时为手指向上滚动,列表滚动显示下面的内容
* dy < 0 时为手指向下滚动,列表滚动显示上面的内容
*/
@Override
public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
//滚动时回调
//最后一个可见Item
lastVisibleItem = mLinearLayoutManager.findLastVisibleItemPosition();
}
});
整体代码
为了更好的方便查,我把Activity和Adapter放在一起写,开发中大家一定要分开逻辑来操作
public class RecycleActivity extends AppCompatActivity {
private List<String> mList = new ArrayList<>();
private RecyclerView mRecyclerView;
private SwipeRefreshLayout swipeRefreshLayout;
private int lastVisibleItem;
private int total = 30;
private int count = 10;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_recycle);
mRecyclerView = (RecyclerView) findViewById(R.id.recycleview);
swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh_layout);
/**
* 设置布局管理器
* 默认垂直排布 LinearLayoutManager.VERTICAL垂直 LinearLayoutManager.HORIZONTAL水平
* boolean reverseLayout 默认是false 是否反转
*
*/
LinearLayoutManager mLinearLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
mRecyclerView.setLayoutManager(mLinearLayoutManager);
//设置纵向默认排列
// mRecyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
//设置横向默认排列,这里需要注意改成横向列表,分割线需要改成横向
// mRecyclerView.setLayoutManager(new LinearLayoutManager(this,LinearLayoutManager.HORIZONTAL,false));
//设置表格布局,这里需要注意的是,有很多需求是根据返回的数据显示表格的数量,所以分割线需要自己重新定义
// mRecyclerView.setLayoutManager(new GridLayoutManager(this, 3));
//设置瀑布流显示
// mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
//默认的分割线
mRecyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));
//设置自定义分割线
// mRecyclerView.addItemDecoration(new SpaceItemDecoation(3));
//设置删除时的动画
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
RecyclerViewAdapter recyclerViewAdapter = new RecyclerViewAdapter(getData(), this);
mRecyclerView.setAdapter(recyclerViewAdapter);
swipeRefreshLayout.setColorSchemeResources(R.color.colorAccent);
swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
@Override
public void run() {
/**
*要执行的操作
*/
recyclerViewAdapter.addData(0, "我是刷新出来的数据");
swipeRefreshLayout.setRefreshing(false);
Toast.makeText(RecycleActivity.this, "下拉刷新成功", Toast.LENGTH_SHORT).show();
}
}, 1500);//3秒后执行Runnable中的run方法
}
});
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
/**
*
* @param recyclerView 当前滚动的recyclerView
* @param newState 当前滚动的状态
*
* public static final int SCROLL_STATE_IDLE = 0;静止没有滚动
* public static final int SCROLL_STATE_DRAGGING = 1;正在被外部拖拽,即用户滑动
* public static final int SCROLL_STATE_SETTLING = 2;//自动滚动
*
*
*/
@Override
public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
//滚动状态变化时的回调
super.onScrollStateChanged(recyclerView, newState);
//先判断当前状态是否已停止
//判断最后一条数据+1是否是集合的数据
//判断是否滑动到最底部
Log.e("newState", newState + "");
if (newState == RecyclerView.SCROLL_STATE_IDLE && (lastVisibleItem + 1 == recyclerViewAdapter.getItemCount())) {
//判断总数>0 说明可以加载更多
if (total > 0) {
//判断total > count 说明还可以加载数据
if (total > count) {
Toast.makeText(RecycleActivity.this, "上拉加载", Toast.LENGTH_SHORT).show();
count += 10;//每次加载10条
getData();//加载的数据
recyclerViewAdapter.notifyDataSetChanged();//刷新适配器
} else {
Toast.makeText(RecycleActivity.this, "没有数据加载了", Toast.LENGTH_SHORT).show();
}
} else {
Toast.makeText(RecycleActivity.this, "没有数据加载了", Toast.LENGTH_SHORT).show();
}
}
}
/**
*
* @param recyclerView 当前滚动的recyclerView
* @param dx 水平滚动距离
* dx > 0 时为手指向左滚动,列表滚动显示右面的内容
* dx < 0 时为手指向右滚动,列表滚动显示左面的内容
* @param dy 垂直滚动距离
* dy > 0 时为手指向上滚动,列表滚动显示下面的内容
* dy < 0 时为手指向下滚动,列表滚动显示上面的内容
*/
@Override
public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
//滚动时回调
//最后一个可见Item
Log.e("dx", dx + "");
lastVisibleItem = mLinearLayoutManager.findLastVisibleItemPosition();
}
});
recyclerViewAdapter.setOnItemClickListener(new RecyclerViewAdapter.OnItemClickListener() {
@Override
public void onItemClick(View view, int position) {
Toast.makeText(RecycleActivity.this, "点击了第" + position + "条", Toast.LENGTH_SHORT).show();
recyclerViewAdapter.addData(position, "我是添加的数据");
}
@Override
public void onItemLongClick(View view, int position) {
Toast.makeText(RecycleActivity.this, "长按了第" + position + "条", Toast.LENGTH_SHORT).show();
recyclerViewAdapter.removeData(position);
}
});
}
private List<String> getData() {
for (int i = 0; i < 10; i++) {
mList.add("测试数据" + i);
// mList.add("照片地址");
}
return mList;
}
}
class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
/**
* 首先要区分头布局、中间布局、尾布局三种不同的type,通过设置一个int值来判断不同的布局
* 通过getItemViewType来返回type
* 在onCreateViewHolder中根据不同的viewType显示不同的布局
* 在onBindViewHolder根据不同的holder加载不同的数据
* 注意:
* 1、getItemCount这里需要返回的集合的数量+header数量+footer数量
* 2、当content布局中加载数据是通过position获取数据时需要将position-1
*/
private List<String> mList;
private Context mContext;
private OnItemClickListener mOnItemClickListener;
public static final int ITEM_TYPE_CONTENT = 0;
public static final int ITEM_TYPE_FOOTER = 1;
public static final int ITEM_TYPE_HEADER = 2;
private int footerCount = 1;
private int headerCount = 1;
public RecyclerViewAdapter(List<String> mList, Context mContext) {
//大部分只有数据与上下文
this.mList = mList;
this.mContext = mContext;
}
public void setOnItemClickListener(OnItemClickListener mOnItemClickListener) {
this.mOnItemClickListener = mOnItemClickListener;
}
/**
* 删除某条数据
*
* @param position
*/
public void removeData(int position) {
notifyItemRemoved(position);
mList.remove(position);
notifyItemRangeChanged(position, mList.size());
}
/**
* 在指定position添加数据
*
* @param position
*/
public void addData(int position, String msg) {
notifyItemInserted(position);
if (mList == null) {
mList = new ArrayList<>();
}
if (position < mList.size()) {
//说明这里是第一条
mList.add(position, msg);
} else {
mList.add(msg);
position = mList.size() - 1;
}
notifyItemRangeChanged(position, mList.size());
}
@Override
public int getItemViewType(int position) {
if (isHeaderView(position)) {
return ITEM_TYPE_HEADER;
} else if (isFooterView(position)) {
return ITEM_TYPE_FOOTER;
} else {
return ITEM_TYPE_CONTENT;
}
}
@Override
public void onAttachedToRecyclerView(@NonNull RecyclerView recyclerView) {
RecyclerView.LayoutManager manager = recyclerView.getLayoutManager();
if (manager instanceof GridLayoutManager) {
//通过强转将manager转换成GridLayoutManager类型
final GridLayoutManager gridLayoutManager = (GridLayoutManager) manager;
//通过setSpanSizeLookup重新设置显示的列数
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
//通过判断当前view是否是footer、header
//若是footer、header则占取整列,否则占取自己列
return (isHeaderView(position) || isFooterView(position)) ? gridLayoutManager.getSpanCount() : 1;
}
});
}
}
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {
/**
* 主要负责把加载子项的布局
* 将xml定义的布局实例化为view对象
*/
if (viewType == ITEM_TYPE_FOOTER) {
View view = LayoutInflater.from(mContext).inflate(R.layout.recycler_footer_item, viewGroup, false);
return new FooterViewHolder(view);
} else if (viewType == ITEM_TYPE_HEADER) {
View view = LayoutInflater.from(mContext).inflate(R.layout.recycler_header_item, viewGroup, false);
return new HeaderViewHolder(view);
} else if (viewType == ITEM_TYPE_CONTENT) {
View view = LayoutInflater.from(mContext).inflate(R.layout.recyclerview_item, viewGroup, false);
return new ContentViewHolder(view);
}
return null;
}
@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
//主要负责绑定数据
if (holder instanceof HeaderViewHolder) {
} else if (holder instanceof FooterViewHolder) {
} else if (holder instanceof ContentViewHolder) {
// Glide.with(mContext).load(mList.get(position-1)).into(((ContentViewHolder) holder).ivImage);
((ContentViewHolder) holder).tvItem.setText(mList.get(position - 1));
((ContentViewHolder) holder).llLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (mOnItemClickListener != null) {
mOnItemClickListener.onItemClick(((ContentViewHolder) holder).llLayout, position - 1);
}
}
});
((ContentViewHolder) holder).llLayout.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
if (mOnItemClickListener != null) {
mOnItemClickListener.onItemLongClick(((ContentViewHolder) holder).llLayout, position - 1);
}
return true;
}
});
}
}
@Override
public int getItemCount() {
//返回集合的数量
return mList.size() + headerCount + footerCount;
}
class HeaderViewHolder extends RecyclerView.ViewHolder {
public HeaderViewHolder(@NonNull View itemView) {
super(itemView);
}
}
class FooterViewHolder extends RecyclerView.ViewHolder {
public FooterViewHolder(@NonNull View itemView) {
super(itemView);
}
}
class ContentViewHolder extends RecyclerView.ViewHolder {
// private final ImageView ivImage;
private final TextView tvItem;
private final LinearLayout llLayout;
public ContentViewHolder(@NonNull View itemView) {
super(itemView);
tvItem = (TextView) itemView.findViewById(R.id.tv_item);
llLayout = (LinearLayout) itemView.findViewById(R.id.ll_layout);
// ivImage = (ImageView) itemView.findViewById(R.id.iv_image);
}
}
/**
* 通过在adapter定义接口实现回调
*/
public interface OnItemClickListener {
//点击事件
void onItemClick(View view, int position);
//长按点击事件
void onItemLongClick(View view, int position);
}
/**
* 判断当前 item 是否是 FooterView
*/
public boolean isFooterView(int position) {
return footerCount != 0 && position >= (footerCount + mList.size());
}
/**
* 判断当前 item 是否是 HeaderView
*/
public boolean isHeaderView(int position) {
return headerCount != 0 && position < headerCount;
}
}
class SpaceItemDecoation extends RecyclerView.ItemDecoration {
private int space;
public SpaceItemDecoation(int space) {
this.space = space;
}
@Override
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
//如果不是第一个盒子设置一个居左和居下的边距
outRect.left = space;
outRect.bottom = space;
//大部分的需求都是3个 因为第一个都是你设置个数的倍数,所以通过取余来将左边距设置为0
if (parent.getChildLayoutPosition(view) % 3 == 0) {
outRect.left = 0;
}
}
}
三、RecyclerView的缓存机制
RecyclerView和ListView的回收机制非常相似,但是ListView是以View作为单位进行回收,RecyclerView是以ViewHolder作为单位进行回收。相比于ListView,RecyclerView的回收机制更为完善
Recycler是RecyclerView回收机制的实现类,他实现了四级缓存:
- mAttachedScrap: 缓存在屏幕上的ViewHolder。
- mCachedViews: 缓存屏幕外的ViewHolder,默认为2个。ListView对于屏幕外的缓存都会调用getView()。
- mViewCacheExtensions: 需要用户定制,默认不实现。
- mRecyclerPool: 缓存池,多个RecyclerView共用。
要想理解RecyclerView的回收机制,我们就必须从其数据展示谈起,我们都知道RecyclerView使用LayoutManager管理其数据布局的显示。
还没有评论,来说两句吧...