অ্যানিমেশন ব্যবহার করে ফ্র্যাগমেন্টের মধ্যে নেভিগেট করা

নেভিগেশনের সময় ফ্র্যাগমেন্টকে ভিজ্যুয়ালি কানেক্ট করতে, Fragment API, মোশন এফেক্ট ও ট্রান্সফর্মেশন ব্যবহার করার দুটি উপায় প্রদান করে। এর মধ্যে একটি হল অ্যানিমেশন ফ্রেমওয়ার্ক, যা Animation এবং Animator, দুটিই ব্যবহার করে। অন্যটি হল ট্রানজিশন ফ্রেমওয়ার্ক, যার মধ্যে শেয়ার করা এলিমেন্ট ট্রানজিশন অন্তর্ভুক্ত।

আপনি ফ্র্যাগমেন্টে প্রবেশ ও বের হওয়ার জন্য এবং ফ্র্যাগমেন্টের মধ্যে শেয়ার করা এলিমেন্টের ট্রানজিশনের জন্য কাস্টম এফেক্ট নির্দিষ্ট করতে পারবেন।

  • এন্টার এফেক্ট নির্ধারণ করে যে কীভাবে কোনও ফ্র্যাগমেন্ট স্ক্রিনে প্রবেশ করে। যেমন, আপনি কোনও ফ্র্যাগমেন্টে নেভিগেট করার সময় স্ক্রিনের প্রান্ত থেকে সেটি স্লাইড করে আনার এফেক্ট তৈরি করতে পারেন।
  • এক্সিট এফেক্ট নির্ধারণ করে যে কীভাবে কোনও ফ্র্যাগমেন্ট স্ক্রিন থেকে বেরিয়ে যায়। যেমন, আপনি কোনও ফ্র্যাগমেন্ট থেকে নেভিগেট করে বেরিয়ে আসার সময় সেটি ফেড আউট করার জন্য এফেক্ট তৈরি করতে পারেন।
  • শেয়ার করা এলিমেন্ট ট্রানজিশন নির্ধারণ করে যে দুটি ফ্র্যাগমেন্টের মধ্যে শেয়ার করা ভিউ কীভাবে তাদের মধ্যে চলে। যেমন, ফ্র্যাগমেন্ট ক-এর ImageView-এ দেখানো ছবি ফ্র্যাগমেন্ট খ-তে ট্রানজিশন করে, যখন খ দৃশ্যমান হয়।

অ্যানিমেশন সেট করুন

প্রথমে, আপনাকে প্রবেশ এবং প্রস্থান এফেক্টের জন্য অ্যানিমেশন তৈরি করতে হবে, যা নতুন ফ্র্যাগমেন্টে নেভিগেট করার সময় রান করে। আপনি অ্যানিমেশনকে টুইন অ্যানিমেশন রিসোর্স হিসেবে সংজ্ঞায়িত করতে পারেন। এইসব রিসোর্স আপনাকে অ্যানিমেশন চলাকালীন ফ্র্যাগমেন্ট কীভাবে ঘুরবে, স্ট্রেচ হবে, ফেড হবে এবং সরবে তা নির্ধারণ করতে দেয়। যেমন, আপনি হয়ত বর্তমান ফ্র্যাগমেন্টটি ফেড আউট করতে এবং নতুন ফ্র্যাগমেন্টটি স্ক্রিনের ডান প্রান্ত থেকে স্লাইড ইন করতে চান, যেমনটি চিত্র ১-এ দেখানো হয়েছে।

প্রবেশ করা ও বেরিয়ে আসার অ্যানিমেশন। বর্তমান ফ্র্যাগমেন্ট ফেড আউট হয়ে যায় এবং পরবর্তী ফ্র্যাগমেন্ট ডানদিক থেকে স্লাইড করে আসে।
ছবি ১. প্রবেশ করা ও বেরিয়ে আসার অ্যানিমেশন। বর্তমান ফ্র্যাগমেন্ট ফেড আউট হয়ে যায় এবং পরবর্তী ফ্র্যাগমেন্ট ডানদিক থেকে স্লাইড করে আসে।

