Animacja logo wraz z zawaleniem pasek wewnątrz CoordinatorLayout

Question

Chcę zaimplementować składany pasek z logo w następujący sposób:

1. elastycznego z zachodzącymi na siebie treści, jak shown here (mają już tego);
2. parallaxed wzór w tym miejscu, które dostaje scrimmed z kolorem (ma tego zbyt)
3. poziomo-wyśrodkowany logo, które muszą pojawić się tuż nad treścią, ale pływać w górę jak pasek narzędzi załamuje: W akcji powinno być coś Pesto pozostawia tutaj (niekoniecznie o zmiennym rozmiarze, ale to byłby plus):

Oto mój plan:

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

Problem polega na tym, że wszędzie tam, gdzie próbuję umieścić logo, albo się nie porusza, jak ja też tego potrzebuję, albo wszystko zepsuje się. Wydaje się, że wymagane może być niestandardowe zachowanie. Niestety ani z tutoriali, które znalazłem w nowej bibliotece Design, wyjaśnij, jak ją rozszerzyć - tylko jak używać dostarczonych rzeczy. Nie ma kodu źródłowego tego wydania, dekompilowany kod nie ma komentarzy i jest bardzo zaplątany, a fakt, że nie jestem jeszcze bardzo wygodny w układach wewnętrznych Androida sprawia, że ​​jest jeszcze gorzej.

Proszę o pomoc?

Answer 1

Dobra, jakoś to zrobiłem!

Moje rozwiązanie jest straszne, więc będę nadal oczekując na lepszych :)

poszedłem dalej i stworzył własny pogląd CollapsingLogoToolbarLayout, która jest podklasą CollapsingToolbarLayout. Ta ostatnia klasa jest tam, gdzie zadbano o tytułową transformację - tak więc w mojej podklasie umieściłem logikę, która zmieniła właściwości widoku logo, a mianowicie jego translationY w oparciu o frakcję "rozszerzoną". Gist with code is here. Teraz po znalazłem odpowiednie parametry przesunięcia, mój układ wygląda następująco:

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