CircularProgressIndicator در Android Jetpack Compose

CircularProgressIndicator در Android Jetpack Compose برای نمایش درصد پیشرفت یک عمل در حالت دایره ای می باشد. مشابه این آموزش کوتاه برنامه نویسی اندرویدLinearProgressIndicator در Android Jetpack Compose” بوده و تنها تفاوت در نحوه نمایش پیشرفت می باشد.

همانطور که اشاره شد مانند LinearProgressIndicator در Android Jetpack Compose دو حالت برای نمایش CircularProgressIndicator وجود دارد.

1- Indeterminate: نامشخص

CircularProgressIndicator()

زمانی که شما از CircularProgressIndicator بدون پارامتر progress استفاده کنید برای همیشه اجرا خواهد شد.

2- Determinate: تعیین شده

CircularProgressIndicator(progress = 0.5f)
LinearProgressIndicator در Android Jetpack Compose در حالت Determinate
درصد پیشرفت عمل در مثال بالا روی 50% تعیین شده است

زمانی که شما پارامتر progress را به CircularProgressIndicator پاس کنید درصد پیشرفت فقط به اندازه مقدار پاس داده شده خواهد بود. به مثال بالا توجه کنید.

مثال CircularProgressIndicator در Android Jetpack Compose

@Composable
fun CircularProgressIndicatorSample() {
    var progress by remember { mutableStateOf(0.1f) }
    val animatedProgress = animateFloatAsState(
        targetValue = progress,
        animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec
    ).value

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Spacer(Modifier.height(30.dp))
        Text("CircularProgressIndicator with undefined progress")
        CircularProgressIndicator()
        Spacer(Modifier.height(30.dp))
        Text("CircularProgressIndicator with progress set by buttons")
        CircularProgressIndicator(progress = animatedProgress)
        Spacer(Modifier.height(30.dp))
        OutlinedButton(
            onClick = {
                if (progress < 1f) progress += 0.1f
            }
        ) {
            Text("Increase")
        }

        OutlinedButton(
            onClick = {
                if (progress > 0f) progress -= 0.1f
            }
        ) {
            Text("Decrease")
        }
    }
}

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

12 − 2 =