এইসব অ্যানিমেশন res/anim ডিরেক্টরিতে সংজ্ঞায়িত করা যেতে পারে:

<!-- res/anim/fade_out.xml -->
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_shortAnimTime"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:fromAlpha="1"
    android:toAlpha="0" />

<!-- res/anim/slide_in.xml -->
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_shortAnimTime"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:fromXDelta="100%"
    android:toXDelta="0%" />

এছাড়াও, আপনি ব্যাক স্ট্যাক পপ করার সময় রান করা এন্টার ও এক্সিট এফেক্টের জন্য অ্যানিমেশন নির্দিষ্ট করতে পারবেন, যা ব্যবহারকারী আপ বা ব্যাক বোতামে ট্যাপ করলে হতে পারে। এগুলিকে popEnter এবং popExit অ্যানিমেশন বলা হয়। যেমন, ব্যবহারকারী আগের স্ক্রিনে ফিরে গেলে, আপনি হয়ত বর্তমান ফ্র্যাগমেন্টটি স্ক্রিনের ডান প্রান্ত থেকে স্লাইড করে সরিয়ে দিতে এবং আগের ফ্র্যাগমেন্টটি ফেড ইন করতে চাইবেন।

popEnter এবং popExit অ্যানিমেশন। বর্তমান ফ্র্যাগমেন্ট স্ক্রিনের ডানদিকে স্লাইড করে চলে যায় এবং আগের ফ্র্যাগমেন্ট ফেড-ইন হয়।
ছবি ২. popEnter এবং popExit অ্যানিমেশন। বর্তমান ফ্র্যাগমেন্ট স্ক্রিনের ডানদিকে স্লাইড করে চলে যায় এবং আগের ফ্র্যাগমেন্ট ফেড-ইন হয়।

এইসব অ্যানিমেশনকে এইভাবে সংজ্ঞায়িত করা যেতে পারে:

<!-- res/anim/slide_out.xml -->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_shortAnimTime"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:fromXDelta="0%"
    android:toXDelta="100%" />

<!-- res/anim/fade_in.xml -->
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_shortAnimTime"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:fromAlpha="0"
    android:toAlpha="1" />

অ্যানিমেশন সংজ্ঞায়িত করার পরে, FragmentTransaction.setCustomAnimations() কল করে সেগুলি ব্যবহার করুন, রিসোর্স আইডি অনুযায়ী অ্যানিমেশন রিসোর্স পাস করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

Kotlin

supportFragmentManager.commit {
    setCustomAnimations(
        R.anim.slide_in, // enter
        R.anim.fade_out, // exit
        R.anim.fade_in, // popEnter
        R.anim.slide_out // popExit
    )
    replace(R.id.fragment_container, fragment)
    addToBackStack(null)
}

জাভা

Fragment fragment = new FragmentB();
getSupportFragmentManager().beginTransaction()
    .setCustomAnimations(
        R.anim.slide_in,  // enter
        R.anim.fade_out,  // exit
        R.anim.fade_in,   // popEnter
        R.anim.slide_out  // popExit
    )
    .replace(R.id.fragment_container, fragment)
    .addToBackStack(null)
    .commit();

ট্রানজিশন সেট করা

এছাড়াও, আপনি এন্টার ও এক্সিট এফেক্ট নির্ধারণ করতে ট্রানজিশন ব্যবহার করতে পারেন। এই ট্রানজিশন XML রিসোর্স ফাইলে সংজ্ঞায়িত করা যেতে পারে। যেমন, আপনি হয়ত বর্তমান ফ্র্যাগমেন্ট ফেড আউট করতে এবং নতুন ফ্র্যাগমেন্ট স্ক্রিনের ডানদিকের প্রান্ত থেকে স্লাইড ইন করতে চান। এই ট্রানজিশনগুলি নিম্নলিখিতভাবে সংজ্ঞায়িত করা যেতে পারে:

<!-- res/transition/fade.xml -->
<fade xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_shortAnimTime"/>

<!-- res/transition/slide_right.xml -->
<slide xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_shortAnimTime"
    android:slideEdge="right" />

