Android 新的PlayStore视差效果怎么做

How to do the new PlayStore parallax effect

提问by Darko Petkovski

Does anyone know how can I achieve the new parallax scrolling effect - you can see the effect when you open an app on the PlayStore and try to scroll down, the content goes over the top image. How can I achieve that?

有谁知道我怎样才能实现新的视差滚动效果 - 当您在 PlayStore 上打开应用程序并尝试向下滚动时，您可以看到效果，内容超过顶部图像。我怎样才能做到这一点？

回答by Paresh Mayani

Google has recently announced Design support libraryand with this it has support for implementing Collapsing Toolbar.

谷歌最近宣布了设计支持库，它支持实现折叠工具栏。

In addition to pinning a view, you can use app:layout_collapseMode="parallax"(and optionally app:layout_collapseParallaxMultiplier="0.7"to set the parallax multiplier) to implement parallax scrolling (say of a sibling ImageView within the CollapsingToolbarLayout)

除了固定视图之外，您还可以使用 app:layout_collapseMode="parallax"（并且可以选择 app:layout_collapseParallaxMultiplier="0.7"设置视差乘数）来实现视差滚动（比如 中的同级 ImageView CollapsingToolbarLayout）

Example:

例子：

<android.support.design.widget.AppBarLayout
        android:layout_height="192dp"
        android:layout_width="match_parent">
    <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
        <android.support.v7.widget.Toolbar
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

回答by Yuraj

You could try this (FadingActionBar library): https://github.com/ManuelPeinado/FadingActionBar

你可以试试这个（FadingActionBar 库）：https: //github.com/ManuelPeinado/FadingActionBar

Try an example of this library on android: https://play.google.com/store/apps/details?id=com.manuelpeinado.fadingactionbar.demo

在 android 上试试这个库的例子：https: //play.google.com/store/apps/details?id =com.manuelpeinado.fadingactionbar.demo

EDIT:Rather than third party library use this AppBarLayout and CollapsingToolbarLayout http://android-developers.blogspot.in/2015/05/android-design-support-library.html

编辑：而不是第三方库使用这个 AppBarLayout 和 CollapsingToolbarLayout http://android-developers.blogspot.in/2015/05/android-design-support-library.html

回答by Ranjith Kumar

try the ObservableScrollViewlibrary

尝试ObservableScrollView库

https://github.com/ksoichiro/Android-ObservableScrollView

https://github.com/ksoichiro/Android-ObservableScrollView

demo application from play store

Play商店的演示应用程序

https://play.google.com/store/apps/details?id=com.github.ksoichiro.android.observablescrollview.samples2

https://play.google.com/store/apps/details?id=com.github.ksoichiro.android.observablescrollview.samples2

sample demo,

示例演示，

回答by reVerse

There's a library called FadingActionBarthat does exactly what you're asking for. You can find the library on GitHub (click)and a Demo-Application in the Play Store (click).

有一个名为的库FadingActionBar可以完全满足您的要求。您可以在GitHub 上找到该库（单击），并在Play 商店（单击）中找到一个演示应用程序。

Usage would be something like this:

用法是这样的：

FadingActionBarHelper helper = new FadingActionBarHelper()
    // Set the ActionBar drawable - basically the color
    .actionBarBackground(R.drawable.ab_background)
    // Set the Header - usually an image
    .headerLayout(R.layout.header)
    // Set the main layout
    .contentLayout(R.layout.activity_scrollview);
setContentView(helper.createView(this));
helper.initActionBar(this);

回答by Darko Petkovski

Actually few minutes after posting this question I bumped on two of libraries that do the effect I'm looking for and even more.

实际上，在发布这个问题几分钟后，我碰到了两个库，它们可以实现我正在寻找的效果，甚至更多。

Here are links to them:

以下是它们的链接：

• Parallax Scrolls
• Paralloid

• 视差卷轴
• 平行线

回答by Kit

You may custom the parallax animation by tracking the Recycler View Scrolling

您可以通过跟踪 Recycler View Scrolling 来自定义视差动画

Firstly in the image view layout. Set the parent layout is smaller than image view so that prevent the image outside the bound when set translationY

首先是图像视图布局。设置父布局小于图像视图，以便在设置translationY时防止图像超出边界

<android.support.percent.PercentRelativeLayout
        android:id="@+id/index_level6_image_section"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:clipChildren="false">

        <ImageView
            android:id="@+id/index_level6_parallaxImage"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            android:layout_centerInParent="true"
            android:background="@color/timberwolf"
            android:layout_marginTop="-20"
            android:layout_marginBottom="-20"
            android:scaleType="centerCrop"
            app:imageUrl="@{level6CellViewModel.level6ImageUrl}" />

    </android.support.percent.PercentRelativeLayout>

After that, track the recycler view scrolling effect and transitionY the image view.

之后，跟踪回收器视图滚动效果并过渡图像视图。

*** I am using rxbinding and kotlin for implementation. You may use traditional listening method and java approach with the same idea.

*** 我使用 rxbinding 和 kotlin 来实现。您可以使用具有相同想法的传统侦听方法和 java 方法。

RxRecyclerView.scrollEvents(recyclerView)
                    .subscribe { event ->
                        // get the visible cell items of the recycler view
                        val firstVisible = layoutManager.findFirstVisibleItemPosition()
                        val visibleCount = Math.abs(firstVisible - layoutManager.findLastVisibleItemPosition())

                        /** loop the visible cell items from the recycler view */
                        for (i in firstVisible..firstVisible + visibleCount) {
                            event.view().layoutManager?.findViewByPosition(i)?.let { cellItem ->
                                /** only for index cell level 6 parallax image */
                                cellItem.findViewById(R.id.index_level6_parallaxImage)?.let { imageView ->
                                    /** setting the parallax effect */
                                    val translationY = (cellItem.top - cellItem.height) / level6ParallaxRate
                                    imageView.translationY = -translationY
                                }
                            }
                        }
                    }