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

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

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

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

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

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

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

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

API সারফেস

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

  • progress : বর্তমান অগ্রগতি যা নির্দেশক প্রদর্শন করে। 0.0 এবং 1.0 এর মধ্যে একটি Float পাস করুন।
  • 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 সহ।

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