गतिविधि की स्थिति दिखाने वाले इंडिकेटर

प्रोग्रेस इंडिकेटर, किसी कार्रवाई की स्थिति को विज़ुअल तौर पर दिखाते हैं. वे मोशन का इस्तेमाल करके, उपयोगकर्ता का ध्यान इस बात पर खींचते हैं कि प्रोसेस पूरी होने में कितना समय बचा है. जैसे, डेटा लोड होने या प्रोसेस होने में कितना समय बचा है. इससे यह भी पता चलता है कि प्रोसेस जारी है. हालांकि, यह नहीं पता चलता कि प्रोसेस पूरी होने में कितना समय लगेगा.

इन तीन स्थितियों में, प्रोग्रेस इंडिकेटर का इस्तेमाल किया जा सकता है:

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

मटीरियल डिज़ाइन में, प्रोग्रेस दिखाने वाले दो तरह के इंडिकेटर होते हैं:

  • तय: इससे पता चलता है कि कितनी प्रोग्रेस हुई है.
  • अनिश्चित: प्रोग्रेस की परवाह किए बिना लगातार ऐनिमेट होता है.

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

  • लीनियर: यह एक हॉरिज़ॉन्टल बार होता है, जो बाईं से दाईं ओर भरता है.
  • सर्कुलर: एक सर्कल, जिसका स्ट्रोक तब तक बढ़ता है, जब तक कि वह सर्कल की पूरी परिधि को कवर न कर ले.
लीनियर प्रोग्रेस इंडिकेटर के साथ सर्कुलर प्रोग्रेस इंडिकेटर.
पहली इमेज. प्रोग्रेस दिखाने वाले दो तरह के इंडिकेटर.

एपीआई सरफ़ेस

मटीरियल डिज़ाइन के मुताबिक प्रोग्रेस इंडिकेटर बनाने के लिए, कई कंपोज़ेबल का इस्तेमाल किया जा सकता है. हालांकि, उनके पैरामीटर में ज़्यादा अंतर नहीं होता. आपको इन मुख्य पैरामीटर का ध्यान रखना चाहिए:

  • progress: इंडिकेटर से दिखने वाली मौजूदा प्रोग्रेस. 0.0 और 1.0 के बीच की कोई Float पास करें.
  • color: असल इंडिकेटर का रंग. यानी कि कॉम्पोनेंट का वह हिस्सा जो प्रोग्रेस दिखाता है और प्रोग्रेस पूरी होने पर कॉम्पोनेंट को पूरी तरह से कवर कर लेता है.
  • trackColor: ट्रैक का रंग, जिस पर इंडिकेटर बनाया गया है.

डिटरमिनेट इंडिकेटर

तय इंडिकेटर से पता चलता है कि कोई कार्रवाई कितनी पूरी हुई है. LinearProgressIndicator या CircularProgressIndicator कंपोज़ेबल का इस्तेमाल करें और progress पैरामीटर के लिए कोई वैल्यू पास करें.

यहां दिए गए स्निपेट में, ज़्यादा जानकारी वाला उदाहरण दिया गया है. जब उपयोगकर्ता बटन दबाता है, तो ऐप्लिकेशन प्रोग्रेस इंडिकेटर दिखाता है और एक कोरूटीन लॉन्च करता है, जो progress की वैल्यू को धीरे-धीरे बढ़ाता है. इससे प्रोग्रेस इंडिकेटर, एक-एक करके आगे बढ़ता है.

@Composable
fun LinearDeterminateIndicator() {
    var currentProgress by remember { mutableFloatStateOf(0f) }
    var loading by remember { mutableStateOf(false) }
    val scope = rememberCoroutineScope() // Create a coroutine scope

    Column(
        verticalArrangement = Arrangement.spacedBy(12.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        Button(onClick = {
            loading = true
            scope.launch {
                loadProgress { progress ->
                    currentProgress = progress
                }
                loading = false // Reset loading when the coroutine finishes
            }
        }, enabled = !loading) {
            Text("Start loading")
        }

        if (loading) {
            LinearProgressIndicator(
                progress = { currentProgress },
                modifier = Modifier.fillMaxWidth(),
            )
        }
    }
}

/** Iterate the progress value */
suspend fun loadProgress(updateProgress: (Float) -> Unit) {
    for (i in 1..100) {
        updateProgress(i.toFloat() / 100)
        delay(100)
    }
}

जब लोडिंग कुछ हद तक पूरी हो जाती है, तो पिछले उदाहरण में दिया गया लीनियर इंडिकेटर इस तरह दिखता है:

इसी तरह, सर्कुलर इंडिकेटर इस तरह दिखता है:

अनिश्चित इंडिकेटर

अनिश्चित इंडिकेटर से यह पता नहीं चलता कि कोई कार्रवाई पूरी होने के कितने करीब है. इसके बजाय, यह मोशन का इस्तेमाल करके उपयोगकर्ता को बताता है कि प्रोसेस जारी है. हालांकि, यह नहीं बताता कि प्रोसेस कितनी पूरी हो चुकी है.

अनिश्चित प्रोग्रेस इंडिकेटर बनाने के लिए, LinearProgressIndicator या CircularProgressIndicator कंपोज़ेबल का इस्तेमाल करें. हालांकि, progress के लिए कोई वैल्यू पास न करें. यहां दिए गए उदाहरण में, बटन दबाकर इंडिकेटर को टॉगल करने का तरीका बताया गया है.

@Composable
fun IndeterminateCircularIndicator() {
    var loading by remember { mutableStateOf(false) }

    Button(onClick = { loading = true }, enabled = !loading) {
        Text("Start loading")
    }

    if (!loading) return

    CircularProgressIndicator(
        modifier = Modifier.width(64.dp),
        color = MaterialTheme.colorScheme.secondary,
        trackColor = MaterialTheme.colorScheme.surfaceVariant,
    )
}

इंडिकेटर चालू होने पर, इस सुविधा को लागू करने का उदाहरण यहां दिया गया है:

यहां उसी तरीके का उदाहरण दिया गया है, लेकिन इसमें CircularProgressIndicator के बजाय LinearProgressIndicator का इस्तेमाल किया गया है.

अन्य संसाधन