Carson带你学Android：手把手带你深入学习RecylerView

前言

• RecylerView在Android开发中十分常见
• 今天，我将为大家带来RecylerView的全面介绍，包括其定义、特点、具体使用等，希望你们会喜欢。

Carson带你学Android系列文章
Carson带你学Android：学习方法
Carson带你学Android：四大组件
Carson带你学Android：自定义View
Carson带你学Android：异步-多线程
Carson带你学Android：性能优化
Carson带你学Android：动画

目录

1. 简介

• 定义Google用于代替ListView的滑动组件
• 特点：功能更强大、支持定制样式更丰富、扩展性更高

2. 与ListView对比

2.1 优点

mRecyclerView = findView(R.id.id_recyclerview);
//设置布局管理器
mRecyclerView.setLayoutManager(layout);
//设置adapter
mRecyclerView.setAdapter(adapter)
//设置Item增加、移除动画
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
//添加分割线
mRecyclerView.addItemDecoration(new DividerItemDecoration(getActivity(), DividerItemDecoration.HORIZONTAL_LIST));

• 问：相比较于ListView，RecyclerView基本需要上面一系列步骤进行设置，而ListView可能只需要去设置一个adapter就能正常使用。那么为什么会添加这么多的步骤呢？
• 答：从名字上看RecyclerView，即回收循环视图，也就是说RecyclerView只管回收与复用View，其他的你可以自己去设置，可以看出其高度的解耦，给予你充分的定制自由

2.2 缺点

RecyclerView实现控制点击、长按事件较为麻烦，需要自己写

3. 应用场景

列表页展示界面（需扩展、需支持动画、频繁更新 & 局部刷新）

4. 基础概念

4.1 RecyclerView.Adapter

和ListView一样，RecyclerView一样需要适配器，而且这个适配器强制要求了我们必须要用Viewholder，让性能得到优化，而且getView方法不需自己写，我们只需要写好Viewholder，View的复用已经封装好了。

4.2 LayoutManager

布局管理器，设置为LinearLayoutManager、GridLayoutManager、StaggeredGridLayoutManager可以轻易地实现ListView，GridView以及流式布局的列表效果。

还可管理滚动 & 循环利用

4.3 ItemAnimator

这个类可以实现增删动画，而且不想设置的话它的默认效果已经很好了。

5. 使用步骤

1. 定义主xml布局
2. 根据需要定义RecyclerView每行所实现的xml布局
3. 定义一个Adapter类继承RecyclerView.Adapter，重写里面的方法。
4. 定义一个HashMap构成的列表，将数据以键值对的方式存放在里面。
5. 构造Adapter对象，设置适配器。
6. 将RecyclerView绑定到Adapter上。

6. 具体实例

• 将按照上述步骤进行具体实例展示
• 个人推荐先下载Demo源码再对着下面分析看，效果会更好：Demo的源码下载

步骤1. 定义主xml布局
activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="${relativePackage}.${activityClass}" ><android.support.v7.widget.RecyclerViewandroid:id="@+id/my_recycler_view"android:layout_width="match_parent"android:layout_height="match_parent"android:scrollbars="horizontal"/><!--设置一个RecyclerView--></RelativeLayout>

在AndroidStudio1.5使用support-v7包：

• 右键文件目录的app目录进入Moudle Setting
• 在Dependencies里面加入

compile 'com.android.support:recyclerview-v7:23.1.1'

步骤2. 根据需要定义RecyclerView每行所实现的xml布局（item布局）
list_cell.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="match_parent">
<RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:layout_alignParentRight="true"android:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/ItemImage"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="New Text"android:id="@+id/Itemtitle" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="New Text"android:id="@+id/Itemtext"android:layout_below="@+id/Itemtitle"/>
</RelativeLayout>
</LinearLayout>

步骤3. 定义一个Adapter类继承 RecyclerView.Adapter，重写里面的方法。
MyAdapter.java

package scut.receiverview;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.ImageView;
import android.widget.TextView;import java.util.ArrayList;
import java.util.HashMap;/*** Created by yany on 2016/4/11.*/
public class MyAdapter extends RecyclerView.Adapter {private LayoutInflater inflater;private ArrayList<HashMap<String, Object>> listItem;private MyItemClickListener myItemClickListener;public MyAdapter(Context context, ArrayList<HashMap<String, Object>> listItem) {inflater = LayoutInflater.from(context);this.listItem = listItem;}//构造函数，传入数据//定义Viewholderclass Viewholder extends RecyclerView.ViewHolder  {private TextView Title, Text;private ImageView ima;public Viewholder(View root) {super(root);Title = (TextView) root.findViewById(R.id.Itemtitle);Text = (TextView) root.findViewById(R.id.Itemtext);ima = (ImageView) root.findViewById(R.id.ItemImage);root.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (myItemClickListener != null)myItemClickListener .onItemClick(v,getPosition());}}//监听到点击就回调MainActivity的onItemClick函数);}public TextView getTitle() {return Title;}public TextView getText() {return Text;}public ImageView getIma() {return ima;}}@Overridepublic RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {return new Viewholder(inflater.inflate(R.layout.list_cell, null));}//在这里把ViewHolder绑定Item的布局@Overridepublic void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {Viewholder vh = (Viewholder) holder;vh.Title.setText((String) listItem.get(position).get("ItemTitle"));vh.Text.setText((String) listItem.get(position).get("ItemText"));vh.ima.setImageResource((Integer) listItem.get(position).get("ItemImage"));}//在这里绑定数据到ViewHolder里面@Overridepublic int getItemCount() {return listItem.size();}//返回Item数目public void setOnItemClickListener(MyItemClickListener listener){myItemClickListener = listener;}//绑定MainActivity传进来的点击监听器
}

