RecyclerView has a high degree of freedom, it can be said that only think not to do, is really the more use the more like. This time with super simple method, RecyclerView with the effect of folding.

The effect is this.

To summarize the characteristics of this list, there are three points:

  1. Overlapping effect;
  2. The administrative levels;
  3. The differential of the first term.

So let’s do it one by one.

So let’s create a ParallaxRecyclerView, inherit RecyclerView, and use the LinearLayoutManager as the layout manager.

Overlapping effect

It’s just that each term is going to overlap with the one in front of it. We know that RecyclerView can create the interval effect by setting ItemDecoration. Have you ever thought about setting the interval to negative? Such as:

addItemDecoration(new ItemDecoration() {
            @Override
            public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state) {
                super.getItemOffsets(outRect, view, parent, state);
                outRect.bottom = -dp2px(context, 10); }});Copy the code

Yeah, that gives us our overlap.

Administrative levels feeling

In Material Design, there is the concept of the Z-axis. We can set controls perpendicular to the screen height, so that controls that are not at the same height can look layered. And of course, we’re going to have to use Material Design controls to have this property, so I’m going to use CardView.

We add a sliding listener to ParallaxRecyclerView and set it in the onScrolled method:

LinearLayoutManager layoutManager = (LinearLayoutManager) recyclerView.getLayoutManager();
int firstPosition = layoutManager.findFirstVisibleItemPosition();
int lastPosition = layoutManager.findLastVisibleItemPosition();
int visibleCount = lastPosition - firstPosition;
// Reset the height of the control
int elevation = 1;
for (int i = firstPosition - 1; i <= (firstPosition + visibleCount) + 1; i++) {
    View view = layoutManager.findViewByPosition(i);
    if(view ! =null) {
        if (view instanceof CardView) {
            ((CardView) view).setCardElevation(dp2px(context, elevation));
            elevation += 5; }}}Copy the code

So the set card creation method is just going to set the height of the CardView, so we’re going to make each item 5dp higher than its last item.

The differential of the first term

Finally, we want to add a differential effect to the first term, which can also be handled in the onScrolled method:

View firstView = layoutManager.findViewByPosition(firstPosition);
float firstViewTop = firstView.getTop();
firstView.setTranslationY(-firstViewTop / 2.0 f);
Copy the code

That’s half the speed of the first term. But this also leads to the problem of changing the position of the control, which is incorrectly positioned when the control is reused. So when we set the height, we can incidentally restore the position of the control:

 float translationY = view.getTranslationY();
if(i > firstPosition && translationY ! =0) {
    view.setTranslationY(0);
}
Copy the code

This completed a simple folding effect of RecyclerView, no problem.

The source address