Let’s review the RecyclerView of that year from the beginning

1. What is RecyclerView?

According to the official description given by Google: A flexible view for providing a limited window into a large data set. A flexible view that can display a large data set in a limited window.

So we can understand that an appropriate use scenario for RecyclerView is: due to size limitations, the user's device cannot display all items at once, and the user needs to scroll up and down to see more items. Items that scroll out of the visible area will be recycled and reused when the next item becomes visible.

Caching entries is a very useful method for reducing memory overhead and CPU calculations, because it means we don’t have to create new entries every time, thereby reducing memory overhead and CPU calculations, and it can also effectively reduce screen freezes and ensure smooth sliding.

RecyclerView doesn't care about visuals

But what is the difference with ListView? We have been using ListView for a long time, and it can do the same. From its class name, RecyclerView means that I only manage Recycler View, that is, RecyclerView only manages recycling and reuse of View, and other developers can set it up by themselves. You want another layout? Insert another LayoutManager. Do you want different animations? Insert an ItemAnimator, and so on. It can be seen that its high degree of decoupling gives you full customization freedom (so you can easily implement ListView, GridView, waterfall flow and other effects through this control).

2. Introducing RecyclerView

RecyclerView is part of the Support Library. So just add the following dependency in app/build.gradle and you can use it immediately:

 dependencies { compile 'com.android.support:recyclerview-v7:25.3.1' }

Add to the layout file:

 <android.support.v7.widget.RecyclerView 
 
 android:id= "@+id/recycler_view"   
 
 android:layout_width= "match_parent"   
 
 android:layout_height= "match_parent" />

Then introduce RecyclerView into the page:

 RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);

OK, from now on, let's take it step by step and start to understand it.

3. Use RecyclerView

The following table shows the most important classes used to display data using RecyclerView. These classes are internal classes of RecyclerView. If you want to use RecyclerView, you need to do the following:

We can understand the basic structure of RecyclerView more intuitively from the following figure:

Next, I'll describe what each class or interface contains and how to use it.

3.1 RecyclerView.ViewHolder

The basic usage of ViewHolder is to store View objects. The Android team recommended the use of the "ViewHolder design pattern" a long time ago, but did not require developers to use the ViewHolder pattern in Adapter. Now for this new RecyclerView.Adapter, we must implement and use this pattern.

It's a bit strange that Google waited so long to force the use of the ViewHolder pattern, but it's better late than never. If you don't know about the ViewHolder pattern, check out Android training Hold View Objects in a View Holder. There are also a lot of articles on ListView optimization on the Internet. Interview focus.

One thing is specific to RecyclerView. A ViewHolder subclass can access the root view of the ViewHolder by accessing the public member itemView. So no need to store in the ViewHolder subclass.

The following is the code of the example ViewHolder, which is an inner class of the example Adapter:

 public   static class MyViewHolder extends RecyclerView.ViewHolder{
 TextView tv;
 public MyViewHolder( View itemView) {
 super(itemView);
           tv = (TextView) itemView.findViewById(R.id.tv);
 }
 }

3.2 Adapter

Adapter plays two roles. First, it creates corresponding Item-Layout according to different ViewTypes, and second, it accesses data sets and binds the data to the correct View. This requires us to rewrite the following three methods:

• public VH onCreateViewHolder(ViewGroup parent, int viewType) Creates the Item view and returns the corresponding ViewHolder
• public void onBindViewHolder(VH holder, int position) Binds data to the correct Item view.
• public int getItemCount() Returns the number of items held by the Adapter

The sample code is as follows:

 @Override
 public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        MyViewHolder holder = new MyViewHolder(LayoutInflater. from (context)
                .inflate(R.layout.item_recycler_view,parent, false ));
 return holder;
 }
 @Override
 public void onBindViewHolder(MyViewHolder holder, int position) {
        holder.tv.setText(mDatas.get(position));
 }
 @Override
 public   int getItemCount() {
 return mDatas.size () ;
 }

So, a basic RecyclerView.Adapter looks like this:

 public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.MyViewHolder> {
 private Context context;
    private List<String> mDatas; 
 
 public RecyclerAdapter(Context context, List<String> mDatas) {
        this.context = context;
 this.mDatas = mDatas;
 }
 @Override
 public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        MyViewHolder holder = new MyViewHolder(LayoutInflater. from (context)
                .inflate(R.layout.item_recycler_view, parent, false ));
 return holder;
 }
 @Override
 public void onBindViewHolder(MyViewHolder holder, int position) {
        holder.tv.setText(mDatas.get(position));
 }
 @Override
 public   int getItemCount() {
 return mDatas == null ? 0 : mDatas. size ();
 } 
 
 public   static class MyViewHolder extends RecyclerView.ViewHolder {
 TextView tv; 
 
 public MyViewHolder( View itemView) {
 super(itemView);
            tv = (TextView) itemView.findViewById(R.id.tv);
 }
 }
 }

3.3 RecyclerView.LayoutManager

