Implementation code of Android recyclerview to create suspension effect

This article introduces the suspension effect of Android recyclerview and shares it with you as follows:

Let's see the effect first

This is a list of cities. Each city has its own province. When sliding, the corresponding province needs to be suspended at the top. The province on the top of the suspension needs to change its position appropriately according to the sliding of the list to achieve the "top up" effect.

Implementation idea:

ItemDecoration

Since the suspension effect is realized by recyclerview.itemdecoration, it is necessary to understand it.

Itemdecoration literally means the decoration of an item. yes! It's decoration! Not just draw a dividing line.

In fact, itemdecoration is very powerful, and we usually only use it to achieve the effect of split line (at least I am). Therefore, many students may think that itemdecoration is used to draw split lines. In fact, the function of itemdecoration is far more than drawing split lines.

First look at the source code of recyclerview.itemdecoration (part):

There are three common methods:

The background of recyclerview, the content drawn by OnDraw, the content drawn by item and ondrawover. The hierarchical relationship is as follows:

Hierarchical relationship

Draw split lines

Let's take a look at the general division line drawing.

Define split line height

Reserve space through getitemoffsets

Then draw in OnDraw

Get the number of items in the current recyclerview and traverse each item. Draw a rectangle with a height of mheight at the corresponding position to achieve the effect of dividing lines.

(see the link at the bottom for details)

Create suspension

This is a list of cities. Grouped by provinces, only one province will be displayed for the same city. When you scroll through the list of cities, the provinces are suspended at the top. The effects are as follows:

realization

Because you need a levitation effect, you need to draw groups in ondrawover.

Define an interface and obtain the current provincial name through the interface method getgroupname according to position (implemented by activity)

Create stickydecoration inheriting recyclerview.itemdecoration

Defines the isfirstinggroup method. Judge whether the current is a new province according to the previous province

Through position, compare the name of the previous province to determine whether the current province is the first

Override the getitemoffsets method to reserve space for the floating bar

Only the first item or new province can reserve space for the hover bar

Override ondrawover method (emphasis)

Save the current group name and the previous group name through the variables pregroupid and currentgroupid. When the current item and the previous item are in the same group, the drawing of the item is skipped.

Where code:

The position where the group is drawn is determined according to the position of the current item. Top will take the maximum value in mgroupheight and view. Gettop(), that is, top will not be less than mgroupheight, so as to achieve the ceiling effect.

Where code:

When the distance between the top of the next group (the bottom viewbottom of the current item can be approximately regarded as the top of the next item) and the top of the recyclerview is less than top, the current group position is offset. When the next group slides up, the current group moves up; When the previous group falls, the current group moves down. Finally, calculate the baseline and draw the background and text.

So far, a list with levitation has been implemented.

(see the link at the bottom for detailed code)

Advanced

When we use itemdecoration to realize the suspension of text, can we do something ~ ~ I have a bold idea how to do only the suspension of text! I wish I could have another icon? How many more textviews? How about a custom layout? Let's have a custom layout.

realization

The implementation principle is the same as above. Since the layout needs to be customized, a method to obtain the view needs to be added to the interface.

Define powergrouplistener

Compared with before, there are multiple getgroupview methods to obtain the view.

Draw in ondrawover

A little modification is made on the original basis. The group view to be drawn is obtained through the getgroupview method of the interface, and the resulting view is drawn to the specified location.

effect:

(see the link at the bottom for detailed code)

Source code link

It has been encapsulated into a library. Welcome to mention issues

See GitHub for detailed usage level source code

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.