logo Animieren zusammen mit Symbolleiste innerhalb CoordinatorLayout Kollabieren

Question

ich zusammenklappbar Symbolleiste mit einem Logo auf folgende Weise implementiert werden soll:

1. Flexible Raum mit überlappenden Inhalt, wie shown here (hat dies bereits);
2. parallaxed Muster in diesem Raum, der mit fester Farbe (haben diese auch)
3. Ein horizontal zentriert Logo, das direkt über dem Inhalt erscheinen aber schweben nach oben als Symbolleiste kollabiert gescrimmt wird: In Aktion soll es sein so etwas wie Pesto der Blätter hier (nicht unbedingt die Größe veränderbar, aber das wäre ein Plus):

hier ist mein 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> 

Das Problem ist, wo immer ich versuche, das Logo zu platzieren, es bewegt sich nicht so, wie ich es brauche oder alles bricht. Es fühlt sich an wie eine benutzerdefinierte Verhaltensweise erforderlich sein könnte. Leider weder der Tutorials, die ich auf der neuen Design-Bibliothek gefunden habe, erklären, wie man es erweitert - nur wie man bereitgestellten Zeug verwendet. Es gibt keinen Quellcode davon, der dekompilierte Code hat keine Kommentare und ist extrem verworren, und die Tatsache, dass ich mich mit den Layout-Interna von Android noch nicht sehr wohl fühle, macht es noch schlimmer.

Bitte helfen?

Answer 1

Okay, ich habe es getan!

Meine Lösung ist schrecklich, so dass ich nach wie vor für bessere :) erwartet werden

Ich ging auf und erstellt eine benutzerdefinierte Ansicht CollapsingLogoToolbarLayout, die eine Unterklasse von CollapsingToolbarLayout ist. Bei der letzteren Klasse wird auf den Titelübergang geachtet - also habe ich in meiner Unterklasse die Logik platziert, die die Eigenschaften der Logoansicht geändert hat, nämlich translationY basierend auf dem Bruchteil "expanded-ness". Gist with code is here. Nachdem ich nun geeignete Offset-Parameter gefunden, mein Layout sieht wie folgt aus:

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