'पीछे जाने पर झलक दिखाने वाला हाथ का जेस्चर' सेट अप करना

प्रिडिक्टिव बैक और सिस्टम ऐनिमेशन की सुविधा, डिफ़ॉल्ट रूप से चालू होती है. अगर आपका ऐप्लिकेशन, बैक इवेंट को इंटरसेप्ट करता है और आपने अनुमानित बैक नेविगेशन पर माइग्रेट नहीं किया है, तो बैक नेविगेशन के लिए काम करने वाले एपीआई का इस्तेमाल करने के लिए, अपने ऐप्लिकेशन को अपडेट करें

प्रिडिक्टिव बैक-टू-होम ऐनिमेशन.
प्रिडिक्टिव क्रॉस-ऐक्टिविटी ऐनिमेशन.
प्रिडिक्टिव क्रॉस-टास्क ऐनिमेशन.

सिस्टम के डिफ़ॉल्ट ऐनिमेशन चालू करना

बैक-टू-होम, क्रॉस-ऐक्टिविटी, और क्रॉस-टास्क सिस्टम ऐनिमेशन, Android 15 और उसके बाद के वर्शन वाले डिवाइसों पर उपलब्ध हैं. ये ऐनिमेशन, उन ऐप्लिकेशन के लिए उपलब्ध हैं जो बैक हैंडलिंग के लिए उपलब्ध एपीआई पर माइग्रेट हो चुके हैं.

  • होम स्क्रीन पर वापस जाएं: इससे उपयोगकर्ता को होम स्क्रीन पर वापस ले जाया जाता है.
  • क्रॉस-ऐक्टिविटी: ऐप्लिकेशन में एक ऐक्टिविटी से दूसरी ऐक्टिविटी पर ट्रांज़िशन.
  • क्रॉस-टास्क: टास्क के बीच ट्रांज़िशन.

ये ऐनिमेशन, Android 15 और इसके बाद के वर्शन पर डिफ़ॉल्ट रूप से चालू होते हैं. Android 13 या 14 पर काम करने वाले डिवाइसों पर, उपयोगकर्ता इन्हें डेवलपर के लिए बनी सेटिंग और टूल के ज़रिए चालू कर सकते हैं.

सिस्टम ऐनिमेशन पाने के लिए, AndroidX Activity डिपेंडेंसी को 1.6.0 या इसके बाद के वर्शन पर अपडेट करें.

Navigation Compose के साथ प्रिडिक्टिव बैक की सुविधा चालू करना

Navigation Compose में अनुमानित बैक सुविधा का इस्तेमाल करने के लिए, पक्का करें कि navigation-compose 2.8.0 या इसके बाद के वर्शन वाली लाइब्रेरी का इस्तेमाल किया जा रहा हो.

जब उपयोगकर्ता वापस स्वाइप करता है, तो Navigation Compose, स्क्रीन के बीच अपने-आप क्रॉस-फ़ेड हो जाता है:

दूसरी इमेज. SociaLite में, ऐप्लिकेशन में दिखने वाला डिफ़ॉल्ट क्रॉसफ़ेड ऐनिमेशन.

नेविगेट करते समय, popEnterTransition और popExitTransition की मदद से, अपनी पसंद के मुताबिक ट्रांज़िशन बनाए जा सकते हैं. इन मॉडिफ़ायर को NavHost पर लागू करने से, यह तय किया जा सकता है कि एंट्री और एग्ज़िट स्क्रीन किस तरह ऐनिमेट होंगी. इनका इस्तेमाल अलग-अलग तरह के इफ़ेक्ट बनाने के लिए किया जा सकता है. जैसे, स्केल करना, फ़ेड करना या स्लाइड करना.

इस उदाहरण में, popExitTransition के अंदर scaleOut का इस्तेमाल किया गया है. इससे, जब उपयोगकर्ता वापस जाता है, तो स्क्रीन का साइज़ कम हो जाता है. इसके अलावा, transformOrigin पैरामीटर यह तय करता है कि किस पॉइंट के आस-पास स्केलिंग ऐनिमेशन होगा. डिफ़ॉल्ट रूप से, यह स्क्रीन का सेंटर (0.5f, 0.5f) होता है. इस वैल्यू में बदलाव करके, स्केलिंग को किसी दूसरे पॉइंट से शुरू किया जा सकता है.

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)