实现点击事件:

1. 在Viewholder里面设置了点击事件监听器
2. 通过调用OnItemClickListener的接口方法回调MainActivity里的方法。

MyItemClickListener.java接口：用来实现点击事件

package scut.receiverview;import android.view.View;public interface MyItemClickListener {public void onItemClick(View view,int postion);
}

步骤4：在MainActicity.java里：

• 定义一个HashMap构成的列表，将数据以键值对的方式存放在里面。
• 构造Adapter对象，设置适配器
• 将RecyclerView绑定到Adapter上

MainActicity.java

package scut.receiverview;import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.Toast;import java.util.ArrayList;
import java.util.HashMap;public class MainActivity extends AppCompatActivity implements MyItemClickListener {private RecyclerView Rv;private ArrayList<HashMap<String,Object>> listItem;private MyAdapter myAdapter;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initData();initView();}public void initData(){listItem = new ArrayList<HashMap<String, Object>>();/*在数组中存放数据*/for (int i = 0; i < 100; i++) {HashMap<String, Object> map = new HashMap<String, Object>();map.put("ItemTitle", "第" + i + "行");map.put("ItemText", "这是第" + i + "行");map.put("ItemImage",R.mipmap.ic_launcher);listItem.add(map);}}public void initView(){Rv = (RecyclerView) findViewById(R.id.my_recycler_view);//使用线性布局LinearLayoutManager layoutManager = new LinearLayoutManager(this);Rv.setLayoutManager(layoutManager);Rv.setHasFixedSize(true);Rv.addItemDecoration(new DividerItemDecoration(this, layoutManager.getOrientation()));//用类设置分割线
//Rv.addItemDecoration(new DividerItemDecoration(this, R.drawable.list_divider)); //用已有图片设置分割线//为ListView绑定适配器myAdapter = new MyAdapter(this,listItem);myAdapter.setOnItemClickListener(this);Rv.setAdapter(myAdapter);  }@Overridepublic void onItemClick(View view, int postion) {//点击事件的回调函数System.out.println("点击了第"+postion+"行");Toast.makeText(this, (String)listItem.get(postion).get("ItemText"), Toast.LENGTH_SHORT).show();}}

5. 最后是一个步骤是实现分割线ItemDecoration

如果自己画了分割线就可以直接添上去，不需要写这个类

DividerItemDecoration.java:

package scut.receiverview;import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.TypedValue;
import android.view.View;public class DividerItemDecoration extends RecyclerView.ItemDecoration {/** RecyclerView的布局方向，默认先赋值* 为纵向布局* RecyclerView 布局可横向，也可纵向* 横向和纵向对应的分割想画法不一样* */private int mOrientation = LinearLayoutManager.VERTICAL ;/*** item之间分割线的size，默认为1*/private int mItemSize = 1 ;/*** 绘制item分割线的画笔，和设置其属性* 来绘制个性分割线*/private Paint mPaint ;/*** 构造方法传入布局方向，不可不传* @param context* @param orientation*/public DividerItemDecoration(Context context,int orientation) {this.mOrientation = orientation;if(orientation != LinearLayoutManager.VERTICAL && orientation != LinearLayoutManager.HORIZONTAL){throw new IllegalArgumentException("请传入正确的参数") ;}mItemSize = (int) TypedValue.applyDimension(mItemSize, TypedValue.COMPLEX_UNIT_DIP,context.getResources().getDisplayMetrics());mPaint = new Paint(Paint.ANTI_ALIAS_FLAG) ;mPaint.setColor(Color.BLUE);/*设置填充*/mPaint.setStyle(Paint.Style.FILL);}@Overridepublic void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {if(mOrientation == LinearLayoutManager.VERTICAL){drawVertical(c,parent) ;}else {drawHorizontal(c,parent) ;}}/*** 绘制纵向 item 分割线* @param canvas* @param parent*/private void drawVertical(Canvas canvas,RecyclerView parent){final int left = parent.getPaddingLeft() ;final int right = parent.getMeasuredWidth() - parent.getPaddingRight() ;final int childSize = parent.getChildCount() ;for(int i = 0 ; i < childSize ; i ++){final View child = parent.getChildAt( i ) ;RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams();final int top = child.getBottom() + layoutParams.bottomMargin ;final int bottom = top + mItemSize ;canvas.drawRect(left,top,right,bottom,mPaint);}}/*** 绘制横向 item 分割线* @param canvas* @param parent*/private void drawHorizontal(Canvas canvas,RecyclerView parent){final int top = parent.getPaddingTop() ;final int bottom = parent.getMeasuredHeight() - parent.getPaddingBottom() ;final int childSize = parent.getChildCount() ;for(int i = 0 ; i < childSize ; i ++){final View child = parent.getChildAt( i ) ;RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams();final int left = child.getRight() + layoutParams.rightMargin ;final int right = left + mItemSize ;canvas.drawRect(left,top,right,bottom,mPaint);}}/*** 设置item分割线的size* @param outRect* @param view* @param parent* @param state*/@Overridepublic void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {if(mOrientation == LinearLayoutManager.VERTICAL){outRect.set(0,0,0,mItemSize);}else {outRect.set(0,0,mItemSize,0);}}
}

效果输出图

7. 总结

• 本文全面介绍了RecylerView，包括其定义、特点、具体使用等。
• Carson带你学Android系列文章
  Carson带你学Android：学习方法
  Carson带你学Android：四大组件
  Carson带你学Android：自定义View
  Carson带你学Android：异步-多线程
  Carson带你学Android：性能优化
  Carson带你学Android：动画

欢迎关注Carson_Ho的CSDN博客 与 公众号！

请帮顶 / 评论点赞！因为你的鼓励是我写作的最大动力！