讓AppBarLayout/CollapsingToolbarLayout作出反應RecyclerView滾動在ViewPager

Question

我與一個CollapsingToolbarLayout和ViewPager一個測試應用程序。 ViewPager包含三個碎片，其中一個只是一個簡單的RecyclerView。我的問題是，當RecyclerView滾動時，CollapsingToolbarLayout（或更確切地說是AppBarLayout）不會展開/收縮，除非佈局未完全展開，RecyclerView位於頂部並向下滾動。然後CollapsingToolbarLayout也在擴展。

注：我已上載測試應用here。

我現在的佈局如下：

<?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" 
    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="256dp" 
     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" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      <ImageView 
       android:id="@+id/mm_recipe_activity_image" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:src="@drawable/cake" 
       android:scaleType="centerCrop" 
       android:fitsSystemWindows="true" 
       app:layout_collapseMode="pin"/> 

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

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tablayout" 
      android:layout_width="match_parent" 
      android:layout_height="48dp" 
      app:tabMode="fixed" 
      app:tabIndicatorHeight="0dp" 
      /> 

     <android.support.v4.view.ViewPager 
      android:id="@+id/viewpager" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" /> 

    </LinearLayout> 


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

裏有ViewPager，一個使用一個簡單的TextView包含大量文字和一個與ViewPager兩種類型的片段。碎片全部包裹在NestedScrollView中，使ViewPager中的滾動功能與其他佈局一致，如建議here和其他地方。下面是這兩個片段佈局，首先是一個用一個簡單的TextView，

<android.support.v4.widget.NestedScrollView 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <LinearLayout 
     android:orientation="vertical" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@color/pink"> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/lorem"/> 

    </LinearLayout> 

</android.support.v4.widget.NestedScrollView> 

，然後一個與RecyclerView：

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.widget.NestedScrollView 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fillViewport="true" > 

    <android.support.v7.widget.RecyclerView 
     android:id="@+id/yellow_recyclerview" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@color/yellow" /> 

</android.support.v4.widget.NestedScrollView> 

我怎樣才能讓AppBarLayout/CollapsingToolbarLayout反應在滾動這個RecyclerView？

這裏有一些截圖說明我的意思：

向上滾動從初始位置滾動RecyclerView本身，而不是AppBarLayout/CollapsingToolbarLayout。我想在此處向上/向下滾動以正常摺疊/展開它們。

在所述第一圖像，所述CollapsingToolbarLayout已摺疊和RecyclerView是在頂部。如果我滾動RecyclerView 下降在這一點上，我開始擴大CollapsingToolbarLayout，應該是預期的。如果說我是半途而廢和滾動RecyclerView 了，然而，我最終仍向上滾動RecyclerView，如圖所示，第三形象。

獎金問題：什麼是在上面的第三個圖像中的底灰查看？我看不到我已將它添加到任何地方。它也可以在佈局的底部看到，它們只是一個普通的TextView，所以它不是因爲RecyclerView。

Answer 1

這裏的問題是，你不應該「鳥巢」一個一個NestedScrollView內RecyclerView。

爲什麼？

因爲RecyclerView自身實現了'NestedScrollingChild'和'ScrollingView'接口。 NestedScrollView用於支持沒有滾動功能的視圖，例如在其他情況下成功實現的LinearLayout。

事實上，yellow_fragment.xml按預期工作時改爲：

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.RecyclerView 
    xmlns:android="http://schemas.android.com/apk/res/android" 
     android:id="@+id/yellow_recyclerview" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@color/yellow" 
     android:fillViewport="true" 
    /> 

獎金答：加入android:fillViewport="true"您RecyclerView和green_fragment.xml和pink_fragment.xml您NestedScrollViews將擺脫灰條你的意見的底部。你可能會問的這個魔法是什麼：

當一個滾動視圖內的子視圖小於屏幕時，android:fillViewport="true"是擴展視圖以填充屏幕的方法。下面檢查其效果：

機器人：fillViewport =「真」 _與「假」 _

我刪除了您的TextView的一段文字，以更加突出的差異。查看Romain Guy的blog post有關此功能的更多信息。

編輯：如Krøllebølle在評論中提到，確保有最新的支持庫的版本，因爲它可能是灰色的條紋，即使在您的視圖中添加android:fillViewport="true"後堅持的原因。

Answer 2

其父佈局的默認背景色。你會一直看到它，直到recyclerView/TextView/ViewPager不覆蓋整個屏幕。您將wrap_content作爲元素的高度。嘗試讓它們匹配並檢查結果。