पैरलॅक्स स्क्रोलिंग इफ़ेक्ट बनाना

पैरलॅक्स स्क्रोलिंग एक ऐसी तकनीक है जिसमें बैकग्राउंड कॉन्टेंट और फ़ोरग्राउंड कॉन्टेंट अलग-अलग स्पीड से स्क्रोल होता है. इस तकनीक को लागू करके, अपने ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को बेहतर बनाया जा सकता है. इससे, उपयोगकर्ताओं को स्क्रोल करते समय ज़्यादा डाइनैमिक अनुभव मिलता है.

वर्शन के साथ काम करना

इसे लागू करने के लिए, ज़रूरी है कि आपके प्रोजेक्ट का minSDK एपीआई लेवल 21 या उससे ज़्यादा पर सेट हो.

डिपेंडेंसी

पैरलॅक्स इफ़ेक्ट बनाना

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

@Composable
fun ParallaxEffect() {
    fun Modifier.parallaxLayoutModifier(scrollState: ScrollState, rate: Int) =
        layout { measurable, constraints ->
            val placeable = measurable.measure(constraints)
            val height = if (rate > 0) scrollState.value / rate else scrollState.value
            layout(placeable.width, placeable.height) {
                placeable.place(0, height)
            }
        }

    val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .verticalScroll(scrollState),
    ) {

        Image(
            painterResource(id = R.drawable.cupcake),
            contentDescription = "Android logo",
            contentScale = ContentScale.Fit,
            // Reduce scrolling rate by half.
            modifier = Modifier.parallaxLayoutModifier(scrollState, 2)
        )

        Text(
            text = stringResource(R.string.detail_placeholder),
            modifier = Modifier
                .background(Color.White)
                .padding(horizontal = 8.dp),

        )
    }
}

कोड के बारे में अहम जानकारी

  • कंपोज किए जा सकने वाले एलिमेंट के स्क्रोल होने की दर में बदलाव करने के लिए, कस्टम layout मॉडिफ़ायर बनाता है.
  • Image, Text की तुलना में धीमी स्पीड से स्क्रोल करता है. इससे पैरलॅक्स इफ़ेक्ट दिखता है, क्योंकि दोनों कॉम्पोज़ेबल वर्टिकल तौर पर अलग-अलग स्पीड से ट्रांसलेट होते हैं.

नतीजे

पहली इमेज. पैरलॅक्स इफ़ेक्ट वाली स्क्रोलिंग लिस्ट.

ऐसे संग्रह जिनमें यह गाइड शामिल है

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

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

क्या आपका कोई सवाल है या सुझाव/राय देनी है

अक्सर पूछे जाने वाले सवालों के पेज पर जाएं और क्विक गाइड के बारे में जानें. इसके अलावा, हमसे संपर्क करके अपने सुझाव/राय दें.