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

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

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

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

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

अन्य संसाधन