RecyclerView आइटम और CollapsingToolbar के बीच साझा तत्व एनीमेशन एक ही गतिविधि के भीतर

Question

मेरे आवेदन में मेरे पास RecyclerView एडाप्टर के माध्यम से प्रदर्शित वस्तुओं की एक सूची है। यदि मैं एक आइटम पर क्लिक करता हूं तो एक नया Fragment उसी Activity के भीतर शुरू हुआ। इस तरह अपने मद के लेआउट और मेरी गतिविधि नज़र (सरलीकृत):

गतिविधि लेआउट:

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

अब, नई टुकड़ा है अगर एक आइटम क्लिक से शुरू किया गया, मैं में ImageView पर आइटम छवि का एनीमेशन जोड़ना चाहता हूं। मैंने ShareElement एनिमेशन के बारे में the article पढ़ा लेकिन यह यहां काम नहीं करता है क्योंकि यह वास्तविक ShareElement एनीमेशन नहीं है। लक्ष्य ImageView नए खंड में नहीं है और न ही मुझे एक नई गतिविधि शुरू करनी है (मैं केवल Fragment में दृश्य ImageView लक्षित करता हूं)। तो मैं इस मामले में ऐसी एनीमेशन कैसे बनाऊंगा?

Answer 1

तो, आप एक लेआउट से दूसरे लेआउट को देखने का प्रयास कर रहे हैं।

मैं इस ViewOverlays एपीआई का उपयोग कर प्राप्त किया जा सकता है। आप उस एपीआई here के बारे में विस्तृत उत्तर देख सकते हैं। docs से

 

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

:

अब आपके मामले में

, आप क्या है के साथ खत्म हो जाएगा आप अपने ImageView जड़ लेआउट के ViewGroupOverlay को जोड़ना होगा

हैं देखें एक अभिभावक है, ओवरले में जोड़े जाने से पहले उस अभिभावक से दृश्य हटा दिया जाएगा।

इस प्रकार, जैसे ही आप 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 एक ऐसी ही सुविधा आपको लागू करने के लिए कोशिश कर रहे हैं: