व्यू में, पीछे जाने पर झलक दिखाने वाले हाथ के जेस्चर के ऐनिमेशन की सुविधा जोड़ी गई

Views या Compose का इस्तेमाल करके, ऐप्लिकेशन में मौजूद प्रॉपर्टी के लिए, अपनी पसंद के मुताबिक ऐनिमेशन और ट्रांज़िशन बनाए जा सकते हैं. साथ ही, ऐक्टिविटी के बीच ट्रांज़िशन के लिए, अपनी पसंद के मुताबिक ऐनिमेशन बनाए जा सकते हैं. इसके अलावा, पीछे जाने पर झलक दिखाने की सुविधा से, फ़्रैगमेंट के बीच ट्रांज़िशन के लिए अपनी पसंद के मुताबिक ऐनिमेशन बनाए जा सकते हैं. Compose का इस्तेमाल करके, पीछे जाने पर झलक दिखाने की सुविधा आज़माने के लिए, पीछे जाने पर झलक दिखाने वाले ऐनिमेशन की सुविधा जोड़ना लेख पढ़ें.

Progress API का इस्तेमाल करके कस्टम ट्रांज़िशन जोड़ना

AndroidX Activity 1.8.0-alpha01 या इसके बाद के वर्शन के साथ, पीछे जाने पर झलक दिखाने वाले प्रोग्रेस एपीआई का इस्तेमाल किया जा सकता है. इससे, अपने ऐप्लिकेशन में पीछे जाने पर झलक दिखाने वाले जेस्चर के लिए, कस्टम ऐनिमेशन बनाए जा सकते हैं. प्रोग्रेस एपीआई, व्यू को ऐनिमेट करने में मददगार होते हैं. हालांकि, फ़्रैगमेंट के बीच ट्रांज़िशन को ऐनिमेट करते समय इनकी कुछ सीमाएं होती हैं. हमने OnBackPressedCallback में handleOnBackProgressed, handleOnBackCancelled, और handleOnBackStarted मेथड जोड़े हैं. इनकी मदद से, उपयोगकर्ता के स्वाइप करके वापस जाने के दौरान ऑब्जेक्ट में ऐनिमेशन जोड़ा जा सकता है. अगर आपको सिस्टम या Material कॉम्पोनेंट के डिफ़ॉल्ट ऐनिमेशन के अलावा, ज़्यादा ऐनिमेशन को पसंद के मुताबिक बनाना है, तो इन तरीकों का इस्तेमाल करें.

हमें उम्मीद है कि ज़्यादातर ऐप्लिकेशन, पुराने सिस्टम के साथ काम करने वाले AndroidX एपीआई का इस्तेमाल करेंगे. हालांकि, OnBackAnimationCallback इंटरफ़ेस में भी इसी तरह के प्लैटफ़ॉर्म एपीआई उपलब्ध हैं. इनका इस्तेमाल, Android 14 और इसके बाद के वर्शन में किया जा सकता है.

AndroidX Transitions के साथ प्रोग्रेस एपीआई का इस्तेमाल करना

प्रोग्रेस एपीआई का इस्तेमाल, Android 14 और इसके बाद के वर्शन पर AndroidX Transitions 1.5.0-alpha01 या इसके बाद के वर्शन के साथ किया जा सकता है. इससे, पीछे जाने पर झलक दिखाने वाले ट्रांज़िशन बनाए जा सकते हैं.

  1. जब उपयोगकर्ता वापस स्वाइप करता है, तब ट्रांज़िशन चलाने के लिए beginDelayedTransition के बजाय TransitionManager#controlDelayedTransition का इस्तेमाल करें.
  2. handleOnBackStarted में ट्रांज़िशन बनाएं.
  3. handleOnBackProgressed में, बैक इवेंट के साथ ट्रांज़िशन चलाएं. इसके लिए, currentFraction को BackEvent.progress से जोड़ें. इससे पता चलता है कि उपयोगकर्ता ने कितनी बार स्वाइप किया है.
  4. उपयोगकर्ता के handleOnBackPressed में बैक जेस्चर करने के बाद, ट्रांज़िशन पूरा करें.
  5. आखिर में, handleOnBackCancelled में ट्रांज़िशन की स्थिति को रीसेट करें.

