पैरलॅक्स स्क्रोलिंग एक ऐसी तकनीक है जिसमें बैकग्राउंड कॉन्टेंट और फ़ोरग्राउंड कॉन्टेंट अलग-अलग स्पीड से स्क्रोल होता है. इस तकनीक को लागू करके, अपने ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को बेहतर बनाया जा सकता है. इससे, उपयोगकर्ताओं को स्क्रोल करते समय ज़्यादा डाइनैमिक अनुभव मिलता है.
वर्शन के साथ काम करना
इसे लागू करने के लिए, ज़रूरी है कि आपके प्रोजेक्ट का 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 डेवलपमेंट के बड़े लक्ष्यों के बारे में बताया गया है:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=hi)
सूची या ग्रिड दिखाना
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=hi)
इमेज दिखाएं
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=hi)