প্রোগ্রেস ইন্ডিকেটর

প্রোগ্রেস ইন্ডিকেটর কোনও অপারেশনের স্ট্যাটাসকে ভিজ্যুয়ালি সারফেস করে। তারা মোশন ব্যবহার করে ব্যবহারকারীর দৃষ্টি আকর্ষণ করে যে প্রসেসটি কতটা সম্পূর্ণ হয়েছে, যেমন ডেটা লোড করা বা প্রসেস করা। এছাড়াও, প্রসেসিং চলছে তা বোঝানো যেতে পারে, তবে এটি সম্পূর্ণ হতে কতক্ষণ সময় লাগবে তা উল্লেখ করা হয় না।

এইসব ক্ষেত্রে আপনি প্রগ্রেস ইন্ডিকেটর ব্যবহার করতে পারেন:

• কন্টেন্ট লোড করা: কোনও নেটওয়ার্ক থেকে কন্টেন্ট নেওয়ার সময়, যেমন কোনও ব্যবহারকারীর প্রোফাইলের জন্য ছবি বা ডেটা লোড করা।
• ফাইল আপলোড করা: ফাইল আপলোড করতে কতক্ষণ সময় লাগতে পারে সেই বিষয়ে ব্যবহারকারীকে মতামত দিন।
• দীর্ঘ প্রসেসিং: কোনও অ্যাপ প্রচুর পরিমাণে ডেটা প্রসেস করার সময়, মোট ডেটার কত অংশ প্রসেস করা হয়ে গেছে তা ব্যবহারকারীকে জানান।

Material Design-এ, দুই ধরনের প্রোগ্রেস ইন্ডিকেটর আছে:

• নির্দিষ্ট: ঠিক কতটা অগ্রগতি হয়েছে তা দেখায়।
• অনির্দিষ্ট: অগ্রগতি নির্বিশেষে ক্রমাগত অ্যানিমেট করে।

একইভাবে, প্রগ্রেস ইন্ডিকেটর নিম্নলিখিত দু'টি ফর্মের মধ্যে একটি নিতে পারে:

• লিনিয়ার: একটি অনুভূমিক বার যা বাঁদিক থেকে ডানদিকে পূর্ণ হয়।
• বৃত্তাকার: একটি বৃত্ত যার স্ট্রোকটি বৃত্তের সম্পূর্ণ পরিধি ঢেকে না দেওয়া পর্যন্ত দৈর্ঘ্যে বাড়তে থাকে।

API সারফেস

যদিও 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 ব্যবহার করা হয়েছে।

অতিরিক্ত রিসোর্স

• Material UI ডকুমেন্টেশন