'नीचे खींचकर रीफ़्रेश करें' सुविधा की मदद से, उपयोगकर्ता किसी ऐप्लिकेशन के कॉन्टेंट को नीचे की ओर खींचकर डेटा रीफ़्रेश कर सकते हैं.
एपीआई सरफेस
पुल-टू-रिफ़्रेश की सुविधा लागू करने के लिए, PullToRefreshBox
कंपोज़ेबल का इस्तेमाल करें. यह स्क्रोल किए जा सकने वाले कॉन्टेंट के लिए कंटेनर के तौर पर काम करता है. ये मुख्य पैरामीटर, रीफ़्रेश होने की प्रोसेस और दिखने के तरीके को कंट्रोल करते हैं:
isRefreshing
: यह एक बूलियन वैल्यू है. इससे पता चलता है कि रीफ़्रेश करने की प्रोसेस चल रही है या नहीं.onRefresh
: यह एक लैम्डा फ़ंक्शन है, जो उपयोगकर्ता के रीफ़्रेश करने पर काम करता है.indicator
: इससे उस इंडिकेटर को पसंद के मुताबिक बनाया जाता है जिसे सिस्टम, पुल-टू-रीफ़्रेश पर दिखाता है.
बुनियादी उदाहरण
इस स्निपेट में, PullToRefreshBox
के बुनियादी इस्तेमाल के बारे में बताया गया है:
@Composable fun PullToRefreshBasicSample( items: List<String>, isRefreshing: Boolean, onRefresh: () -> Unit, modifier: Modifier = Modifier ) { PullToRefreshBox( isRefreshing = isRefreshing, onRefresh = onRefresh, modifier = modifier ) { LazyColumn(Modifier.fillMaxSize()) { items(items) { ListItem({ Text(text = it) }) } } } }
कोड के बारे में अहम जानकारी
PullToRefreshBox
,LazyColumn
को रैप करता है. इससे स्ट्रिंग की सूची दिखती है.PullToRefreshBox
के लिए,isRefreshing
औरonRefresh
पैरामीटर ज़रूरी हैं.PullToRefreshBox
ब्लॉक में मौजूद कॉन्टेंट, स्क्रोल किए जा सकने वाले कॉन्टेंट को दिखाता है.
नतीजा
इस वीडियो में, ऊपर दिए गए कोड से पुल-टू-रिफ़्रेश सुविधा को लागू करने का तरीका दिखाया गया है:
ऐडवांस उदाहरण: इंडिकेटर के रंग को पसंद के मुताबिक बनाना
@Composable fun PullToRefreshCustomStyleSample( items: List<String>, isRefreshing: Boolean, onRefresh: () -> Unit, modifier: Modifier = Modifier ) { val state = rememberPullToRefreshState() PullToRefreshBox( isRefreshing = isRefreshing, onRefresh = onRefresh, modifier = modifier, state = state, indicator = { Indicator( modifier = Modifier.align(Alignment.TopCenter), isRefreshing = isRefreshing, containerColor = MaterialTheme.colorScheme.primaryContainer, color = MaterialTheme.colorScheme.onPrimaryContainer, state = state ) }, ) { LazyColumn(Modifier.fillMaxSize()) { items(items) { ListItem({ Text(text = it) }) } } } }
कोड के बारे में अहम जानकारी
indicator
पैरामीटर में मौजूदcontainerColor
औरcolor
प्रॉपर्टी की मदद से, इंडिकेटर के रंग को पसंद के मुताबिक बनाया जाता है.rememberPullToRefreshState()
रीफ़्रेश करने की कार्रवाई की स्थिति को मैनेज करता है. इस स्थिति का इस्तेमाल,indicator
पैरामीटर के साथ किया जाता है.
नतीजा
इस वीडियो में, रंगीन इंडिकेटर के साथ पुल-टू-रिफ़्रेश सुविधा को लागू करने का तरीका दिखाया गया है:
ऐडवांस उदाहरण: पूरी तरह से कस्टम इंडिकेटर बनाना
मौजूदा कंपोज़ेबल और ऐनिमेशन का इस्तेमाल करके, जटिल कस्टम इंडिकेटर बनाए जा सकते हैं.इस स्निपेट में, पुल-टू-रिफ़्रेश सुविधा को लागू करने के दौरान, पूरी तरह से कस्टम इंडिकेटर बनाने का तरीका बताया गया है:
@Composable fun PullToRefreshCustomIndicatorSample( items: List<String>, isRefreshing: Boolean, onRefresh: () -> Unit, modifier: Modifier = Modifier ) { val state = rememberPullToRefreshState() PullToRefreshBox( isRefreshing = isRefreshing, onRefresh = onRefresh, modifier = modifier, state = state, indicator = { MyCustomIndicator( state = state, isRefreshing = isRefreshing, modifier = Modifier.align(Alignment.TopCenter) ) } ) { LazyColumn(Modifier.fillMaxSize()) { items(items) { ListItem({ Text(text = it) }) } } } } // ... @Composable fun MyCustomIndicator( state: PullToRefreshState, isRefreshing: Boolean, modifier: Modifier = Modifier, ) { Box( modifier = modifier.pullToRefreshIndicator( state = state, isRefreshing = isRefreshing, containerColor = PullToRefreshDefaults.containerColor, threshold = PositionalThreshold ), contentAlignment = Alignment.Center ) { Crossfade( targetState = isRefreshing, animationSpec = tween(durationMillis = CROSSFADE_DURATION_MILLIS), modifier = Modifier.align(Alignment.Center) ) { refreshing -> if (refreshing) { CircularProgressIndicator(Modifier.size(SPINNER_SIZE)) } else { val distanceFraction = { state.distanceFraction.coerceIn(0f, 1f) } Icon( imageVector = Icons.Filled.CloudDownload, contentDescription = "Refresh", modifier = Modifier .size(18.dp) .graphicsLayer { val progress = distanceFraction() this.alpha = progress this.scaleX = progress this.scaleY = progress } ) } } } }
कोड के बारे में अहम जानकारी
- पिछले स्निपेट में, लाइब्रेरी से मिले
Indicator
का इस्तेमाल किया गया था. इस स्निपेट से,MyCustomIndicator
नाम का कस्टम इंडिकेटर कंपोज़ेबल बनाया जाता है. इस कॉम्पोज़ेबल में,pullToRefreshIndicator
मॉडिफ़ायर, रीफ़्रेश करने की सुविधा को चालू करने और उसकी पोज़िशन को मैनेज करता है. - पिछले स्निपेट की तरह, इस उदाहरण में
PullToRefreshState
इंस्टेंस को एक्सट्रैक्ट किया गया है, ताकिPullToRefreshBox
औरpullToRefreshModifier
, दोनों को एक ही इंस्टेंस पास किया जा सके. - इस उदाहरण में,
PullToRefreshDefaults
क्लास से कंटेनर के रंग और पोज़िशन थ्रेशोल्ड का इस्तेमाल किया गया है. इस तरह, Material लाइब्रेरी के डिफ़ॉल्ट व्यवहार और स्टाइल का फिर से इस्तेमाल किया जा सकता है. साथ ही, सिर्फ़ उन एलिमेंट को पसंद के मुताबिक बनाया जा सकता है जिनमें आपकी दिलचस्पी है. MyCustomIndicator
, क्लाउड आइकॉन औरCircularProgressIndicator
के बीच ट्रांज़िशन के लिएCrossfade
का इस्तेमाल करता है. उपयोगकर्ता के खींचने पर, क्लाउड आइकॉन बड़ा होता है. इसके बाद, रीफ़्रेश करने की प्रोसेस शुरू होने पर, यहCircularProgressIndicator
में बदल जाता है.targetState
,isRefreshing
का इस्तेमाल करके यह तय करता है कि कौनसी स्थिति दिखानी है. जैसे, क्लाउड आइकॉन या गतिविधि की स्थिति सर्कुलर फ़ॉर्मैट में दिखाने वाला इंडिकेटर.animationSpec
ट्रांज़िशन के लिएtween
ऐनिमेशन तय करता है. इसकी अवधिCROSSFADE_DURATION_MILLIS
होती है.state.distanceFraction
से पता चलता है कि उपयोगकर्ता ने स्क्रीन को कितना नीचे खींचा है. इसकी रेंज0f
(नीचे नहीं खींचा गया) से लेकर1f
(पूरी तरह से नीचे खींचा गया) तक होती है.graphicsLayer
मॉडिफ़ायर, स्केल और पारदर्शिता में बदलाव करता है.
नतीजा
इस वीडियो में, ऊपर दिए गए कोड से बनाया गया कस्टम इंडिकेटर दिखाया गया है: