第三十九篇-RecyclerView的使用

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

RecyclerView介绍

RecyclerView的出现可以替代ListView，并且比ListView更高级且更具灵活性。如果有数据集合，其中的元素将因用户操作或网络事件而在运行时发生改变，请使用RecyclerVIew。

在ListVIew中，改变列表某一个item数据，然后刷新列表，会回到最顶部，而RecyclerView可以保持原来滑动的位置不变。

RecyclerView实现

要实现一个RecyclerView，会引用到其它模块，其中1、 2是必须的。剩下的3、 4、 5三项，则是起到美化装饰的效果。

1. 控制item的排列方式，需用到布局管理器LayoutManager。

2. 创建一个适配器，需用到RecyclerView.Adapter。

3. 控制item间的间隔，需用到RecyclerView.ItemDecoration。

4. 控制item增删的动画，需用到RecyclerView.ItemAnimator。

5. CardView扩展FrameLayout类，可以显示卡片内的信息，这些信息在整个平台中拥有一致的呈现方式。CardView小部件可拥有阴影和圆角。

注：如果要使用RecyclerView小部件，必须要指定一个Adapter和一个LayoutManager。

RecyclerView简单实例

先感受一下怎么使用RecyclerView。

第一步：新建一个empty Activity。（不赘述，不知道的可以看https://www.cnblogs.com/smart-zihan/p/9813940.html）

第二步：在activity_main.xml中添加一个RecyclerView。

刚开始在右边会有一个下载的符号，点击它下载就好，然后将其拖动到

之后gradle sync，其实这个步骤就是在gradle文件中添加了RecyclerView包。

implementation 'com.android.support:recyclerview-v7:28.0.0'

附上activity_main.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"> <android.support.v7.widget.RecyclerView
android:id="@+id/recycleview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/></LinearLayout>

第三步：在MainActivity.java中使用它。

//通过findViewById拿到RecycleView实例
mRecycleView = findViewById(R.id.recycleview);
//设置RecyclerView管理器
mRecycleView.setLayoutManager(new LinearLayoutManager(this,LinearLayoutManager.VERTICAL,false));

第四步：新建Adapter类，item.xml并在MainActivity中引入使用它。

Adapter类：

package com.example.aimee.callbacktest;import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder>{
private static final String TAG = "MyAdapter";//可以用来debug
private String[] mTitles;
private final Context mContext;
private final LayoutInflater mLayoutInflater; public static class ViewHolder extends RecyclerView.ViewHolder{
TextView mTextView;
public ViewHolder(View v){
super(v);
mTextView = (TextView) v.findViewById(R.id.item_tx);
v.setOnClickListener(new View.OnClickListener() {//当点击item时，会产生什么事件
@Override
public void onClick(View v) {
Log.d(TAG,"onClick-->position = " + getAdapterPosition());
}
});
}
} public MyAdapter(Context context) {
mTitles = context.getResources().getStringArray(R.array.titles);//items
mContext = context;
mLayoutInflater = LayoutInflater.from(context);
} @Override
public void onBindViewHolder(ViewHolder holder, int position) {
holder.mTextView.setText(mTitles[position]); } @Override
public int getItemCount() {
return mTitles == null?0:mTitles.length;
} @Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//LayoutInflater.from指定写法
View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_normal, parent, false);
return new ViewHolder(v);
}
}

item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:orientation="vertical"> <TextView
android:id="@+id/item_tx"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:layout_gravity="center_horizontal"
android:text="item"/></LinearLayout>

MainActivity.java引用Adapter类

//初始化适配器
myAdapter = new MyAdapter(this);
//设置适配器
mRecycleView.setAdapter(myAdapter);

最后，附上完整MainActivity.java代码：

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;import java.util.ArrayList;
import java.util.LinkedList;
import java.util.List;public class MainActivity extends AppCompatActivity { public String TAG = "RECYCLE";
private RecyclerView mRecycleView;
private MyAdapter myAdapter; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); //通过findViewById拿到RecycleView实例
mRecycleView = findViewById(R.id.recycleview);
//设置RecyclerView管理器
mRecycleView.setLayoutManager(new LinearLayoutManager(this,LinearLayoutManager.VERTICAL,false));
//初始化适配器
myAdapter = new MyAdapter(this);
//设置适配器
mRecycleView.setAdapter(myAdapter);
}
}

效果图：

围绕这个例子，介绍一下其它的模块：

一、LayoutManager

布局管理器，来控制Item的排列方式。

RecyclerView提供的布局管理器：

LinearLayoutManager：以垂直或水平滚动列表方式显示项目。例子中以引用。
GridLayoutManager：在网络中显示项目。用法：mRecycleView.setLayoutManager(new GridLayoutManager(getBaseContext(),3));
StaggeredGridLayoutManager：在分散对齐网络中显示项目。用法：mRecycleView.setLayoutManager(new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL));

二、Adapter

myAdapter = new MyAdapter(this);

数据适配器与BaseAdapter比较发生了相当大的变化，主要有三个方法：

getItemCount()：获取总的条目数
onCreateViewHolder()：创建ViewHolder
onBindVIewHolder()：将数据绑定至ViewHolder

创建ViewHolder必须继承RecyclerView.ViewHolder，RecyclerView.ViewHolder构造时必须传入一个View，即item布局。在RecyclerView中，把ViewHolder类作为缓存的单位，假设屏幕显示10个条目，则会创建10个ViewHolder缓存起来，每次复用的是ViewHolder。方法是onCreateViewHolder。

瀑布式布局

在Adapter的onBindViewHolder()为item设置个随机的高度，下面给出Adapter中添加的代码：

public MyAdapter(Context context){
mTitles = context.getResources().getStringArray(R.array.item_list);
mLayoutInflater = LayoutInflater.from(context);
mcontext = context;
mHeights = new ArrayList<Integer>(); for (int i=0;i<mTitles.length;i++){
mHeights.add((int) (100 + Math.random() * 300));
}
}

@Override
public void onBindViewHolder(ViewHolder holder,int position){
ViewGroup.LayoutParams lp = holder.mTextView.getLayoutParams();
lp.height = mHeights.get(position); holder.mTextView.setLayoutParams(lp);
holder.mTextView.setText(mTitles[position]);
}

效果图：

这个是在string.xml中定义的item，如果我们要直接在MainActivity中定义列表怎么办呢？可用如下Adapter和在MainActivity中添加列表的方式.

WaterpallStaggeredAdapter:

package com.example.aimee.callbacktest;import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;import java.util.ArrayList;
import java.util.List;public class WaterpallStaggeredAdapter extends RecyclerView.Adapter<WaterpallStaggeredAdapter.MyViewHolder> { private List<String> mDatas;
private LayoutInflater mInflater;
private List<Integer> mHeights; public interface OnItemClickListener{
void onItemCLick(View view,int position);
void onItemLongClick(View view,int position);
} private OnItemClickListener mOnItemClickListener; public void setmOnItemClickListener(OnItemClickListener mOnItemClickListener){
this.mOnItemClickListener = mOnItemClickListener;
} public WaterpallStaggeredAdapter(Context context,List<String> datas){
mInflater = LayoutInflater.from(context);
mDatas = datas; mHeights = new ArrayList<Integer>();
for (int i=0;i<mDatas.size();i++){
mHeights.add((int) (100 + Math.random() * 300));
}
} @Override
public MyViewHolder onCreateViewHolder(ViewGroup parrent, int viewType) {
MyViewHolder holder = new MyViewHolder(mInflater.inflate(R.layout.item_normal,parrent,false));
return holder;
} @Override
public void onBindViewHolder(final MyViewHolder holder, final int position) {
ViewGroup.LayoutParams lp = holder.tv.getLayoutParams();
lp.height = mHeights.get(position); holder.tv.setLayoutParams(lp);
holder.tv.setText(mDatas.get(position)); //如果设置了回调，则设置点击事件
if (mOnItemClickListener != null){
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int pos = holder.getLayoutPosition();
mOnItemClickListener.onItemCLick(holder.itemView,pos);
}
}); holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
int pos = holder.getLayoutPosition();
mOnItemClickListener.onItemLongClick(holder.itemView,pos);
removeData(pos);
return false;
}
});
} } @Override
public int getItemCount() {
return mDatas.size();
} public class MyViewHolder extends RecyclerView.ViewHolder { TextView tv; public MyViewHolder(View itemView) {
super(itemView);
tv = (TextView) itemView.findViewById(R.id.item_tx);
}
} public void removeData(int position){
mDatas.remove(position);
notifyDataSetChanged();
}}

这时候，在MainActivity中调用时时需要传入两个参数的，一个是context，一个是列表。

mDatas = new ArrayList<String>();
mDatas.add("A");
mDatas.add("B");
mDatas.add("C");
mDatas.add("D");
mDatas.add("E");
mDatas.add("F");
mDatas.add("G");
mDatas.add("H");
mDatas.add("I");
mDatas.add("J");
mDatas.add("K");
mDatas.add("L");
mDatas.add("M");
mDatas.add("N");

至于那个LayoutManager有三种，可以自行尝试，会发现其中的区别的。其实上述列表如果想要简单一点，可以用一个For循环添加列表。。。

三、ItemDecoration添加分割线

使用方法：

为了使效果明显，可以修改下item.xml，去掉CardView，改为LinearLayout，为其设置背景色，改变字体大小。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/cv_item"> <TextView
android:id="@+id/text_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:background="#ff0000"
android:textSize="28dp"
android:layout_gravity="center_horizontal"
android:text="TextView" /></LinearLayout>

在MainActivity中加上分割线

recyclerView.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL));

效果图：

ItemDecoration很好的实现了RecyclerView添加分割线（当使用LayoutManager为LinearLayoutManager时）。该实现类可以看到通过读取系统主题中的Android.R.attr.listDivider作为Item间的分割线，并且支持横向和纵向。

该分割线是系统默认的，可以在theme.xml中找到该属性的使用情况。

在styles.xml找使用的android:listDivider的xml--shape_divider，也可以对其进行自定义。

