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

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

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

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

মেটেরিয়াল ডিজাইনে দুই ধরনের প্রোগ্রেস ইন্ডিকেটর আছে:

  • নির্ধারিত: ঠিক কতটা অগ্রগতি হয়েছে তা দেখায়।
  • অনির্দিষ্ট: প্রগ্রেসের কথা বিবেচনা না করেই ক্রমাগত অ্যানিমেট করে।

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

  • লিনিয়ার: একটি অনুভূমিক বার যা বাঁদিক থেকে ডানদিকে পূরণ হয়।
  • বৃত্তাকার: একটি বৃত্ত যার স্ট্রোকের দৈর্ঘ্য বৃদ্ধি পায় যতক্ষণ না এটি বৃত্তের সম্পূর্ণ পরিধিকে বেষ্টন করে।
সার্কুলার প্রগ্রেস ইন্ডিকেটরের পাশে লিনিয়ার প্রগ্রেস ইন্ডিকেটর।
ছবি ১. দুই ধরনের প্রোগ্রেস ইন্ডিকেটর।

API সারফেস

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

  • 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)
    }
}

লোডিং আংশিকভাবে সম্পূর্ণ হলে, পূর্ববর্তী উদাহরণের লিনিয়ার ইন্ডিকেটরটি নিম্নলিখিতভাবে দেখানো হয়:

একইভাবে, বৃত্তাকার ইন্ডিকেটর এইভাবে দেখানো হয়:

অনির্দিষ্ট ইন্ডিকেটর

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

অনির্দিষ্ট প্রগ্রেস ইন্ডিকেটর তৈরি করতে, 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,
    )
}

ইন্ডিকেটর চালু থাকলে এই প্রয়োগের উদাহরণ নিচে দেওয়া হল:

নিচে একই ধরনের প্রয়োগের উদাহরণ দেওয়া হল, তবে এখানে CircularProgressIndicator-এর পরিবর্তে LinearProgressIndicator ব্যবহার করা হয়েছে।

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