The LayoutManager's responsibility is to place the Items and decide when to recycle and reuse the Items. It has a default implementation: LinearLayoutManager, which can be used for vertical and horizontal lists.

RecyclerView.LayoutManager is an abstract class. RecyclerView provides us with 3 implementation classes:

1. LinearLayoutManager is the current manager, supporting horizontal and vertical layouts.
2. GridLayoutManager Grid layout manager
3. StaggeredGridLayoutManager waterfall layout manager

3.3.1 LinearlayoutManager

LinearlayoutManager is the default implementation of LayoutManager. You can use this class to create vertical or horizontal lists.

 // Set the RecyclerView layout mode to vertical layout
 LinearLayoutManager layoutManager = new LinearLayoutManager(context);
 layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
 recyclerView.setLayoutManager(layoutManager);

 // Set the RecyclerView layout to horizontal layout
 LinearLayoutManager layoutManager= new LinearLayoutManager(this);
 layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
 recyclerView.setLayoutManager(layoutManager);

Running the program, we see the following results:

We found that there are some differences from ListView. The lack of a dividing line makes the list look unsightly. We will explain how to set a dividing line for RecyclerView in the next section.

Of course, there are some very practical APIs in LinearlayoutManager:

• findFirstVisibleItemPosition() returns the position of the first visible item
• findFirstCompletelyVisibleItemPosition() Returns the position of the first completely visible item
• findLastVisibleItemPosition() returns the position of the last visible item
• findLastCompletelyVisibleItemPosition() Returns the position of the last completely visible item

3.3.2 GridLayoutManager

There are two construction methods:

 /**
 * Creates a vertical GridLayoutManager
 *
 * @param context Current context, will be used to access resources.
 * @param spanCount sets the number of rows, because the default is vertical
 */ public GridLayoutManager(Context context, int spanCount) {
 super(context);
 setSpanCount(spanCount);
 }/**
 * @param context Current context, will be used to access resources.
 * @param spanCount sets the number of rows or columns, depending on the direction
 * @param orientation layout direction HORIZONTAL or VERTICAL.
 * @param reverseLayout Whether to display in reverse When   set   to   true , layouts from   end   to start.
 */ public GridLayoutManager(Context context, int spanCount, int orientation, boolean reverseLayout) {
    super(context, orientation, reverseLayout);
 setSpanCount(spanCount);
 }

We set up the code as follows:

 // Set up a 4-column table layout GridLayoutManager layoutManager = new GridLayoutManager(this,4,GridLayoutManager.VERTICAL, false );
 recyclerView.setLayoutManager(layoutManager);
 // Set up a horizontal 3-row table layout GridLayoutManager layoutManager = new GridLayoutManager(this,3,GridLayoutManager.HORIZONTAL, false );
 recyclerView.setLayoutManager(layoutManager);

3.3.3 StaggeredGridLayoutManager

Let's look at the construction method of StaggeredGridLayoutManager. There is only one method

 /**
 * Creates a StaggeredGridLayoutManager with given parameters.
 *
 * @param spanCount sets the number of rows or columns, depending on the direction, vertical is the number of columns, horizontal is the number of rows
 * @param orientation direction
 */
 public StaggeredGridLayoutManager( int spanCount, int orientation) {}

So we set it up like this:

 // Set the vertical waterfall layout
 StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(4,StaggeredGridLayoutManager.VERTICAL);
 recyclerView.setLayoutManager(layoutManager);

We can see that the effect is no different from GridLayoutManager, so let's make a small modification and you can see its power.

We add margin to the layout of each item:

 <?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= "wrap_content"  
    android:layout_margin= "5dp"  
    android:background= "@color/colorAccent" > 
 
 <TextView
 android:id= "@+id/tv"  
        android:layout_width= "100dp"  
        android:layout_height= "100dp"  
        android:layout_gravity= "center"  
        android:gravity= "center"  
        android:textColor= "#fff"  
 /></LinearLayout>

Then we set a random height for our item in the onBindViewHolder method of the adapter:

 //Paste part of the code, please see the attachment for the rest
    private List< Integer > mHeights;
 public RecyclerAdapter(Context context, List<String> mDatas) {
 this.context = context;
 this.mDatas = mDatas;
        mHeights = new ArrayList <Integer> ();
 for ( int i = 0; i < mDatas. size (); i++) {
            mHeights.add (( int ) (100 + Math.random() * 300));
 }
 } 
 
 @Override
 public void onBindViewHolder(MyViewHolder holder,
 final int position) {
        ViewGroup.LayoutParams lp = holder.tv.getLayoutParams();
        lp.height = mHeights.get(position);
        holder.tv.setLayoutParams(lp);
 }

Run it and we can see the effect. Isn't it amazing?

3.4 RecyclerView.ItemDecoration

By setting

 recyclerView.addItemDecoration(new DividerDecoration(Context context, int orientation));

To change the offset between items or decorate the items.

