Hoạt ảnh phần tử chia sẻ giữa mục RecyclerView và CollapsingToolbar trong cùng một hoạt động

Question

Trong ứng dụng của tôi, tôi có danh sách các mục được hiển thị thông qua bộ điều hợp RecyclerView. Nếu tôi nhấp vào một mục mới Fragment khi bắt đầu trong cùng một Activity. Cách bố trí của mục của tôi và nhìn Hoạt động của tôi (giản thể) như thế này:

bố trí Hoạt động:

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

mục Layout:

<RelativeLayout > 

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

    <LinearLayout> 

     <TextView ... /> 

     <TextView ... /> 

    </LinearLayout> 

</RelativeLayout> 

Bây giờ, nếu đoạn mới là bắt đầu bằng một nhấp chuột vào mục, tôi muốn thêm hoạt ảnh của hình ảnh mục vào ImageView trong CollapsingToolbarLayout. Tôi đọc the article về hoạt ảnh của ShareElement nhưng điều này không hoạt động ở đây vì đây không phải là hoạt ảnh ShareElement thực. Mục tiêu ImageView không nằm trong đoạn mới mà tôi không phải bắt đầu hoạt động mới (tôi chỉ làm cho mục tiêu ImageView hiển thị trong Fragment mới). Vì vậy, làm thế nào tôi sẽ tạo ra một hình ảnh động như vậy trong trường hợp này?

Answer 1

Vì vậy, bạn đang cố tạo hiệu ứng một chế độ xem từ bố cục này sang bố cục khác.

Tôi nghĩ rằng điều này có thể đạt được bằng cách sử dụng API ViewOverlays. Bạn có thể xem câu trả lời chi tiết về API đó here.

Bây giờ trong trường hợp của bạn, những gì bạn sẽ kết thúc với là bạn muốn thêm bạn ImageView đến ViewGroupOverlay của bố cục gốc:

 

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

Từ docs:

Nếu chế độ xem có bố mẹ, chế độ xem sẽ bị xóa khỏi phụ huynh đó trước khi được thêm vào lớp phủ.

Do đó, ngay khi bạn thực hiện getOverlay().add(imageView) chế độ xem sẽ bị xóa khỏi bố cục đó. Bây giờ bạn được tự do tạo hoạt ảnh của mình và di chuyển imageView đến đích cuối cùng.

 

    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 một tính năng tương tự như bạn đang cố gắng để thực hiện: