इस पेज का अनुवाद Cloud Translation API से किया गया है.

Compose में, पीछे जाने पर झलक दिखाने की सुविधा

जेस्चर नेविगेशन की सुविधा, 'पीछे जाने पर झलक दिखाने वाला हाथ का जेस्चर' है. इसकी मदद से, उपयोगकर्ताओं को यह झलक दिखती है कि स्क्रीन पर पीछे की ओर स्वाइप करने पर वे कहां पहुंचेंगे. आपके ऐप्लिकेशन के नेविगेशन अनुभव को बेहतर बनाने के लिए, अनुमानित बैक, Compose के साथ आसानी से इंटिग्रेट हो जाता है. आपके ऐप्लिकेशन में वापस जाने पर, उपयोगकर्ताओं को आसान और सहज ट्रांज़िशन का आनंद मिलता है. पहला इलस्ट्रेशन दिखाता है कि SociaLite सैंपल ऐप्लिकेशन में यह सुविधा कैसे काम करती है.

पहली इमेज. SociaLite के सैंपल ऐप्लिकेशन में, होम स्क्रीन पर वापस जाने का ऐनिमेशन.

इस गाइड में, अनुमानित बैकस्पेस की सुविधा का इस्तेमाल करके ये काम करने का तरीका बताया गया है:

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

'पीछे जाने पर झलक दिखाने वाला हाथ का जेस्चर' सुविधा के लिए ऑप्ट-इन करना

प्रिडिक्टिव बैक ऐनिमेशन चालू करने के लिए, आपको प्रिडिक्टिव बैक जेस्चर के लिए ऑप्ट-इन करना होगा. ऑप्ट-इन करने के लिए, अपनी AndroidManifest.xml फ़ाइल में <application> टैग या अलग-अलग <activity> टैग में android:enableOnBackInvokedCallback="true" जोड़ें.

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

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

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

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

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

नेविगेशन कंपोज की मदद से, प्रिडिक्टिव बैक की सुविधा चालू करना

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

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

दूसरी इमेज. 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,
)PredictiveBackSnippets.kt

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

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

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

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

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

चौथी इमेज. नेविगेशन कॉम्पोज़ में, सुझाव के हिसाब से वापस जाने की सुविधा के साथ शेयर किए गए एलिमेंट का ट्रांज़िशन.

नेविगेशन कंपोज़ के साथ शेयर किए गए एलिमेंट इस्तेमाल करने के लिए, शेयर किए गए एलिमेंट के साथ सुझाव देखें.

Material Compose कॉम्पोनेंट की मदद से, अनुमानित तौर पर वापस जाने की सुविधा

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

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

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

`PredictiveBackHandler` की मदद से, प्रोग्रेस को मैन्युअल तरीके से ऐक्सेस करना

Jetpack Compose में PredictiveBackHandler[5] कॉम्पोज़ेबल की मदद से, बैक जेस्चर को इंटरसेप्ट किया जा सकता है और उसकी प्रोग्रेस को ऐक्सेस किया जा सकता है. उपयोगकर्ता के बैक जेस्चर पर रीयल-टाइम में प्रतिक्रिया दी जा सकती है. इसके लिए, उपयोगकर्ता के स्वाइप करने के आधार पर कस्टम ऐनिमेशन या व्यवहार बनाए जा सकते हैं.

PredictiveBackHandler का इस्तेमाल करने के लिए, पक्का करें कि आपके पास androidx.activity:activity:1.6.0 या इसके बाद का वर्शन हो.

PredictiveBackHandler एक Flow<BackEventCompat> उपलब्ध कराता है, जो पिछले पेज पर जाने के जेस्चर की प्रोग्रेस दिखाने वाले इवेंट उत्सर्जित करता है. हर इवेंट में यह जानकारी शामिल होती है:

progress: यह 0 और 1 के बीच की फ़्लोट वैल्यू होती है. इससे यह पता चलता है कि बैक जेस्चर की प्रोग्रेस कैसी है (0 = जेस्चर शुरू हुआ, 1 = जेस्चर पूरा हुआ).
touchX और touchY: टच इवेंट के X और Y निर्देशांक.

इस स्निपेट में, PredictiveBackHandler के बुनियादी इस्तेमाल के बारे में बताया गया है:

PredictiveBackHandler(true) { progress: Flow<BackEventCompat> ->
    // code for gesture back started
    try {
        progress.collect { backEvent ->
            // code for progress
            boxScale = 1F - (1F * backEvent.progress)
        }
        // code for completion
        boxScale = 0F
    } catch (e: CancellationException) {
        // code for cancellation
        boxScale = 1F
    }
}PredictiveBackSnippets.kt

उदाहरण: नेविगेशन पैनल के साथ इंटिग्रेट करना

इस उदाहरण में, PredictiveBackHandler का इस्तेमाल करके ऐप्लिकेशन में कस्टम ऐनिमेशन लागू करने का तरीका बताया गया है. इससे JetLagged में, 'वापस जाएं' जेस्चर के जवाब में नेविगेशन ड्रॉअर के साथ आसानी से इंटरैक्ट किया जा सकता है:

पांचवीं इमेज. नेविगेशन पैनल, जिसमें पीछे जाने पर झलक दिखाने की सुविधा काम करती है.

इस उदाहरण में, PredictiveBackHandler का इस्तेमाल इन कामों के लिए किया गया है:

पिछले पेज पर जाने के जेस्चर की प्रोग्रेस को ट्रैक करना.
जेस्चर की प्रोग्रेस के आधार पर, ड्रॉअर के translationX को अपडेट करें.
जेस्चर पूरा होने या रद्द होने पर, जेस्चर की रफ़्तार के आधार पर, velocityTracker का इस्तेमाल करके ड्रॉअर को आसानी से खोलें या बंद करें.

पीछे जाने के लिए हाथ के जेस्चर के ऐनिमेशन की जांच करना

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

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

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

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