CollapsingToolbarLayout 图像在像 Play 商店应用一样滚动到顶部时保持不变

Question

我有一个带有图像和文本的 CollapsingToolbarLayout。下面是布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/Root"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        custom:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/appbar_image_height"
        android:fitsSystemWindows="true"
        android:background="@color/red"
        custom:layout_scrollFlags="scroll|exitUntilCollapsed">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            style="@style/HmatchWmatch"
            custom:contentScrim="@color/red"
            custom:statusBarScrim="@color/primary_dark"
            custom:expandedTitleTextAppearance="@android:color/transparent"
            android:fitsSystemWindows="true"
            custom:layout_scrollFlags="scroll|exitUntilCollapsed">

            <RelativeLayout
                style="@style/HmatchWmatch"
                android:fitsSystemWindows="true"
                custom:layout_collapseMode="parallax"
                custom:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:id="@+id/toolbar_iv"
                    style="@style/HmatchWmatch"
                    android:scaleType="centerCrop"
                    tools:ignore="ContentDescription"/>

                <TextView
                    android:id="@+id/toolbar_title"
                    style="@style/TextLarge.Pad"
                    android:layout_width="match_parent"
                    android:layout_alignParentBottom="true"
                    android:paddingBottom="@dimen/vpad"
                    android:background="@drawable/appbar_title_bg"
                    android:textColor="@android:color/white"
                    android:maxLines="2"/>

                <TextView
                    android:id="@+id/toolbar_dm"
                    style="@style/TextSmall.Pad"
                    android:layout_width="match_parent"
                    android:layout_above="@id/toolbar_title"
                    android:paddingTop="@dimen/vpad"
                    android:background="@drawable/appbar_dm_bg"
                    android:textColor="@android:color/white"
                    android:maxLines="2"/>
            </RelativeLayout>

            <include
                android:id="@+id/toolbar"
                layout="@layout/toolbar"/>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <fragment
        android:id="@+id/fragment"
        android:name="com.Fragment"
        style="@style/HmatchWmatch"
        custom:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <Button
        android:id="@+id/sign_button"
        style="@style/TextMedium"
        android:layout_width="match_parent"
        android:text="@string/sign_button_text"
        android:textColor="@android:color/white"/>

    </android.support.design.widget.CoordinatorLayout>

下面是工具栏的布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/change_red"
    custom:layout_scrollFlags="scroll|enterAlways"
    custom:layout_collapseMode="pin"
    tools:ignore="Overdraw"/>

当向上滚动时，图像消失并变成固定在顶部的工具栏。我想要实现的就像在 Play Store 应用程序中一样，在特定应用程序中向上滚动时，向上滚动时图像会消失，而当再次向下滚动时，工具栏会出现在屏幕中。在我的情况下，我怎样才能做到这一点？

我的问题是我希望 Appbar 在向上滚动时完全滚出屏幕，当再次向下滚动时，工具栏应该会出现。

Answer 1

我尝试了各种方法，但我认为没有任何方法可以帮助实现 Play 商店动画和设计的确切方式（使用设计库）！在以下所有比赛中几乎相似。这与@MicheleLacorte 在评论中建议的几乎相似！

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="idoandroid.scroll.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

            <ImageView
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:fitsSystemWindows="true"
               android:scaleType="centerCrop"
               android:src="@drawable/background"
               app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
               android:id="@+id/toolbar"
               android:layout_width="match_parent"
               android:layout_height="?android:attr/actionBarSize"
               app:layout_collapseMode="pin"
               app:popupTheme="@style/AppTheme.PopupOverlay"/>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_scrolling"/>

</android.support.design.widget.CoordinatorLayout>

如果您想要完全相同的实现，那么您必须查看一些第三方库！如果您有兴趣，只需为一些第三方库提供link！