NestedScrollview che si sovrappone CollapsingToolbarLayout come app gmusic

Question

Mi piacerebbe replicare il comportamento dell'app google play music android. In questa app quando si utilizza la scheda "La mia musica" dell'album, l'elenco degli album inizia Sopra la barra delle azioni (la parte arancione) poiché è "estesa". Quando si scorre verso l'alto l'elenco degli album, quella parte arancione scorre verso l'alto ma più lentamente rispetto all'elenco. Quando si scorre verso il basso nell'elenco, anche il "blocco arancione" scorre verso il basso. Questo comportamento è indipendente dalla barra degli strumenti e dalle schede in corso di scorrimento.

Sto provando a riprodurre questo comportamento con la nuova libreria di progettazione del materiale. Utilizzando come punto di partenza l'xml particolare attività dal Cheesquare:

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

ho cercato di usare il contesto "ImageView" con un colore di sfondo, e cercare di spostarlo accanto al nestedview. Se metto la visualizzazione di immagini all'interno di CollapsingToolbarLayout con un effetto di parallasse, il problema è che non riesco a rendere la sua altezza più grande da essere in nestedscrollview. Se metto la visualizzazione di immagini all'esterno di collapsingToolbarLayout ma all'interno di NestedScrollView, non posso modificare la "velocità" di viewScrolling. Se metto la visualizzazione di immagini all'esterno di NestedScrollview, viene disegnata sulla barra degli strumenti anche quando la barra degli strumenti è pungente.

Prima della libreria di progettazione del materiale, ho usato una vista e una richiamata per la scrollview per spostarla verso l'alto e verso il basso, ma voglio usare la nuova libreria poichè pulisce molto rimuove un sacco di codice boilerplate.

Qualche idea?

Answer 1

Infatti, sovrapponendo la vista scorrimento con l'AppBarLayout non impone nulla di tutto ciò: è possibile utilizzare l'attributo app:behavior_overlayTop sul NestedScrollView per impostare la quantità di sovrapposizione:

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

Nota che app:behavior_overlapTop funziona solo su viste che hanno il app:layout_behavior="@string/appbar_scrolling_view_behavior" in quanto è il comportamento che utilizza l'attributo (non la vista o il ViewGroup padre, come di solito si applicano a attributi), quindi il prefisso behavior_.

O impostare a livello di codice tramite setOverlayTop():

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