नीचे खींचकर रीफ़्रेश करें

'नीचे खींचकर रीफ़्रेश करें' सुविधा की मदद से, उपयोगकर्ता किसी ऐप्लिकेशन के कॉन्टेंट को नीचे की ओर खींचकर डेटा रीफ़्रेश कर सकते हैं.

एपीआई सरफ़ेस

पुल-टू-रीफ़्रेश की सुविधा लागू करने के लिए, 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.kt

कोड के बारे में मुख्य बातें

  • 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) })
            }
        }
    }
}
PullToRefreshBox.kt

कोड के बारे में मुख्य बातें

  • 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.pullToRefresh(
            state = state,
            isRefreshing = isRefreshing,
            threshold = PositionalThreshold,
            onRefresh = {

            }
        ),
        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
                        }
                )
            }
        }
    }
}
PullToRefreshBox.kt

कोड के बारे में मुख्य बातें

  • पिछले स्निपेट में, लाइब्रेरी से मिले Indicator का इस्तेमाल किया गया था. इस स्निपेट से, MyCustomIndicator नाम का कस्टम इंडिकेटर कंपोज़ेबल बनाया जाता है. इस कॉम्पोज़ेबल में, pullToRefreshIndicator मॉडिफ़ायर, रीफ़्रेश करने की सुविधा को चालू करने और उसकी पोज़िशन तय करने का काम करता है.
  • पिछले स्निपेट की तरह, इस उदाहरण में PullToRefreshState इंस्टेंस को एक्सट्रैक्ट किया गया है. इसलिए, PullToRefreshBox और pullToRefreshModifier, दोनों को एक ही इंस्टेंस पास किया जा सकता है.
  • इस उदाहरण में, PullToRefreshDefaults क्लास से कंटेनर के रंग और पोज़िशन थ्रेशोल्ड का इस्तेमाल किया गया है. इस तरह, Material लाइब्रेरी के डिफ़ॉल्ट व्यवहार और स्टाइल का फिर से इस्तेमाल किया जा सकता है. साथ ही, सिर्फ़ उन एलिमेंट को पसंद के मुताबिक बनाया जा सकता है जिनमें आपकी दिलचस्पी है.
  • MyCustomIndicator, क्लाउड आइकॉन और CircularProgressIndicator के बीच ट्रांज़िशन के लिए Crossfade का इस्तेमाल करता है. उपयोगकर्ता के खींचने पर, क्लाउड आइकॉन बड़ा होता है. इसके बाद, रीफ़्रेश करने की प्रोसेस शुरू होने पर, यह CircularProgressIndicator में बदल जाता है.
    • targetState, isRefreshing का इस्तेमाल करके यह तय करता है कि कौनसी स्थिति दिखानी है. जैसे, क्लाउड आइकॉन या गतिविधि की स्थिति सर्कुलर फ़ॉर्मैट में दिखाने वाला इंडिकेटर.
    • animationSpec ट्रांज़िशन के लिए tween ऐनिमेशन तय करता है. इसकी अवधि CROSSFADE_DURATION_MILLIS होती है.
    • state.distanceFraction से पता चलता है कि उपयोगकर्ता ने स्क्रीन को कितना नीचे खींचा है. इसकी रेंज 0f (नीचे नहीं खींचा गया) से लेकर 1f (पूरी तरह से नीचे खींचा गया) तक होती है.
    • graphicsLayer मॉडिफ़ायर, स्केल और पारदर्शिता में बदलाव करता है.

नतीजा

इस वीडियो में, ऊपर दिए गए कोड से कस्टम इंडिकेटर दिखाया गया है:

तीसरी इमेज. कस्टम इंडिकेटर के साथ पुल-टू-रिफ़्रेश सुविधा लागू करने का उदाहरण.

अन्य संसाधन