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

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

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

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

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

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

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

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

এপিআই সারফেস

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

• 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 ডক্স