Basic tutorial of recyclerview control in android app development

summary

Recyclerview has been around for some time. I'm sure you're familiar with it. You can use it by importing support-v7. According to the official introduction, this control is used to display a large number of data sets in a limited window. In fact, we are not familiar with such controls, such as listview and GridView.

So why do you need controls like recyclerview when you have listview and GridView? On the whole, recyclerview architecture provides a plug-in experience, high decoupling and exceptional flexibility. It achieves eye popping effects by setting different layoutmanagers, itemdecoration and itemanimator it provides.

Basic use

In view of our special familiarity with the use of listview, compare the usage code of recyclerview:

OK, compared with the listview code, the listview may only need to set an adapter to work normally. Recyclerview basically needs the above series of steps, so why do you add so many steps?

Then you must explain the name of recyclerview. From its class name, the meaning of recyclerview is that I only care about recycler view, that is, recyclerview only cares about recycling and reuse views, and you can set others yourself. It can be seen that it is highly decoupled, giving you full customization freedom (so you can easily realize listview, girdview, waterfall flow and other effects through this control).

Just like ListView~

Activity

Layout file for activity

Layout file for item

It seems that the usage is basically the same as that of listview ~ ~ see the effect picture below:

It looks ugly. There should be a dividing line between items. When you look for it, you will find that recyclerview does not support attributes such as divider. So what to do? You can set the margin for the item layout. Of course, this method is not elegant enough. Our article began to say that we can customize it freely. Of course, our split line can also be customized.

ItemDecoration

We can add split lines by this method:

The parameter of this method is recyclerview.itemdecoration, which is an abstract class. At present, the official does not provide a default implementation class (I think it is best to provide several). Source code of this class:

When we call the mrecyclerview. Additemdecoration() method to add decoration, the recyclerview will draw the decorator when drawing, that is, call the OnDraw and ondrawover methods of this class,

OnDraw method precedes drawchildren ~ ondrawover. After drawchildren, we usually choose to copy one of them. Getitemoffsets can set a certain offset for each item through outrect. Set(), which is mainly used to draw decorator. Next, let's look at an implementation class of recyclerview.itemdecoration, which well implements the addition of dividing lines to recyclerview (when using layoutmanager as linearlayoutmanager). This class is referenced from: divideritemdecoration

package com.zhy.sample.demo_ recyclerview;

The implementation class can see that android.r.attr.listdivider in the system topic is read as the dividing line between items, and supports horizontal and vertical. If you don't know how it does it, read the system properties for yourself, please refer to another blog post: Android in-depth understanding of custom properties in Android

After getting listdivider, the value of this property is drawable. In getitemoffsets, outrect sets the drawing range. OnDraw implements real rendering.

We added a sentence to the original code:

OK, now run again and you can see the effect of the split line.

The split line is the system default. You can find the usage of this attribute in theme.xml. So what are the benefits of using the system's listdivider? It is convenient for us to change this attribute at will. We can directly declare this attribute in:

Then write a drawable by yourself. Let's change a separator:

Now it looks like:

Of course, you can draw at will according to your own needs. Anyway, you can draw and play at will~~

OK, when you see this, you may think that this thing is really NIMA troublesome and completely incomparable to the beloved listview. So keep looking.

LayoutManager

Well, the above implements a demo like listview by using its default linearlayoutmanager.

Recyclerview.layoutmanager is an abstract class. Fortunately, the system provides three implementation classes:

Above, we have preliminarily experienced the linearlayoutmanager. Next, let's look at the gridlayoutmanager.

Gridlayoutmanager we try to implement things like GridView in seconds:

Just modify the layoutmanager, which is nice.

Of course, after changing to gridlayoutmanager, the previous divideritemdecoration is not applicable to split lines, mainly because when drawing, such as horizontal lines, the value for each child is:

Because there is one line for each item, this is no problem. In the case of gridlayoutmanager, there are multiple childitems in a row, which can be drawn many times. In the case of gridlayoutmanager, if the item is the last column (there is no separation line on the right) or the last row (there is no division line at the bottom).

For the above, we have written dividergriditemdecoration.

