如何创建像谷歌游戏商店一样的水平动画回收视图？ 不常见的水平回收器view

Question

When a user will scroll Recyclerview from right to left at the same time the first view will disappear with fade-out animation according to scrolling and background view also be parallax like google play store app.

It will animated recylerview, "not the normal horizontal recyclerview". You can see this in google play, not every time, it appears occasionally

Answer 1

According to what you have written, you basically wanted a horizontal recycler view which when scrolled has a fade animation to the header.

I had encountered the same problem and I solved it the following was. I used kotlin, during my development.

Firstly you need to add a scroll listener to your recycler view, i have made an extension function for scroll

inline fun RecyclerView.scroll(
        crossinline onScrolled: (RecyclerView, Int, Int) -> Unit = { it, dx, dy -> },
        crossinline onScrolledChanged: (RecyclerView, Int) -> Unit = { it, newState -> }
) {
    addOnScrollListener(object : RecyclerView.OnScrollListener() {
        override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
            super.onScrolled(recyclerView, dx, dy)
            onScrolled(recyclerView, dx, dy)
        }

        override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
            super.onScrollStateChanged(recyclerView, newState)
            onScrolledChanged(recyclerView, newState)
        }
    })
}

Now create a divider item decorator for adding the padding to the first item

class DividerDecorator(val paddingStart: Float) : RecyclerView.ItemDecoration() {

    override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
        super.getItemOffsets(outRect, view, parent, state)
        val position = parent.getChildAdapterPosition(view)
        if (position == 0 || position == 1) {
            outRect.left = paddingStart.toInt()
        }
        val lp = view.layoutParams as StaggeredGridLayoutManager.LayoutParams
        val spanIndex = lp.spanIndex
        if (position >= 0) {
                if(spanIndex==0) {
                    outRect.top = 13.px
                    outRect.bottom = 5.px
                }else{
                    outRect.top = 5.px
                    outRect.bottom = 13.px
                }



        }

    }
}

Now in your XML place add the image that you want as background and place the recycler view on top of that image.

Once you have done that you just need to add scroll extension to your recyclerview

 private var overallScroll = 0;

  recycler.scroll(onScrolled = { _, dx, _ ->
                    overallScroll += dx
                    backgroundView.animate()
                            .alpha(overallScroll.remap(padding))
                            .setInterpolator(LinearInterpolator())
                            .setDuration(0)
                            .start()
                })

remap function i have maded to calculate the proper alpha corresponding to scroll displacement.

fun Int.remap(offset:Float):Float{
    return 1-(this/offset)
}

and yes don't forget to make the recycler view horizontal.

Answer 2

You can use RecyclerView with following layout manager

LinearLayoutManager layoutManager = new LinearLayoutManager(MainActivity.this, LinearLayoutManager.HORIZONTAL, false);
recyclerView.setLayoutManager(layoutManager);