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

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

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

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

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

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

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

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

एपीआई सरफ़ेस

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

  • 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 का इस्तेमाल किया गया है.

अन्य संसाधन