इस कोड से यह नतीजा मिलता है:

तीसरी इमेज. SociaLite में कस्टम इन-ऐप्लिकेशन ऐनिमेशन.

popEnterTransition और popExitTransition, खास तौर पर बैक स्टैक को पॉप करते समय ऐनिमेशन को कंट्रोल करते हैं. जैसे, पीछे जाने का जेस्चर. enterTransition और exitTransition का इस्तेमाल, सामान्य तौर पर कंपोज़ेबल में एंट्री और एग्ज़िट के लिए ऐनिमेशन तय करने के लिए भी किया जा सकता है. इनका इस्तेमाल सिर्फ़ अनुमानित बैक के लिए नहीं किया जाता. अगर आपने सिर्फ़ enterTransition और exitTransition सेट किए हैं, तो इनका इस्तेमाल सामान्य नेविगेशन और बैक स्टैक को पॉप करने, दोनों के लिए किया जाता है. हालांकि, popEnterTransition और popExitTransition का इस्तेमाल करके, वापस जाने के लिए अलग-अलग ऐनिमेशन बनाए जा सकते हैं.

शेयर किए गए एलिमेंट के ट्रांज़िशन के साथ इंटिग्रेट करना

शेयर्ड एलिमेंट ट्रांज़िशन, एक जैसा कॉन्टेंट शेयर करने वाले कंपोज़ेबल के बीच विज़ुअल कनेक्शन को बेहतर बनाते हैं. इनका इस्तेमाल अक्सर नेविगेशन के लिए किया जाता है.

चौथी इमेज. Navigation Compose में, अनुमान लगाने वाली सुविधा के साथ शेयर किए गए एलिमेंट का ट्रांज़िशन.

Navigation Compose के साथ शेयर किए गए एलिमेंट का इस्तेमाल करने के लिए, शेयर किए गए एलिमेंट के साथ अनुमानित बैक ऐनिमेशन देखें.

Material Compose कॉम्पोनेंट के साथ, अनुमानित बैक बटन की सुविधा काम करती है

Material Compose लाइब्रेरी में मौजूद कई कॉम्पोनेंट, अनुमान लगाने वाले बैक जेस्चर के साथ आसानी से काम करने के लिए डिज़ाइन किए गए हैं. इन कॉम्पोनेंट में, अनुमान लगाकर बैक ऐनिमेशन दिखाने की सुविधा चालू करने के लिए, अपने प्रोजेक्ट में Material3 की नई डिपेंडेंसी (androidx.compose.material3:material3-*:1.3.0 या उसके बाद का वर्शन) शामिल करें.

प्रिडिक्टिव बैक ऐनिमेशन की सुविधा देने वाले मटीरियल कॉम्पोनेंट में ये शामिल हैं:

SearchBar और ModalBottomSheet, प्रिडिक्टिव बैक जेस्चर के साथ अपने-आप ऐनिमेट होते हैं. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet, और DismissibleNavigationDrawer के लिए, आपको drawerState को उनके शीट कॉन्टेंट कंपोज़ेबल में पास करना होगा.

प्रिडिक्टिव बैक जेस्चर ऐनिमेशन की जांच करना

अगर अब भी Android 13 या Android 14 का इस्तेमाल किया जा रहा है, तो होम स्क्रीन पर वापस जाने वाले ऐनिमेशन को टेस्ट किया जा सकता है.

इस ऐनिमेशन को आज़माने के लिए, यह तरीका अपनाएं:

  1. अपने डिवाइस पर, सेटिंग > सिस्टम > डेवलपर के लिए सेटिंग और टूल पर जाएं.
  2. प्रिडिक्टिव बैक ऐनिमेशन चुनें.
  3. अपडेट किया गया ऐप्लिकेशन लॉन्च करें और बैक जेस्चर का इस्तेमाल करके देखें कि यह सुविधा काम कर रही है या नहीं.

Android 15 और इसके बाद के वर्शन पर, यह सुविधा डिफ़ॉल्ट रूप से चालू होती है.

अन्य संसाधन