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

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

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

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

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

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

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

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

एपीआई सरफेस

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

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

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

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

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

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

प्रोग्रेस इंडिकेटर बनाने के लिए, 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,
    )
}
ProgressIndicator.kt

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

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

अन्य संसाधन