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

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

इस्तेमाल के इन तीन मामलों में प्रोग्रेस दिखाने वाले इंडिकेटर का इस्तेमाल करें:

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

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

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

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

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

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

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

• progress: इंडिकेटर से पता चलने वाली मौजूदा प्रोग्रेस. Float पास करें 0.0 से 1.0 के बीच.
• 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 का इस्तेमाल किया गया है.

अन्य संसाधन

• यूज़र इंटरफ़ेस (यूआई) के मटीरियल के दस्तावेज़