इस वीडियो, Kotlin कोड, और एक्सएमएल में, OnBackPressedCallback का इस्तेमाल करके लागू किए गए दो बॉक्स के बीच कस्टम ट्रांज़िशन दिखाया गया है:

    class MyFragment : Fragment() {

    val transitionSet = TransitionSet().apply {
        addTransition(Fade(Fade.MODE_OUT))
        addTransition(ChangeBounds())
        addTransition(Fade(Fade.MODE_IN))
    }
    ...
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val callback = object : OnBackPressedCallback(enabled = false) {

            var controller: TransitionSeekController? = null

            @RequiresApi(34)
            override fun handleOnBackStarted(backEvent: BackEvent) {
                // Create the transition
                controller = TransitionManager.controlDelayedTransition(
                    binding.card,
                    transitionSet
                )
                changeTextVisibility(ShowText.SHORT)
            }

            @RequiresApi(34)
            override fun handleOnBackProgressed(backEvent: BackEvent) {
                // Play the transition as the user swipes back
                if (controller?.isReady == true) {
                    controller?.currentFraction = backEvent.progress
                }
            }

            override fun handleOnBackPressed() {
                // Finish playing the transition when the user commits back
                controller?.animateToEnd()
                this.isEnabled = false
            }

            @RequiresApi(34)
            override fun handleOnBackCancelled() {
                // If the user cancels the back gesture, reset the state
                transition(ShowText.LONG)
            }
        }

        binding.shortText.setOnClickListener {
            transition(ShowText.LONG)
            callback.isEnabled = true
        }

        this.requireActivity().onBackPressedDispatcher.addCallback(callback)
    }

    private fun transition(showText: ShowText) {
        TransitionManager.beginDelayedTransition(
            binding.card,
            transitionSet
        )
        changeTextVisibility(showText)
    }

    enum class ShowText { SHORT, LONG }
    private fun changeTextVisibility(showText: ShowText) {
        when (showText) {
            ShowText.SHORT -> {
                binding.shortText.isVisible = true
                binding.longText.isVisible = false
            }
            ShowText.LONG -> {
                binding.shortText.isVisible = false
                binding.longText.isVisible = true
            }
        }
    }
}
  
<?xml version="1.0" encoding="utf-8"?>
...
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...>

        <TextView
            android:id="@+id/short_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            ... />

        <TextView
            android:id="@+id/long_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"
            .../>

    </androidx.constraintlayout.widget.ConstraintLayout>

पीछे जाने पर झलक दिखाने वाले ट्रांज़िशन के साथ काम करते समय, इन बातों का ध्यान रखें:

  • isSeekingSupported का इस्तेमाल करके देखें कि ट्रांज़िशन में, पीछे जाने की झलक दिखाने वाली सुविधा काम करती है या नहीं.
  • कस्टम ट्रांज़िशन में, सही वैल्यू दिखाने के लिए isSeekingSupported को बदलें.
  • हर ऐनिमेशन के लिए एक कंट्रोलर बनाएं.
  • AndroidX ट्रांज़िशन के साथ, पीछे जाने पर झलक दिखाने वाले ट्रांज़िशन की सुविधा काम करती है. हालांकि, फ़्रेमवर्क ट्रांज़िशन के साथ यह सुविधा काम नहीं करती. फ़्रेमवर्क ट्रांज़िशन से माइग्रेट करें. इसके बजाय, Animator और AndroidX ट्रांज़िशन का इस्तेमाल करें.
  • पीछे जाने पर झलक दिखाने वाले ट्रांज़िशन की सुविधा, Android 14 और इसके बाद के वर्शन वाले डिवाइसों पर काम करती है. यह सुविधा, Android के पुराने वर्शन पर काम नहीं करती.
  • एक्सएमएल सीन की मदद से बनाए गए ट्रांज़िशन भी काम करते हैं. handleOnBackStarted में, controlDelayedTransition के नतीजे के बजाय TransitionManager.createSeekController के नतीजे पर TransitionSeekController सेट करें.

अतिरिक्त संसाधन