For example, if you add the following code after setting LinearlayoutManager above, the effect of the list will change:

 // Set a dividing line for the vertical display RecyclerView
 recyclerView.addItemDecoration(new DividerItemDecoration(activity,DividerItemDecoration.VERTICAL));
 // Set a dividing line for the horizontal display RecyclerView
 recyclerView.addItemDecoration(new DividerItemDecoration(activity,DividerItemDecoration.HORIZONTAL));

Of course, you can also set multiple ItemDecorations for RecyclerView. When displaying the list, it will traverse all ItemDecorations and call the drawing methods in them to decorate the Item.

RecyclerView.ItemDecoration is an abstract class that can be used to implement offsets or decoration effects between items by overriding the following three methods:

• public void onDraw(Canvas c, RecyclerView parent) The decoration drawing is called before the Item item is drawn, so it may be obscured by the content of the Item
• public void onDrawOver(Canvas c, RecyclerView parent) The decoration is drawn after the Item item is drawn, so the decoration will float above the Item
• public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) Similar to padding or margin, LayoutManager calls this method during the measurement phase to calculate the correct size of each Item and set the offset.

Of course, if we use GridLayoutManager, the previous DividerItemDecoration is not applicable to the dividing line, mainly because when it is drawn, such as the horizontal line, the value for each child is:

 final int   left = parent.getPaddingLeft();
 final int   right = parent.getWidth() - parent.getPaddingRight();

Because each Item has one row, this is fine. However, when using GridLayoutManager, a row has multiple childItems, so they are drawn multiple times. In addition, when using GridLayoutManager, if the Item is in the last column (there is no separator line on the right) or the last row (there is no separator line at the bottom), the item will be drawn multiple times.

According to the above method, we can customize a DividerGridItemDecoration. Because the code is too long, we provide it in the attachment. We set DividerGridItemDecoration to GridLayoutManager, and the running effect is as follows:

3.5 RecyclerView.ItemAnimator

ItemAnimator can help Item realize independent animation.

ItemAnimator is triggered by the following three events:

• A piece of data is inserted into the data collection
• Remove a piece of data from a collection
• Change a data item in a data set

Fortunately, a DefaultItemAnimator is implemented by default in Android. We can add animation effects to Item through the following code:

 recyclerView.setItemAnimator(new DefaultItemAnimator());

In previous versions, when the data set changed, we refreshed the list by calling .notifyDataSetChanged(). Because this would trigger a redraw of the list, there would be no animation effect. Therefore, we needed to call some special methods prefixed with notifyItem*(), such as:

• public final void notifyItemInserted(int position) Inserts an item to the specified position
• public final void notifyItemRemoved(int position) Remove the item at the specified position
• public final void notifyItemChanged(int position) Updates the item at the specified position

Next, we use DefaultItemAnimator to show the animation effect. Modify the code as follows:

Add two buttons in Activity to dynamically insert and remove items.

 btnAdd.setOnClickListener(new View .OnClickListener() {
 @Override
 public void onClick( View v) {
                adapter.addData(1);
 }
 }); 
 
 btnRemove.setOnClickListener(new View .OnClickListener() {
 @Override
 public void onClick( View v) {
                adapter.removeData(2);
 }
 });

Add two methods to the Adapter:

 public void addData( int position) {
        mDatas.add (position, "Insert" );
        mHeights.add ( ( int ) (100 + Math.random() * 300));
        notifyItemInserted(position);
 } public void removeData( int position) {
        mDatas.remove(position);
        notifyItemRemoved(position);
 }

The results are as follows:

3.6 Listeners

Unfortunately, RecyclerView does not provide the following two Item click listener events like ListView does:

• public void setOnItemClickListener(@Nullable OnItemClickListener listener) Item click event listener
• public void setOnItemLongClickListener(OnItemLongClickListener listener) Item long click event listener

But this can't stop us, I can define two such methods.

 public interface OnItemClickLitener {
 void onItemClick( View   view , int position);
    void onItemLongClick( View   view , int position);
 }
    private OnItemClickLitener litener;
 public void setLitener(OnItemClickLitener litener) {
        this.literer = litener;
 }

In the onBindViewHolder method, set a listener for the control that needs to respond to the click event:

 // If a callback is set, respond to the click event holder.itemView.setOnClickListener(new View .OnClickListener() {
 @Override
 public void onClick( View v) {
        if (literer != null ) {
            litener.onItemClick(v, position);
 }
 }
 }); 
 
 holder.itemView.setOnLongClickListener(new View .OnLongClickListener() {
 @Override
 public boolean onLongClick( View v) {
        if (literer != null ) {
            litener.onItemLongClick(v, position);
 } return   false ;
 }
 });

Set this method in Activity:

 adapter.setLitener(new RecyclerAdapter.OnItemClickLitener() {
 @Override
 public void onItemClick( View   view , int position) {
 Toast.makeText(activity, "The" +position+ "item was clicked" , Toast.LENGTH_SHORT).show();
 } 
 
 @Override
 public void onItemLongClick( View   view , int position) {
 Toast.makeText(activity, "The" +position+ "item was long pressed" , Toast.LENGTH_SHORT).show();
 }
 });

The effect is as shown below: