Gemeinsame Elementanimation zwischen RecyclerView-Objekt und CollapsingToolbar innerhalb derselben Aktivität

Question

In meiner Anwendung habe ich eine Liste von Elementen, die über einen RecyclerView Adapter angezeigt werden. Wenn ich auf einen Artikel klicke, wird ein neuer Fragment innerhalb desselben Activity gestartet. Das Layout meiner Artikel und meine Aktivität sehen (vereinfacht) wie folgt aus:

Aktivität Layout:

<android.support.design.widget.CoordinatorLayout> 

    <android.support.design.widget.AppBarLayout> 

     <android.support.design.widget.CollapsingToolbarLayout> 

      <ImageView 
       android:id="@+id/image" 
       android:transitionName="image" ... /> 

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

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

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

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

    <FrameLayout... /> 

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

Artikel Layout:

<RelativeLayout > 

    <ImageView 
     android:id="@id/itemImage" 
     android:transitionName="image" /> 

    <LinearLayout> 

     <TextView ... /> 

     <TextView ... /> 

    </LinearLayout> 

</RelativeLayout> 

Nun, wenn das neue Fragment ist Mit einem Klick auf ein Element gestartet, möchte ich eine Animation des Objekts Bild an die ImageView in der CollapsingToolbarLayout hinzufügen. Ich habe the article über ShareElement-Animationen gelesen, aber das funktioniert hier nicht, da dies keine echte ShareElement-Animation ist. Das Ziel ImageView ist nicht in dem neuen Fragment, ich muss auch keine neue Aktivität starten (ich mache nur das Ziel ImageView sichtbar in der neuen Fragment). Wie würde ich in diesem Fall eine solche Animation erstellen?

Answer 1

Sie versuchen also, eine Ansicht von einem Layout zum anderen zu animieren.

Ich denke, dies kann mit ViewOverlays API erreicht werden. Sie können eine detaillierte Antwort zu diesem API here sehen.

Jetzt in Ihrem Fall, was Sie mit ist am Ende dann würden Sie Ihre ImageView zum ViewGroupOverlay des Wurzel Layout hinzufügen:

 

    final ViewGroup container = (ViewGroup) findViewById(R.id.content); 
    container.getOverlay().add(imageView); 
    ... 
 

Vom docs:

Wenn die Ansicht hat einen Elternteil, die Ansicht wird von diesem Elternteil entfernt, bevor sie dem Overlay hinzugefügt wird.

So, sobald Sie getOverlay().add(imageView) durchführen, würde die Ansicht von ihrem Elternteil entfernt werden. Jetzt können Sie Ihre Animation erstellen und die imageView zum endgültigen Ziel verschieben.

 

    final ViewGroup container = (ViewGroup) findViewById(R.id.content); 
    container.getOverlay().add(imageView); 

    // animate imageView by any API, e.g. ViewPropertyHolder 
    imageView.animate() 
      .x(finalX) 
      .y(finalY) 
      .setDuration(duration) 
      .setInterpolator(interpolator) 
      .withEndAction(() -> { 
       // crucial point, remove the overlay 
       container.getOverlay().remove(imageView); 

       // add this `imageView` to the destination layout 
       destLayout.addView(imageView); 
      }) 
 

Here's ein ähnliches Feature Sie versuchen zu implementieren: