অগ্রগতির সূচক

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

এই তিনটি ব্যবহারের ক্ষেত্র বিবেচনা করুন যেখানে আপনি একটি অগ্রগতি সূচক ব্যবহার করতে পারেন:

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

ম্যাটেরিয়াল ডিজাইনে দুই ধরনের অগ্রগতি সূচক রয়েছে:

• সুনির্দিষ্ট : ঠিক কতটা অগ্রগতি হয়েছে তা প্রদর্শন করে।
• অনির্দিষ্ট : অগ্রগতির প্রতি মনোযোগ না দিয়ে ক্রমাগত সজীব থাকে।

একইভাবে, একটি অগ্রগতি সূচক নিম্নলিখিত দুটি রূপের যেকোনো একটি গ্রহণ করতে পারে:

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

এপিআই সারফেস

যদিও ম্যাটেরিয়াল ডিজাইনের সাথে সামঞ্জস্যপূর্ণ প্রোগ্রেস ইন্ডিকেটর তৈরি করার জন্য বেশ কিছু কম্পোজেবল রয়েছে, তাদের প্যারামিটারগুলোর মধ্যে খুব বেশি পার্থক্য নেই। যেসব মূল প্যারামিটার আপনার মনে রাখা উচিত, সেগুলো হলো নিম্নরূপ:

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

অতিরিক্ত সম্পদ

• ম্যাটেরিয়াল UI ডক্স