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

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

पीछे जाने पर होम स्क्रीन की झलक दिखाने वाला ऐनिमेशन.
अलग-अलग गतिविधि वाला ऐनिमेशन.
अलग-अलग टास्क के लिए, पीछे जाने पर झलक दिखाने वाला ऐनिमेशन.

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

होम पेज पर वापस जाने, ऐप्लिकेशन में मौजूद अलग-अलग गतिविधि देखने, और अलग-अलग ऐप्लिकेशन पर काम करने से जुड़े सिस्टम ऐनिमेशन, 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 पर लागू होने पर, ये मॉडिफ़ायर आपको यह तय करने की सुविधा देते हैं कि एंटर और एग्ज़िट स्क्रीन कैसे ऐनिमेट होंगी. इनका इस्तेमाल करके, कई तरह के इफ़ेक्ट बनाए जा सकते हैं. जैसे, स्केल करना, फ़ेड करना या स्लाइड करना.

इस उदाहरण में, scaleOut का इस्तेमाल popExitTransition में किया गया है, ताकि उपयोगकर्ता के वापस जाने पर, मौजूदा स्क्रीन को छोटा किया जा सके. इसके अलावा, 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 और इसके बाद के वर्शन पर, यह सुविधा डिफ़ॉल्ट रूप से चालू रहती है.

अन्य संसाधन