Mainly in the getitemoffsets method, judge that if it is the last line, there is no need to draw the bottom; If it is the last column, you do not need to draw the right. The whole judgment also takes into account the horizontal and vertical of the staggeredgridlayoutmanager, so it is a little complicated. The most important thing is to understand, how to draw what is not important. Generally, if you just want to have a gap, it is convenient to set the item margin.

The final effect is:

OK, seeing this, you may still think recyclerview is not powerful enough?

However, if we have such a requirement that listview is displayed on the vertical screen and GridView with two columns is displayed on the horizontal screen, recyclerview can easily handle it, and it still needs some effort to implement it by using listview~~~

Of course, it's just fur. Let's convince you.

The cascaded layout of staggeredgridlayoutmanager can actually realize the same functions as gridlayoutmanager, just according to the following code:

The two methods show the same effect, but note that the second parameter of the staggeredgridlayoutmanager structure passes an orientation. If the passed in is staggeredgridlayoutmanager.vertical, it represents the number of columns; Then, if the passed in is staggeredgridlayoutmanager.horizontal, it represents the number of rows. For example, if this example is changed to:

Then the effect is:

As you can see, it is fixed to 4 lines and becomes sliding left and right. It should be noted that if it is horizontal, the width of the item needs to be set. After all, the horizontal width is not constrained, so the control can scroll horizontally. If you need a GridView that scrolls horizontally, congratulations.

OK, next, I'm going to see a big move. If you are allowed to realize a waterfall flow, at least it can not be realized at will? However, if you use recyclerview, it takes minutes. So how? In fact, you don't have to do anything. As long as you use the staggeredgridlayoutmanager, we have implemented it, but we use a fixed height for the item layout above. Next, we only set a random height for our item in the onbindviewholder method of the adapter (the code will not be pasted, and the source code download address will be given at the end). See the effect diagram:

Is it great? There is basically no difference between the effects of listview, GridView and waterfall flow through recyclerview, and it can be achieved only by setting different layoutmanagers.

What's more nice is that the animation added and deleted by item is also configurable. Next, take a look at itemanimator.

ItemAnimator

Itemanimator is also an abstract class. Fortunately, the system provides us with a default implementation class. We expect the system to add more default implementations.

With the default implementation, when items are added and removed, the animation effect is simple:

The system provides us with a default implementation. We add the above line of code to our waterfall flow. The effect is:

What if it's gridlayoutmanager? The animation effect is:

Note that the dataset is updated not with adapter. Notifydatasetchanged(), but with notifyiteminserted (position) and notifyitemremoved (position). Otherwise, there is no animation effect. The above two methods are added to the adapter:

Click MenuItem in activity to trigger:

Well, I don't like this control in general~~~

Of course, only one animation is provided, so we can definitely customize the animation effects of various nice. Fortunately, there are many similar projects on GitHub. Here we directly quote: recyclerviewitemanimators, which you can download and view yourself. It provides slideinoutleftitemanimator, slideinoutrightitemanimator, slideinouttopitemanimator, slideinoutbottomitemanimator and other animation effects.

Click and LongClick

However, a very depressing thing is that the system does not provide clicklistener and longclicklistener. However, we can also add it ourselves, but there will be more code. There are many ways to implement it. You can monitor and judge gestures through mrecyclerview.addonitemtouchlistener. Of course, you can also provide callbacks through the adapter. Here we choose the latter and the former. You are interested in implementing them yourself.

Then the code is relatively simple:

An interface is defined in the adapter. Then, set the corresponding listening for the holder.itemview in the onbindviewholder. Finally, call back the listening we set.

Finally, don't forget to add a drawable to the item:

Set listening in activity:

Test effect:

OK, here we have basically introduced the common usage of recylerview, including:

You can see that recyclerview can realize:

Through the whole experience, I feel that this plug-in design is great. If the system can provide some common separators, it will be better to add more animation effects.

Different effects can be produced by simply changing the layoutmanager. Then we can dynamically set the layoutmanager according to the width of the mobile phone screen. The screen width is general and displayed as listview; A slightly larger width displays two columns of GridView or waterfall flow (or changes when switching between horizontal and vertical screens, which is a little interesting ~); The number of columns displayed is proportional to the width. Even some special screens, let it slide horizontally ~ ~ and then select a nice animation effect. I believe this plug-in coding experience will make you quickly fall in love with recyclerview.