আপনি ট্রানজিশন সংজ্ঞায়িত করার পরে, প্রবেশকারী ফ্র্যাগমেন্টে setEnterTransition() এবং প্রস্থানকারী ফ্র্যাগমেন্টে setExitTransition() কল করে সেগুলি প্রয়োগ করুন, আপনার ইনফ্লেটেড ট্রানজিশন রিসোর্স তাদের রিসোর্স আইডি দ্বারা পাস করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

Kotlin

class FragmentA : Fragment() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val inflater = TransitionInflater.from(requireContext())
        exitTransition = inflater.inflateTransition(R.transition.fade)
    }
}

class FragmentB : Fragment() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val inflater = TransitionInflater.from(requireContext())
        enterTransition = inflater.inflateTransition(R.transition.slide_right)
    }
}

জাভা

public class FragmentA extends Fragment {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TransitionInflater inflater = TransitionInflater.from(requireContext());
        setExitTransition(inflater.inflateTransition(R.transition.fade));
    }
}

public class FragmentB extends Fragment {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TransitionInflater inflater = TransitionInflater.from(requireContext());
        setEnterTransition(inflater.inflateTransition(R.transition.slide_right));
    }
}

AndroidX ট্রানজিশন ফ্র্যাগমেন্ট সাপোর্ট করে। ফ্র্যাগমেন্ট ফ্রেমওয়ার্ক ট্রানজিশন সাপোর্ট করলেও, আমরা AndroidX ট্রানজিশন ব্যবহার করার জন্য সুপারিশ করি, কারণ এটি API লেভেল ১৪ ও তার পরবর্তী ভার্সনে সাপোর্ট করে এবং এতে ত্রুটি সমাধান করা হয়েছে যা ফ্রেমওয়ার্ক ট্রানজিশনের পুরনো ভার্সনে নেই।

শেয়ার করা এলিমেন্ট ট্রানজিশন ব্যবহার করুন

ট্রানজিশন ফ্রেমওয়ার্ক-এর অংশ হিসেবে, শেয়ার করা এলিমেন্ট ট্রানজিশন নির্ধারণ করে যে ফ্র্যাগমেন্ট ট্রানজিশনের সময় সংশ্লিষ্ট ভিউ কীভাবে দুটি ফ্র্যাগমেন্টের মধ্যে পরিবর্তিত হয়। যেমন, আপনি হয়ত চাইবেন যে ফ্র্যাগমেন্ট A-এর ImageView-এ দেখানো ছবি ফ্র্যাগমেন্ট B-তে ট্রানজিশন করুক, যেমনটি চিত্র ৩-এ দেখানো হয়েছে।

শেয়ার করা এলিমেন্ট সহ ফ্র্যাগমেন্ট ট্রানজিশন।
ছবি ৩. শেয়ার করা এলিমেন্ট সহ ফ্র্যাগমেন্ট ট্রানজিশন।

উচ্চ স্তরে, শেয়ার করা এলিমেন্টের সাথে ফ্র্যাগমেন্ট ট্রানজিশন কীভাবে করতে হয় তা এখানে দেওয়া হল:

  1. প্রতিটি শেয়ার করা এলিমেন্ট ভিউতে একটি অনন্য ট্রানজিশন নাম অ্যাসাইন করুন।
  2. FragmentTransaction-এ শেয়ার করা এলিমেন্ট ভিউ ও ট্রানজিশনের নাম যোগ করুন।
  3. শেয়ার করা এলিমেন্ট ট্রানজিশন অ্যানিমেশন সেট করুন।

প্রথমে, আপনাকে প্রতিটি শেয়ার করা এলিমেন্ট ভিউতে একটি অনন্য ট্রানজিশন নাম অ্যাসাইন করতে হবে যাতে ভিউগুলি একটি ফ্র্যাগমেন্ট থেকে পরবর্তী ফ্র্যাগমেন্টে ম্যাপ করা যায়। ViewCompat.setTransitionName() ব্যবহার করে প্রতিটি ফ্র্যাগমেন্ট লেআউটে শেয়ার করা এলিমেন্টে ট্রানজিশন নাম সেট করুন, যা API লেভেল ১৪ এবং তার উপরের ভার্সনের জন্য মানানসই। উদাহরণস্বরূপ, ফ্র্যাগমেন্ট A এবং B-তে ImageView-এর ট্রানজিশন নাম নিম্নলিখিতভাবে অ্যাসাইন করা যেতে পারে:

