android - NestedScrollview 重叠 CollapsingToolbarLayout 像 gmusic app

Question

我想复制 google play music android 应用程序的行为。在该应用程序中，当您使用“我的音乐”专辑选项卡时，专辑列表会在操作栏(橙色部分)上方开始，因为它是“扩展的”。当您向上滚动专辑列表时，橙色部分向上滚动但比列表慢。当您向下滚动列表时，“橙色 block ”也会向下滚动。此行为与正在滚动的工具栏和选项卡无关。

我正在尝试使用新的 Material 设计库重现此类行为。使用来自 Cheesquare 的详细 Activity xml 作为起点:

<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/detail_backdrop_height"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

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

        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

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

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

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

        <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">
        <....>
       </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

我尝试使用带有彩色背景的背景“imageview”，并尝试将它移动到 nestedview 旁边。如果我将 imageview 放在具有视差效果的 CollapsingToolbarLayout 中，问题是我无法使其高度更大以位于 nestedscrollview 下方。如果我将 imageview 放在 collapsingToolbarLayout 之外但在 NestedScrollView 之内，我无法更改 viewScrolling 的“速度”。如果我将 imageview 放在 NestedScrollview 之外，即使工具栏被固定，它也会绘制在工具栏上。

在使用 Material Design 库之前，我使用 View 和 ScrollView 的回调来上下移动它，但我想使用新库，因为它非常干净，删除了大量样板代码。

有什么想法吗？

Answer 1

事实上，用 AppBarLayout 覆盖 ScrollView 不需要任何这些:您可以使用 NestedScrollView 上的 app:behavior_overlayTop 属性来设置重叠数量:

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    app:behavior_overlapTop="64dp">

请注意，app:behavior_overlapTop 仅适用于具有 app:layout_behavior="@string/appbar_scrolling_view_behavior" 的 View ，因为它是使用属性 (不是 View 或父 View 组，因为属性通常适用于)，因此 behavior_ 前缀。

或通过 setOverlayTop() 以编程方式设置它:

NestedScrollView scrollView = ...
CoordinatorLayout.LayoutParams params = 
    (CoordinatorLayout.LayoutParams) scrollView.getLayoutParams();
AppBarLayout.ScrollingViewBehavior behavior =
    (AppBarLayout.ScrollingViewBehavior) params.getBehavior();
behavior.setOverlayTop(128); // Note: in pixels