android - PlayStore新视差效果怎么做

Question

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

Answer 1

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

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

例子：

<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>

Answer 2

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

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

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

Answer 3

试试ObservableScrollView库

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

来自 Play 商店的演示应用程序

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

示例演示，

Answer 4

有一个名为的库FadingActionBar可以完全满足您的要求。您可以在GitHub 上找到库（单击） ，在Play 商店中找到 Demo-Application（单击）。

用法将是这样的：

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);

Answer 5

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

以下是它们的链接：

• 视差卷轴
• 平行线

Answer 6

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

首先在图像视图布局中。设置父布局小于图像视图，以便在设置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>

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

*** 我正在使用 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
                                }
                            }
                        }
                    }