Kotlin

class FragmentA : Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        ...
        val itemImageView = view.findViewById<ImageView>(R.id.item_image)
        ViewCompat.setTransitionName(itemImageView, “item_image”)
    }
}

class FragmentB : Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        ...
        val heroImageView = view.findViewById<ImageView>(R.id.hero_image)
        ViewCompat.setTransitionName(heroImageView, “hero_image”)
    }
}

জাভা

public class FragmentA extends Fragment {
    @Override
    public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {
        ...
        ImageView itemImageView = view.findViewById(R.id.item_image);
        ViewCompat.setTransitionName(itemImageView, “item_image”);
    }
}

public class FragmentB extends Fragment {
    @Override
    public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {
        ...
        ImageView heroImageView = view.findViewById(R.id.hero_image);
        ViewCompat.setTransitionName(heroImageView, “hero_image”);
    }
}

ফ্র্যাগমেন্ট ট্রানজিশনে আপনার শেয়ার করা এলিমেন্ট অন্তর্ভুক্ত করতে, আপনার FragmentTransaction-কে জানতে হবে যে প্রতিটি শেয়ার করা এলিমেন্টের ভিউ কীভাবে একটি ফ্র্যাগমেন্ট থেকে পরবর্তী ফ্র্যাগমেন্টে ম্যাপ করে। আপনার প্রতিটি শেয়ার করা এলিমেন্ট FragmentTransaction-এ যোগ করুন FragmentTransaction.addSharedElement()-এ কল করে, পরবর্তী ফ্র্যাগমেন্টে সংশ্লিষ্ট ভিউয়ের ট্রানজিশন নাম ও ভিউ পাস করে, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

Kotlin

val fragment = FragmentB()
supportFragmentManager.commit {
    setCustomAnimations(...)
    addSharedElement(itemImageView, “hero_image”)
    replace(R.id.fragment_container, fragment)
    addToBackStack(null)
}

জাভা

Fragment fragment = new FragmentB();
getSupportFragmentManager().beginTransaction()
    .setCustomAnimations(...)
    .addSharedElement(itemImageView, “hero_image”)
    .replace(R.id.fragment_container, fragment)
    .addToBackStack(null)
    .commit();

আপনার শেয়ার করা এলিমেন্ট কীভাবে একটি ফ্র্যাগমেন্ট থেকে পরবর্তী ফ্র্যাগমেন্টে ট্রানজিশন করবে তা নির্দিষ্ট করতে, আপনাকে অবশ্যই নেভিগেট করা ফ্র্যাগমেন্টে একটি এন্টার ট্রানজিশন সেট করতে হবে। ফ্র্যাগমেন্টের onCreate() পদ্ধতিতে Fragment.setSharedElementEnterTransition() কল করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

Kotlin

class FragmentB : Fragment() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        sharedElementEnterTransition = TransitionInflater.from(requireContext())
             .inflateTransition(R.transition.shared_image)
    }
}

জাভা

public class FragmentB extends Fragment {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Transition transition = TransitionInflater.from(requireContext())
            .inflateTransition(R.transition.shared_image);
        setSharedElementEnterTransition(transition);
    }
}

shared_image ট্রানজিশন এইভাবে সংজ্ঞায়িত করা হয়:

<!-- res/transition/shared_image.xml -->
<transitionSet>
    <changeImageTransform />
</transitionSet>

Transition-এর সব সাবক্লাস শেয়ার করা এলিমেন্ট ট্রানজিশন হিসেবে কাজ করে। আপনি কাস্টম Transition তৈরি করতে চাইলে, কাস্টম ট্রানজিশন অ্যানিমেশন তৈরি করুন দেখুন। changeImageTransform, আগের উদাহরণে ব্যবহার করা হয়েছে, এটি উপলভ্য প্রি-বিল্ট অনুবাদের মধ্যে একটি যা আপনি ব্যবহার করতে পারবেন। আপনি Transition ক্লাসের জন্য API রেফারেন্সে অতিরিক্ত Transition সাবক্লাস খুঁজে পেতে পারেন।

