RecyclerView với hình nền ở đầu

Question

Những gì tôi đang cố gắng để đạt được điều này là:

Như bạn thấy, có một hình nền xuất hiện hơi phía sau thẻ đầu tiên trong RecyclerView.

Khi người dùng cuộn, hình nền, cũng như văn bản và biểu tượng "Khám phá", cũng sẽ cuộn ra khỏi màn hình.

Tôi đã xem xét đặt RecyclerView thành NestedScrollView, nhưng from what I've read, điều này sẽ phá vỡ RecyclerView và không cho phép nó tái chế chế độ xem (tôi có thể sai).

Làm cách nào để đạt được điều gì đó như thế này? Ngay bây giờ, bố cục của tôi là xương rất trần:

<?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.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/AppTheme.AppBarOverlay" 
     android:fitsSystemWindows="true"> 

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

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

    <android.support.v4.widget.SwipeRefreshLayout 
     android:id="@+id/swipeRefreshLayout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

     <android.support.v7.widget.RecyclerView 
      android:id="@+id/recyclerView" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" /> 

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

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

Cảm ơn.

Answer 1

Hình nền xuất hiện hơi phía sau thẻ đầu tiên trong RecyclerView.

Bạn có thể làm điều đó bằng cách sử dụng CollapsingToolbarLayout, nó sẽ ẩn thị sai đằng sau. Lưu ý: sử dụng app:behavior_overlapTop để làm cho người yêu RecyclerViewlàm nền.

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

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
     > 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:layout_width="match_parent" 
      android:layout_height="300dp" 
      app:titleEnabled="false" 
      app:expandedTitleMarginBottom="94dp" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed" 
      app:contentScrim="?colorPrimary" 
      > 

      <ImageView 
       android:layout_width="fill_parent" 
       android:layout_height="match_parent" 
       android:src="@drawable/london_flat" 
       android:tint="#BB3E50B4" 
       android:scaleType="centerCrop" 
       /> 

      <android.support.v7.widget.Toolbar 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:background="@null" 
       app:layout_collapseMode="pin" 
       style="@style/ToolBarWithNavigationBack" 
       /> 
     </android.support.design.widget.CollapsingToolbarLayout> 
    </android.support.design.widget.AppBarLayout> 

    <android.support.v7.widget.RecyclerView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:scrollbars="none" 
     app:behavior_overlapTop="78dp" 
     android:layout_margin="8dp" 
     android:background="@color/cardview_light_background" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" 
     > 

    </android.support.v7.widget.RecyclerView> 

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

Và kết quả: