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

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

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

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

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

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

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

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

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

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

  • 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.

अन्य संसाधन