ডিফল্ট হিসেবে, শেয়ার করা এলিমেন্টের এন্টার ট্রানজিশন শেয়ার করা এলিমেন্টের রিটার্ন ট্রানজিশন হিসেবেও ব্যবহার করা হয়। রিটার্ন ট্রানজিশন নির্ধারণ করে যে ফ্র্যাগমেন্ট ট্রানজ্যাকশন ব্যাক স্ট্যাক থেকে পপ অফ হয়ে গেলে কীভাবে শেয়ার করা এলিমেন্ট আগের ফ্র্যাগমেন্টে ফিরে যায়। আপনি যদি অন্য কোনও রিটার্ন ট্রানজিশন নির্দিষ্ট করতে চান, তাহলে ফ্র্যাগমেন্টের onCreate() পদ্ধতিতে Fragment.setSharedElementReturnTransition() ব্যবহার করে তা করতে পারেন।

আগের ধাপে ফিরে যাওয়া সংক্রান্ত পূর্বাভাসের সাথে মানানসই

আপনি অনেক ক্রস-ফ্র্যাগমেন্ট অ্যানিমেশনের সাথে আগের ধাপে ফিরে যাওয়া সংক্রান্ত পূর্বাভাস ব্যবহার করতে পারবেন, তবে সবকটির সাথে নয়। আগের ধাপে ফিরে যাওয়া সংক্রান্ত পূর্বাভাস প্রয়োগ করার সময়, নিম্নলিখিত বিষয়গুলি মনে রাখবেন:

  • Transitions 1.5.0 বা তার পরের ভার্সন এবং Fragments 1.7.0 বা তার পরের ভার্সন ইমপোর্ট করুন।
  • Animator ক্লাস ও সাবক্লাস এবং AndroidX ট্রানজিশন লাইব্রেরি কাজ করে।
  • Animation ক্লাস এবং ফ্রেমওয়ার্ক Transition লাইব্রেরি কাজ করে না।
  • প্রেডিক্টিভ ফ্র্যাগমেন্ট অ্যানিমেশন শুধুমাত্র Android 14 বা তার পরবর্তী ভার্সন চালানো ডিভাইসে কাজ করে।
  • setCustomAnimations, setEnterTransition, setExitTransition, setReenterTransition, setReturnTransition, setSharedElementEnterTransition এবং setSharedElementReturnTransition-এ আগের ধাপে ফিরে যাওয়া সংক্রান্ত পূর্বাভাস কাজ করে।

আরও জানতে, প্রেডিকটিভ ব্যাক অ্যানিমেশনের জন্য সহায়তা যোগ করুন দেখুন।

ট্রানজিশন স্থগিত করা

কিছু ক্ষেত্রে, আপনাকে অল্প সময়ের জন্য ফ্র্যাগমেন্ট ট্রানজিশন স্থগিত করতে হতে পারে। যেমন, আপনাকে হয়ত ফ্র্যাগমেন্টে প্রবেশ করা সব ভিউ পরিমাপ করা এবং লে-আউট করা পর্যন্ত অপেক্ষা করতে হবে যাতে Android ট্রানজিশনের জন্য তাদের শুরু এবং শেষের অবস্থা সঠিকভাবে ক্যাপচার করতে পারে।

এছাড়াও, কিছু প্রয়োজনীয় ডেটা লোড না হওয়া পর্যন্ত আপনার ট্রানজিশন স্থগিত রাখতে হতে পারে। যেমন, শেয়ার করা এলিমেন্টের জন্য ছবি লোড না হওয়া পর্যন্ত আপনাকে অপেক্ষা করতে হতে পারে। অন্যথায়, ট্রানজিশন চলাকালীন বা পরে কোনও ছবি লোড হওয়া শেষ হলে, ট্রানজিশনটি হয়ত ঝাঁকুনি দিয়ে শেষ হবে।

