Android 如何实现新的PlayStore视差效果

Android 如何实现新的PlayStore视差效果,android,android-layout,android-animation,material-design,android-scroll,Android,Android Layout,Android Animation,Material Design,Android Scroll,有人知道如何实现新的视差滚动效果吗?当你在PlayStore上打开一个应用程序并尝试向下滚动时,你可以看到这种效果,内容会覆盖在顶部图像上。我怎样才能做到这一点 您可以尝试以下方法(FadingActionBar库): 请在android上尝试此库的一个示例: 编辑:而不是第三方库使用此AppBarLayout和CollingToolBarLayout有一个名为FadingActionBar的库,它完全满足您的要求。您可以在上找到库,并在中找到演示应用程序 用法如下: FadingAction

有人知道如何实现新的视差滚动效果吗?当你在PlayStore上打开一个应用程序并尝试向下滚动时,你可以看到这种效果,内容会覆盖在顶部图像上。我怎样才能做到这一点

您可以尝试以下方法(FadingActionBar库):

请在android上尝试此库的一个示例:


编辑:而不是第三方库使用此AppBarLayout和CollingToolBarLayout

有一个名为
FadingActionBar
的库,它完全满足您的要求。您可以在上找到库,并在中找到演示应用程序

用法如下:

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

事实上,在发布这个问题几分钟后,我偶然发现了两个库,它们达到了我想要的效果,甚至更多

以下是它们的链接:


尝试ObservableScrollView

来自play store的演示应用程序

示例演示


谷歌最近宣布,它支持实现折叠工具栏

除了固定视图,还可以使用
app:layout\u collapseMode=“parallax”
(可选)
app:layout\u collapseParallaxMultiplier=“0.7”
设置视差 乘数)来实现视差滚动(比如兄弟姐妹
折叠工具栏布局中的图像视图

例如:

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

您可以通过跟踪回收器视图滚动来自定义视差动画

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

只有100行左右的代码,请参阅:和示例实现:谷歌已经宣布为什么要建议第三方库@帕雷什马亚尼:谢谢你提供的信息。但为什么只为我投票呢?。所有答案都提供给第三方库,包括已接受的答案。材料设计库不支持投掷姿势。scrollview的糟糕体验!我要试试这个图书馆.没必要.我们只使用官方的方法。。如果比官方更好,我们可以选择第三方。对于ex Networking library,改造速度比官方图书馆快。那么我们的选择是什么?当然是一个升级投票,因为向gradle依赖项添加官方设计支持库的成本肯定等于添加第三方gradle依赖项的成本,有时@WiseMann提到了更大的支持带来的额外好处,这是首选的方式。不需要第三方@帕雷什·马亚尼我也有类似的问题,你能看一下吗,谢谢
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
                                }
                            }
                        }
                    }