RecyclerView項目和CollapsingToolbar在同一活動中的共享元素動畫

在我的應用程序中，我有一個通過RecyclerView適配器顯示的項目列表。如果我點擊一個項目，在同一Activity內啓動一個新的Fragment。我的項目，這樣的佈局和我的活動的樣子（簡化）：RecyclerView項目和CollapsingToolbar在同一活動中的共享元素動畫

活動佈局：

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

項目佈局：

<RelativeLayout > 

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

    <LinearLayout> 

     <TextView ... /> 

     <TextView ... /> 

    </LinearLayout> 

</RelativeLayout>

現在，如果新片段由項目點擊開始，我想將項目圖像的動畫添加到CollapsingToolbarLayout中的ImageView。我讀到the article關於ShareElement動畫，但這不起作用，因爲這不是一個真正的ShareElement動畫。目標ImageView不在新的片段中，我也不必開始新的活動（我只將目標ImageView顯示在新的Fragment中）。那麼如何在這種情況下創建這樣的動畫呢？

來源

2017-08-06 Cilenco

是在RecyclerView在相同的佈局CollapsingToolbarLayout？ – Cochi

不，它位於活動佈局的另一個Fragment和CollapsingToolbarLayout中。 – Cilenco

另一個片段是由CollapsingToolbar或另一個相同的Activity處理的？ – Cochi

所以，你試圖爲一個視圖從一個佈局創建到另一個佈局。

我認爲這可以通過使用ViewOverlays API來實現。您可以看到有關該API here的詳細答案。

現在你的情況，你會是最終你會添加ImageView到根佈局ViewGroupOverlay：

 

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

從docs：

如果視圖具有父視圖，視圖將在添加到疊加之前從該父視圖中移除。

因此，只要您執行getOverlay().add(imageView)該視圖將從其父項中刪除。現在您可以自由創建動畫並將imageView移動到最終目的地。

 

    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類似的功能你要實現：

來源

2017-08-14 08:13:09 azizbekian

RecyclerView項目和CollapsingToolbar在同一活動中的共享元素動畫

回答

相關問題