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

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

नतीजे

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

वर्शन के साथ काम करने वाली सुविधाएं

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

सवाल पूछें, सुझाव/राय दें या शिकायत करें

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