Animacja elementów wspólnych między elementem RecyclerView a paskiem CollapsingTool w ramach tej samej aktywności

Question

W mojej aplikacji mam listę elementów wyświetlanych przez adapter RecyclerView. Jeśli kliknę element, rozpoczyna się nowy Fragment w tym samym Activity. Układ moim punkcie, a mój wygląd aktywny (uproszczony) tak:

układ aktywny: Układ

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

Item:

<RelativeLayout > 

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

    <LinearLayout> 

     <TextView ... /> 

     <TextView ... /> 

    </LinearLayout> 

</RelativeLayout> 

Teraz, gdy nowy fragment jest Rozpoczęty przez kliknięcie elementu, chciałbym dodać animację obrazu przedmiotu do ImageView w CollapsingToolbarLayout. Przeczytałem the article o animacjach ShareElement, ale to nie działa tutaj, ponieważ nie jest to prawdziwa animacja ShareElement. Docelowy ImageView nie znajduje się w nowym fragmencie ani nie muszę rozpoczynać nowej aktywności (tylko sprawię, że cel będzie widoczny w nowym Fragment). Jak więc utworzyć taką animację w tym przypadku?

Answer 1

Próbujesz animować widok z jednego układu do drugiego.

Myślę, że można to osiągnąć za pomocą ViewOverlays API. Możesz zobaczyć szczegółową odpowiedź na temat tego API here.

Teraz w twoim przypadku, to co będziesz skończyć z jest chcesz dodać swój ImageView do ViewGroupOverlay z układu korzeniowego:

 

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

Z docs:

Jeśli widok ma element nadrzędny, widok zostanie usunięty z tego elementu nadrzędnego przed dodaniem do nakładki.

Tak więc, po wykonaniu getOverlay().add(imageView) widok zostanie usunięty z jego rodzica. Teraz możesz utworzyć animację i przenieść imageView do ostatecznego miejsca docelowego.

 

    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 podobna funkcja starasz się realizować: