73

Voglio realizzare il 'spazio flessibile con sovrapposizione di contenuti' pattern dal Material design scrolling techniques, come ad esempio in this video: Flexible Space with overlapping content GIFOverlap scorrimento vista con AppBarLayout

mio layout XML in questo momento appare come:

<android.support.design.widget.CoordinatorLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

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

    <android.support.design.widget.CollapsingToolbarLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

     <android.support.v7.widget.Toolbar 
      android:layout_height="?attr/actionBarSize" 
      android:layout_width="match_parent" 
      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"> 
     <....> 
    </LinearLayout> 
    </android.support.v4.widget.NestedScrollView> 
</android.support.design.widget.CoordinatorLayout> 

Esiste un modo semplice per farlo utilizzando la libreria di progettazione? O devo creare un custom CoordinatorLayout.Behavior per fare questo?

+0

Sto cercando l'oppositve, un'immagine all'interno di CollapsingToolbarLayout dovrebbe mostrare alcuni dps in più dopo la barra degli strumenti e sotto il NestedScrollView in un altro colore! – David

risposta

105

Infatti, sovrapponendo la vista scorrimento con l'AppBarLayout è una caratteristica inclusa del Android Design Support Library: è possibile utilizzare l'attributo app:behavior_overlapTop sul NestedScrollView (o qualsiasi View utilizzando ScrollingViewBehavior) 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" poiché è il comportamento che utilizza l'attributo (non la vista o il gruppo di vista principale, 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 
+0

Funziona quasi per me, tranne il mio RecyclerView (su cui ho impostato 'layout_behavior' e' behavior_overlapTop') finisce * dietro * il suo fratello AppBarLayout. Ho provato a cambiare l'ordine nell'XML, ma non sembra avere alcun effetto. Qualche idea su quale potrebbe essere il problema? –

+1

Quando si disabilita lo scorrimento (rimozione dell'app: attributi layout_scrollFlags) - behavior_overlapTop non funziona - NestedScrollView va in AppBarLayout. Sai come aggiustarlo? –

+4

ok, risolto con l'aggiunta di NestedScrollView ... –

18

Oltre alla accepted answer, chiamano setTitleEnabled (false) sul tuo CollapsingToolbarLayout per rendere il titolo rimanere fissa in alto come nell'esempio.

Ti piace questa:

CollapsingToolbarLayout.setTitleEnabled(false); 

o aggiungendolo in XML come questo:

app:titleEnabled="false" 

In caso contrario il titolo potrebbe scomparire dietro il contenuto sovrapposizione, a meno che, naturalmente, questo è il comportamento desiderato.

+2

È possibile inserire un valore sufficiente di extendedTitleMarginBottom in CollapsingToolbarLayout per evitare di sovrapporre il titolo quando espanso. – WindRider

+0

hai salvato la mia domenica, grazie –