下面给出DividerItemDecoration的代码：

package com.example.aimee.callbacktest;import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.annotation.NonNull;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;public class DividerItemDecoration extends RecyclerView.ItemDecoration {
private static final int[] ATTRS = new int[]{
android.R.attr.listDivider
}; public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;
public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;
private Drawable mDivider;
private int mOrientation; public DividerItemDecoration(Context context,int mOrientation){
final TypedArray a = context.obtainStyledAttributes(ATTRS);
mDivider = a.getDrawable(0);
a.recycle();
setOrientation(mOrientation);
} public void setOrientation(int orientation){
if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST){
throw new IllegalArgumentException("invalid orientation");
}
mOrientation = orientation;
} @Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
if (mOrientation == VERTICAL_LIST){
drawVertical(c,parent);
}else{
drawHorizontal(c,parent);
}
} public void drawVertical(Canvas c,RecyclerView parent){
final int left = parent.getPaddingLeft();
final int right = parent.getWidth() - parent.getPaddingRight(); final int childCount = parent.getChildCount();
for (int i=0;i<childCount;i++){
final View child = parent.getChildAt(i);
RecyclerView v = new RecyclerView(parent.getContext());
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
final int top = child.getBottom() + params.bottomMargin;
final int bottom = top + mDivider.getIntrinsicHeight();
mDivider.setBounds(left,top,right,bottom);
mDivider.draw(c);
}
} public void drawHorizontal(Canvas c,RecyclerView parent){
final int top = parent.getPaddingTop();
final int bottom = parent.getHeight() - parent.getPaddingBottom(); 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 left = child.getRight() + params.rightMargin;
final int right = left + mDivider.getIntrinsicHeight();
mDivider.setBounds(left,top,right,bottom);
mDivider.draw(c);
}
} @Override
public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {
if (mOrientation == VERTICAL_LIST){
outRect.set(0,0,0,mDivider.getIntrinsicHeight());
}else{
outRect.set(0,0,mDivider.getIntrinsicWidth(),0);
}
}
}

接下来，怎么实现删除和添加的动画效果呢？如果是list<String>那么很简单，指需要.add和.remove就好了，但是如果是从string-array中读取的数据呢，它可没有.add方法，这时可以用到数据类型的转换。

当然我们这里不把list转换成array了，直接用list进行后面的操作。

MyAdapter.java

package com.example.aimee.recyclerviewtest;import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;import java.lang.reflect.Array;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
private static final String TAG = "MyAdapter";
private final LayoutInflater mLayoutInflater;
private final Context mcontext;
private String[] mTitles;
private List<Integer> mHeights;
private List<String> mDatas; public MyAdapter(Context context){
mTitles = context.getResources().getStringArray(R.array.item_list);
mDatas = new ArrayList<>(Arrays.asList(mTitles));
mLayoutInflater = LayoutInflater.from(context);
mcontext = context;
mHeights = new ArrayList<Integer>(); for (int i=0;i<mTitles.length;i++){
mHeights.add((int) (100 + Math.random() * 300));
}
} @Override
public ViewHolder onCreateViewHolder(ViewGroup parent,int viewType){
return new ViewHolder(mLayoutInflater.inflate(R.layout.item_text,parent,false));
} @Override
public void onBindViewHolder(ViewHolder holder,int position){
ViewGroup.LayoutParams lp = holder.mTextView.getLayoutParams();
lp.height = mHeights.get(position); holder.mTextView.setLayoutParams(lp);
holder.mTextView.setText(mDatas.get(position));
} @Override
public int getItemCount(){
return mDatas == null?0:mDatas.size();
} public static class ViewHolder extends RecyclerView.ViewHolder { TextView mTextView; public ViewHolder(View itemView) {
super(itemView);
mTextView = itemView.findViewById(R.id.text_item);
}
} public void addData(int position){
mDatas.add(position,"P");
mHeights.add((int) (100 + Math.random() * 300));
notifyDataSetChanged();
} public void removeData(int position){
mDatas.remove(position);
notifyDataSetChanged();
}}

还得添加一个menu菜单，使其可以添加，删除操作。

menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/add"
android:title="添加"
app:showAsAction="always"/> <item
android:id="@+id/remove"
android:title="删除"
app:showAsAction="always"/></menu>

然后在MainActivity中添加菜单函数

package com.example.aimee.recyclerviewtest;import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.Menu;
import android.view.MenuItem;public class MainActivity extends AppCompatActivity {
private RecyclerView recyclerView;
private MyAdapter myAdapter;
private int count=0; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); recyclerView = findViewById(R.id.recyclerview);
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL));
myAdapter = new MyAdapter(this);
recyclerView.setAdapter(myAdapter);
recyclerView.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL));
recyclerView.setItemAnimator(new DefaultItemAnimator());
} @Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu,menu);
return true;
} @Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId(); if (id==R.id.add){
myAdapter.addData(count);
count = count + 2;
return true;
} if (id==R.id.remove){
if (count>=2)
count = count - 2;
myAdapter.removeData(count);
return true;
}
return super.onOptionsItemSelected(item);
}
}