CollapsingToolbarLayout: contenuto personalizzatoScrim simile a Facebook

Question

Desidero creare un contenuto personalizzatoScrim per il mio collapsingToolbarLayout. Il mio crolloToolbarLayout ha un imageview all'interno. Quando si scorre, in teoria l'ImageView è supponiamo di fade out e il mio colore tela è supponiamo di dissolvenza in

Sappiamo tutti possiamo creare una tela come questo:.

  <android.support.design.widget.CollapsingToolbarLayout 
       android:id="@+id/collapsing_toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       app:contentScrim="?attr/colorPrimary" 
       android:background="@color/white" 
       app:expandedTitleMarginStart="48dp" 
       app:expandedTitleMarginEnd="64dp" 
       android:fitsSystemWindows="true" 
       app:expandedTitleTextAppearance="@color/transparent" 
       app:layout_scrollFlags="scroll|exitUntilCollapsed" 
       > 

Tuttavia l'androide tela di default sembra solo iniziare a funzionare quando si scorre 3/4 sullo schermo. Prima di quel punto, la visualizzazione di immagini è ancora completamente mostrata. Anche quando si raggiunge 3/4 dello schermo, i calci scrim in e cambia automaticamente il colore del collapsingtoolbarlayout per il colore della tela:

invece di averlo riempire completamente lo schermo quando si scorre 3/4 del modo in su e prima che abbiamo raggiunto il toolbar, voglio che svanisca dolcemente fino a quando non si scorre verso lo toolbar.

Se si desidera visualizzare un esempio dell'effetto che si desidera creare, dare un'occhiata all'app Facebook. Questa è l'applicazione di Facebook quando il collapsingToolbarLayout è completamente espanso:

Quando si scorre a circa 3/4 del modo in giù, il collapsingToolbarLayout ha un colore blu sbiadita e l'azzurro non è completamente saturare:

Quindi devo creare il seguente dentro il mio collapsingToolbarLayout:

<FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:id="@+id/frame_picture"> 

     <com.customshapes.SquareImageView 
      android:id="@+id/backdrop" 
      android:contentDescription="@string/photo" 
      android:transitionName="@string/transition" 
      android:layout_width="match_parent" 
      android:layout_height="240dp" 
      android:scaleType="centerCrop" 
      android:fitsSystemWindows="true" 
      /> 

     <com.customshapes.SquareImageView 
      android:id="@+id/fading_backdrop" 
      android:layout_width="match_parent" 
      android:background="?attr/colorPrimary" 
      android:layout_height="240dp" 
      android:alpha="0" 
      android:fitsSystemWindows="true" 
      /> 

    </FrameLayout> 

Il framelayout comprende lo sfondo imageview che contiene l'immagine che viene visualizzata all'interno del mio collassareToolbarLayout e di fronte è una vista di immagini che contiene semplicemente 'scrimColor'? Attr/colorPrimary con un alfa di 0 in modo che lo sfondo imageview splendere attraverso

Poi ho implementato onOffsetChangedListener del appBarLayout:

@Override 
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { 

    fading_backdrop.setImageAlpha(verticalOffset); 
    fading_backdrop.invalidate(); 
} 

Stiamo mettendo l'alfa del fading_backdrop in modo che apparirà quando abbiamo scorrere verso l'alto. Sto provando a creare una tela artificialmente.

Tuttavia, questo non sembra funzionare correttamente. Non c'è alcun svanire quando eseguo questo codice. Qualcuno sa cosa sto sbagliando?

Answer 1

Ecco come sono riuscito a creare uno scrim personalizzato, che sembra essere usato in parecchie app al giorno d'oggi - se guardi su Facebook, vedrai che non usano lo standard . Il codice sottostante duplica ciò che Facebook fa nella propria app.

È necessario impostare un AppBarLayout.OnOffsetChangedListener per l'attività e quindi utilizzare il seguente codice riportato di seguito per misurare le dimensioni della barra degli strumenti e le dimensioni di appBarLayout.

Quando il vostro ascoltatore è chiamato, il verticalOffset misure effettivamente l'offset del collapsingToolbarLayout da quando è completamente esteso al punto in cui tocca il appuntato toolbar. Pertanto, lo verticalOffset ESCLUDE l'altezza dello toolbar. Per confrontare le mele con le mele, è necessario ESCLUDERE anche l'altezza dellodall'altezza dello appBarLayout in modo che quando dividiamo lo verticalOffset con lo totalHeight, né verticaleOffset né totalHeight contengano l'altezza toolbar. Questo è necessario per ottenere una percentuale per applicare il valore 255 alfa a.

@Override 
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { 

     //measuring for alpha 
     int toolBarHeight = toolbar.getMeasuredHeight(); 
     int appBarHeight = appBarLayout.getMeasuredHeight(); 
     Float f = ((((float) appBarHeight - toolBarHeight) + verticalOffset)/((float) appBarHeight - toolBarHeight)) * 255; 
     fading_backdrop.getBackground().setAlpha(255 - Math.round(f)); 
    } 

Quando si scorre ora, il fading_backdrop gradualmente guadagnare alfa quando si scorre verso l'alto in modo che si sovrappone perfettamente con l'immagine nel collapsingToolbarLayout, simile a facebook personalizzato contentScrim.