Animazione logo insieme a crollare barra degli strumenti all'interno CoordinatorLayout

Question

Voglio realizzare barra degli strumenti pieghevole con un logo nel modo seguente:

1. spazio flessibile con sovrapposizione di contenuti, come shown here (è stato già installato);
2. Parallaxed pattern in questo spazio che viene scrimmed di colore solido (ha anche questo)
3. Un logo orizzontalmente centrato, che deve apparire proprio sopra il contenuto ma galleggiare verso l'alto come barra crolla: In azione dovrebbe essere qualcosa come pesto di foglie di qui (non necessariamente ridimensionabile, ma che sarebbe un plus):

Ecco il mio layout:

<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:fitsSystemWindows="true"> 

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

     <android.support.design.widget.CollapsingToolbarLayout 
       android:id="@+id/collapsing_toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:fitsSystemWindows="true" 
       app:layout_scrollFlags="scroll|exitUntilCollapsed" 
       app:contentScrim="?attr/colorPrimary"> 

      <ImageView 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:fitsSystemWindows="true" 
        android:src="@drawable/random_pattern" 
        android:scaleType="fitXY" 
        app:layout_collapseMode="parallax" 
        app:layout_collapseParallaxMultiplier="0.75"/> 

      <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.v7.widget.Toolbar> 

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

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

    <android.support.v4.widget.NestedScrollView 
      android:id="@+id/nested_scroll_view" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior" 
      app:behavior_overlapTop="64dp"> 

     <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       tools:context=".MainActivityFragment" 
       android:orientation="vertical"> 

      <android.support.v7.widget.CardView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_margin="8dp"> 

       <!-- card content --> 

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

     </LinearLayout> 

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

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

Il problema è che, ovunque cerco di posizionare l'immagine del logo, non si muove come se ne avessi bisogno, o tutto si rompe. Sembra che potrebbe essere richiesto un comportamento personalizzato. Sfortunatamente né delle esercitazioni che ho trovato sulla nuova libreria di progettazione spiegano come estenderlo - solo come usare le cose fornite. Non è stato rilasciato alcun codice sorgente, il codice decompilato non ha commenti ed è estremamente intricato, e il fatto che non sia ancora molto a mio agio con gli interni di layout di Android lo rende ancora peggiore.

Per favore aiuto?

Answer 1

Ok, l'ho fatto io!

La mia soluzione è orribile, così io sarò ancora in attesa di quelli meglio :)

sono andato su e ha creato una visualizzazione personalizzata CollapsingLogoToolbarLayout, che è una sottoclasse di CollapsingToolbarLayout. L'ultima classe è quella in cui si occupa la transizione del titolo, quindi nella mia sottoclasse ho inserito la logica che ha cambiato le proprietà della vista del logo, ovvero la sua translationY basata sulla frazione "expanded-ness". Gist with code is here. Ora, dopo che ho trovato adatto compensato parametri, il mio layout è simile al seguente:

... 
<com.actinarium.random.common.CollapsingLogoToolbarLayout 
     android:id="@+id/collapsing_toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:fitsSystemWindows="true" 
     app:layout_scrollFlags="scroll|exitUntilCollapsed" 
     app:contentScrim="?attr/colorPrimary" 

     app:logoViewId="@+id/collapsing_logo" 
     app:collapsedViewOffset="0dp" 
     app:expandedViewOffset="-56dp"> 

    <ImageView 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      android:src="@drawable/random_pattern" 
      android:scaleType="fitXY" 
      app:layout_collapseMode="parallax" 
      app:layout_collapseParallaxMultiplier="0.75"/> 

    <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.v7.widget.Toolbar> 

    <FrameLayout 
      android:id="@+id/collapsing_logo" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:layout_gravity="bottom"> 

     <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:src="@drawable/random_logo"/> 

    </FrameLayout> 

</com.actinarium.random.common.CollapsingLogoToolbarLayout> 
...