ট্রানজিশন স্থগিত করতে, আপনাকে প্রথমে নিশ্চিত করতে হবে যে ফ্র্যাগমেন্ট ট্রানজ্যাকশন ফ্র্যাগমেন্ট স্টেট পরিবর্তনের রিঅর্ডারিংয়ের অনুমতি দেয়। ফ্র্যাগমেন্ট স্টেট পরিবর্তনের ক্রম আবার সাজানোর অনুমতি দিতে, FragmentTransaction.setReorderingAllowed() কল করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

Kotlin

val fragment = FragmentB()
supportFragmentManager.commit {
    setReorderingAllowed(true)
    setCustomAnimation(...)
    addSharedElement(view, view.transitionName)
    replace(R.id.fragment_container, fragment)
    addToBackStack(null)
}

জাভা

Fragment fragment = new FragmentB();
getSupportFragmentManager().beginTransaction()
    .setReorderingAllowed(true)
    .setCustomAnimations(...)
    .addSharedElement(view, view.getTransitionName())
    .replace(R.id.fragment_container, fragment)
    .addToBackStack(null)
    .commit();

এন্টার ট্রানজিশন স্থগিত করতে, Fragment.postponeEnterTransition() এন্টারিং ফ্র্যাগমেন্টের onViewCreated() পদ্ধতিতে কল করুন:

Kotlin

class FragmentB : Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        ...
        postponeEnterTransition()
    }
}

জাভা

public class FragmentB extends Fragment {
    @Override
    public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {
        ...
        postponeEnterTransition();
    }
}

ডেটা লোড করা হয়ে গেলে এবং ট্রানজিশন শুরু করার জন্য প্রস্তুত হলে, Fragment.startPostponedEnterTransition()-এ কল করুন। নিম্নলিখিত উদাহরণে, শেয়ার করা ImageView-এ ছবি লোড করার জন্য Glide লাইব্রেরি ব্যবহার করা হয়, ছবি লোড করা সম্পূর্ণ না হওয়া পর্যন্ত সংশ্লিষ্ট ট্রানজিশন স্থগিত রাখা হয়।

Kotlin

class FragmentB : Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        ...
        Glide.with(this)
            .load(url)
            .listener(object : RequestListener<Drawable> {
                override fun onLoadFailed(...): Boolean {
                    startPostponedEnterTransition()
                    return false
                }

                override fun onResourceReady(...): Boolean {
                    startPostponedEnterTransition()
                    return false
                }
            })
            .into(headerImage)
    }
}

জাভা

public class FragmentB extends Fragment {
    @Override
    public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {
        ...
        Glide.with(this)
            .load(url)
            .listener(new RequestListener<Drawable>() {
                @Override
                public boolean onLoadFailed(...) {
                    startPostponedEnterTransition();
                    return false;
                }

                @Override
                public boolean onResourceReady(...) {
                    startPostponedEnterTransition();
                    return false;
                }
            })
            .into(headerImage)
    }
}

ব্যবহারকারীর ইন্টারনেট কানেকশন স্লো হওয়ার মতো কেস ম্যানেজ করার সময়, সব ডেটা লোড হওয়ার জন্য অপেক্ষা করার পরিবর্তে, নির্দিষ্ট সময় পরে স্থগিত ট্রানজিশন শুরু করার প্রয়োজন হতে পারে। এইসব পরিস্থিতিতে, আপনি পরিবর্তে কল করতে পারেন Fragment.postponeEnterTransition(long, TimeUnit) প্রবেশকারী ফ্র্যাগমেন্টের onViewCreated() পদ্ধতিতে, সময়কাল এবং সময়ের ইউনিট পাস করে। নির্দিষ্ট সময় পেরিয়ে গেলে, স্থগিত করা ডাউনলোড অটোমেটিক শুরু হয়ে যায়।

RecyclerView-এর সাথে শেয়ার করা এলিমেন্ট ট্রানজিশন ব্যবহার করুন

