אינדיקטורים של התקדמות

אינדיקטורים של התקדמות מציגים באופן חזותי את הסטטוס של פעולה. הם משתמשים בתנועה כדי להעביר למשתמש את המידע על מידת ההתקדמות בתהליך, למשל טעינת נתונים או עיבוד נתונים. הן יכולות גם לציין שהעיבוד מתבצע, בלי לציין עד כמה הוא קרוב לסיום.

ריכזנו כאן שלושה תרחישים לדוגמה שבהם כדאי להשתמש במדד התקדמות:

  • טעינה של תוכן: בזמן אחזור תוכן מרשת, למשל טעינת תמונה או נתונים של פרופיל משתמש.
  • העלאת קובץ: נותנים למשתמש משוב על משך ההעלאה הצפוי.
  • עיבוד ארוך: כשאפליקציה מעבדת כמות גדולה של נתונים, חשוב להציג למשתמש את ההתקדמות ביחס לזמן הנדרש.

בעיצוב חדשני תלת-ממדי יש שני סוגים של אינדיקטורים של התקדמות:

  • מוגדרת: מוצגת בדיוק מידת ההתקדמות.
  • לא ידועה: האנימציה פועלת באופן קבוע ללא קשר להתקדמות.

באופן דומה, אינדיקטור ההתקדמות יכול להופיע באחת משתי הצורות הבאות:

  • לינארי: סרגל אופקי שמתמלא משמאל לימין.
  • מעגלית: מעגל שהקו שלו מתארך עד שהוא מקיף את ההיקף המלא של המעגל.
אינדיקטור של התקדמות ליניארית לצד אינדיקטור של התקדמות מעגלית.
איור 1. שני הסוגים של אינדיקטורים של התקדמות.

ממשק API

יש כמה רכיבים שאפשר להשתמש בהם כדי ליצור אינדיקטורים של התקדמות בהתאם ל-Material Design, אבל הפרמטרים שלהם לא שונים בהרבה. בין הפרמטרים העיקריים שכדאי לזכור:

  • progress: ההתקדמות הנוכחית שמוצגת במדד. מעבירים Float בין 0.0 ל-1.0.
  • color: הצבע של האינדיקטור בפועל. כלומר, החלק ברכיב שמשקף את ההתקדמות ומקיף אותו במלואו כשההתקדמות הושלמה.
  • trackColor: הצבע של המסלול שבו מצויר האינדיקטור.

אינדיקטורים מוגדרים

אינדיקטור מדויק משקף בדיוק את מידת השלמות של פעולה. משתמשים ברכיבי ה-Composable‏ 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

כשהטעינה הושלמה חלקית, האינדיקטור הליניארי בדוגמה הקודמת מופיע כך:

כמו כן, האינדיקטור העגול מופיע כך:

אינדיקטורים לא ידועים

אינדיקטור לא ידוע לא משקף את מידת ההתקדמות של פעולה כלשהי. במקום זאת, הוא משתמש בתנועה כדי להצביע למשתמש שהעיבוד נמשך, בלי לציין את מידת ההתקדמות.

כדי ליצור אינדיקטור של התקדמות לא ידועה, משתמשים ב-composable‏ 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

דוגמה להטמעה הזו כשהחיווין פעיל:

בדוגמה הבאה מוצגת אותה הטמעה, אבל עם הערך LinearProgressIndicator במקום CircularProgressIndicator.

מקורות מידע נוספים