Come inserire RecyclerView sotto Toolbar e sopra TabLayout e ViewPager gestendo anche le risposte agli scroll in modo personalizzato?

Question

Voglio creare un layout come l'immagine qui sotto:

Un CoordinatorLayout che contengono:

1. CollapsingToolbarLayout (contengono ImageView & barra degli strumenti)
2. RecyclerView
3. TabLayout
4. ViewPager (che ogni frammento di esso contiene in un RecyclerView)

Voglio rispondere a scorrere gli eventi in questo modo:

1. CollapsingToolbarLayout espandere e comprimere scorrendo
2. bastoni della barra degli strumenti in cima fino TabLayout raggiungere la cima
3. Dopo quella barra degli strumenti scorri verso l'alto e TabLayout tieni in cima

Ho problemi con RecyclerView tra Coll apsingToolbarLayout e TabLayout. Posso implementare questo layout senza RecyclerView (inserisco CollapsingToolbarLayout e TabLayout all'interno di AppBarLayout e ViewPager al di fuori di esso, all'interno di CoordinatorLayout).

La mia domanda:

1. Dove devo mettere che RecyclerView?
2. Quale & dove layout_scrollFlags e layout_behavior devo impostare per ogni layout?

Sembra che AppBarLayout abbia un'altezza limitata. Quando inserisco RecyclerView all'interno di AppBarLayout, solo una parte di RecyclerView è visibile e anche TabLayout scompare.

Ho letto molte esercitazioni come this one e molte domande come this one e this one, ma non mi aiutano.

Answer 1

Inizia con AppBarLayout in base al quale si aggiunge CollapsingToolbarLayout con scrollFlags = "scroll | exitUntilCollapsed",

aggiungere LinearLayout con orientamento verticale-CollapsingToolbarLayout e aggiungere il

• FrameLayout con ImageView + Toolbar

• RecyclerView

• TabLayout

Answer 2

uso questo come un'estensione principale

activity_main

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.widget.SwipeRefreshLayout 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:id="@+id/swipe_refresh_layout_profile" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 
    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical" 
     tools:ignore="RtlHardcoded"> 
     <android.support.design.widget.CoordinatorLayout 
      android:id="@+id/co_profile_activity_root_layout" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="@color/white" 
      android:visibility="visible"> 
      <android.support.design.widget.AppBarLayout 
       android:id="@+id/appbar_profile" 
       android:layout_width="match_parent" 
       android:layout_height="@dimen/profile_img_placeholder_height" 
       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 
       <android.support.design.widget.CollapsingToolbarLayout 
        android:id="@+id/collapse_toolbar_profile" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> 
        <RelativeLayout 
         android:id="@+id/rel_top" 
         android:layout_width="match_parent" 
         android:layout_height="match_parent" 
         android:scaleType="centerCrop"> 
         <ImageView 
          android:id="@+id/img_bg_placeholder_profile" 
          android:layout_width="match_parent" 
          android:layout_height="match_parent" 
          android:scaleType="centerCrop" 
          android:tint="#11000000" 
          app:layout_collapseMode="parallax" 
          app:layout_collapseParallaxMultiplier="0.9" /> 

         <LinearLayout 
          android:id="@+id/lin_top_inner" 
          android:layout_width="match_parent" 
          android:layout_height="match_parent" 
          android:background="#BF473e6b" 
          android:orientation="vertical" 
          android:scaleType="centerCrop"> 
         </LinearLayout> 

        </RelativeLayout> 

        <FrameLayout 
         android:id="@+id/frame_detail_profile" 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:layout_gravity="center|center_horizontal" 
         android:orientation="vertical" 
         app:layout_collapseMode="parallax" 
         app:layout_collapseParallaxMultiplier="0.3"> 
         <android.support.v7.widget.RecyclerView 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content"> 
         </android.support.v7.widget.RecyclerView> 
        </FrameLayout> 

        <android.support.v7.widget.Toolbar 
         android:id="@+id/toolbar_profile" 
         android:layout_width="match_parent" 
         android:layout_height="@dimen/profile_toolbar_height" 
         android:gravity="top|center" 
         app:layout_anchor="@id/frame_detail_profile" 
         app:layout_collapseMode="pin" 
         app:theme="@style/ThemeOverlay.AppCompat.Dark" 
         app:title=""> 

         <LinearLayout 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:orientation="horizontal"> 

          <TextView 
           android:id="@+id/tv_toolbar_title" 
           android:layout_width="wrap_content" 
           android:layout_height="wrap_content" 
           android:layout_marginLeft="@dimen/profile_toolbar_title_left_margin" 
           android:gravity="center_vertical|center" 
           android:ellipsize="end" 
           android:singleLine="true" 
           android:layout_gravity="center" 
           android:textColor="@android:color/white" 
           android:textSize="20sp" /> 
         </LinearLayout> 
        </android.support.v7.widget.Toolbar> 

        <android.support.design.widget.TabLayout 
         android:id="@+id/tab_layout_profile" 
         android:layout_width="match_parent" 
         android:layout_height="?attr/actionBarSize" 
         android:layout_gravity="bottom" 
         android:layout_marginTop="@dimen/profile_tab_layout_top_margin" 
         android:background="@color/white" 
         app:tabIndicatorColor="@color/colorPrimary" 
         app:tabSelectedTextColor="@color/colorPrimary" 
         app:tabTextColor="@color/charcoal_grey" /> 
       </android.support.design.widget.CollapsingToolbarLayout> 
      </android.support.design.widget.AppBarLayout> 

      <android.support.v4.view.ViewPager 
       android:id="@+id/view_pager_profile" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 
     </android.support.design.widget.CoordinatorLayout> 
    </RelativeLayout> 
</android.support.v4.widget.SwipeRefreshLayout> 

e per il layout griglia di schede usano classi adattatore.

Answer 3

due cose da fare: -

1. Quando il pulsante di ricerca si fa clic, impostare la visibilità di vista riciclatore di VISIBILE
2. Quando si preme il pulsante indietro, impostare la visibilità di vista riciclatore per GONE

seguito sono riportate le implementazioni:

1. Impostare la visibilità di vista riciclatore di VISIBILE:

public boolean onOptionsItemSelected(MenuItem item) { 
     if (item.getItemId() == R.id.searchView) { 
      rView.setVisibility(VISIBLE); 
     } 
     return true; 
    } 

2. Impostare la visibilità di adattatore di riciclo per GONE

MenuItem searchMenuItem = menu.findItem(R.id.searchView); 
    MenuItemCompat.setOnActionExpandListener(searchMenuItem, new MenuItemCompat.OnActionExpandListener() { 
     @Override 
     public boolean onMenuItemActionExpand(MenuItem item) { 
      return true; 
     } 

     @Override 
     public boolean onMenuItemActionCollapse(MenuItem item) { 
      recyclerView.setVisibility(GONE); 
      return true; 
     } 
    }); 

NOTA: Non dimenticare di mantenere la visibilità come GONE inizialmente quando l'attività è iniziata