প্রবেশের ফ্র্যাগমেন্টে সব ভিউ পরিমাপ করা এবং লে-আউট করা না হওয়া পর্যন্ত স্থগিত করা প্রবেশ ট্রানজিশন শুরু করা উচিত নয়। RecyclerView ব্যবহার করার সময়, ট্রানজিশন শুরু করার আগে আপনাকে যেকোনও ডেটা লোড হওয়া এবং RecyclerView আইটেম ড্র করার জন্য রেডি হওয়া পর্যন্ত অপেক্ষা করতে হবে। এখানে একটি উদাহরণ দেওয়া হল:

Kotlin

class FragmentA : Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        postponeEnterTransition()

        // Wait for the data to load
        viewModel.data.observe(viewLifecycleOwner) {
            // Set the data on the RecyclerView adapter
            adapter.setData(it)
            // Start the transition once all views have been
            // measured and laid out
            (view.parent as? ViewGroup)?.doOnPreDraw {
                startPostponedEnterTransition()
            }
        }
    }
}

জাভা

public class FragmentA extends Fragment {
    @Override
    public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {
        postponeEnterTransition();

        final ViewGroup parentView = (ViewGroup) view.getParent();
        // Wait for the data to load
        viewModel.getData()
            .observe(getViewLifecycleOwner(), new Observer<List<String>>() {
                @Override
                public void onChanged(List<String> list) {
                    // Set the data on the RecyclerView adapter
                    adapter.setData(it);
                    // Start the transition once all views have been
                    // measured and laid out
                    parentView.getViewTreeObserver()
                        .addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
                            @Override
                            public boolean onPreDraw(){
                                parentView.getViewTreeObserver()
                                        .removeOnPreDrawListener(this);
                                startPostponedEnterTransition();
                                return true;
                            }
                    });
                }
        });
    }
}

লক্ষ্য করুন যে ফ্র্যাগমেন্ট ভিউয়ের পেরেন্টে ViewTreeObserver.OnPreDrawListener সেট করা আছে। এটি নিশ্চিত করে যে সমস্ত ফ্র্যাগমেন্টের ভিউ পরিমাপ করা হয়েছে এবং সাজানো হয়েছে এবং তাই স্থগিত করা এন্টার ট্রানজিশন শুরু করার আগে আঁকার জন্য প্রস্তুত।

RecyclerView-এর সাথে শেয়ার করা এলিমেন্ট ট্রানজিশন ব্যবহার করার সময় আরেকটি বিষয় বিবেচনা করতে হবে, RecyclerView আইটেমের XML লেআউটে আপনি ট্রানজিশনের নাম সেট করতে পারবেন না, কারণ আইটেমের একটি ইচ্ছামতো সংখ্যা সেই লেআউট শেয়ার করে। একটি অনন্য ট্রানজিশন নাম অ্যাসাইন করতে হবে যাতে ট্রানজিশন অ্যানিমেশন সঠিক ভিউ ব্যবহার করে।

ViewHolder বাউন্ড করা থাকলে, প্রতিটি আইটেমের শেয়ার করা এলিমেন্টকে অ্যাসাইন করার মাধ্যমে আপনি সেটিকে একটি অনন্য ট্রানজিশন নাম দিতে পারেন। যেমন, প্রতিটি আইটেমের ডেটায় অনন্য আইডি থাকলে, সেটি ট্রানজিশনের নাম হিসেবে ব্যবহার করা যেতে পারে, যেমন নিচের উদাহরণে দেখানো হয়েছে:

Kotlin

class ExampleViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    val image = itemView.findViewById<ImageView>(R.id.item_image)

    fun bind(id: String) {
        ViewCompat.setTransitionName(image, id)
        ...
    }
}

জাভা

public class ExampleViewHolder extends RecyclerView.ViewHolder {
    private final ImageView image;

    ExampleViewHolder(View itemView) {
        super(itemView);
        image = itemView.findViewById(R.id.item_image);
    }

    public void bind(String id) {
        ViewCompat.setTransitionName(image, id);
        ...
    }
}

অতিরিক্ত রিসোর্স

ফ্র্যাগমেন্ট ট্রানজিশন সম্পর্কে আরও জানতে, নিম্নলিখিত অতিরিক্ত রিসোর্স দেখুন।

নমুনা

ব্লগ পোস্ট