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

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

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

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

Material Design में, प्रोग्रेस इंडिकेटर दो तरह के होते हैं:

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

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

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

एपीआई का प्लैटफ़ॉर्म

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

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

इंडिकेटर तय करना

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

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

@Composable
fun LinearDeterminateIndicator() {
    var currentProgress by remember { mutableStateOf(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 का इस्तेमाल किया गया है.

अन्य संसाधन