חיזוי החזרה ב'כתיבה מהירה'

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

איור 1. אנימציית החזרה למסך הבית באפליקציית הדוגמה SociaLite.

במדריך הזה נסביר איך לבצע את הפעולות הבאות באמצעות 'חזרה חזותית':

  • הבעת הסכמה לשימוש בתכונה 'חיזוי תנועת החזרה'
  • הפעלת אנימציות מערכת שמוגדרות כברירת מחדל
  • הפעלת חזרה חזוי באמצעות 'ניווט בכתב'
  • שילוב עם מעברים של רכיבים משותפים
  • תמיכה בחזרה חזותית עם רכיבים של Material Compose
  • גישה להתקדמות באופן ידני באמצעות PredictiveBackHandler
  • בדיקת האנימציה של חיזוי תנועת החזרה

הבעת הסכמה לשימוש בתכונה 'חיזוי תנועת החזרה'

כדי להפעיל אנימציות של תנועת החזרה לחיזוי, צריך להביע הסכמה לתמיכה בתנועת החזרה לחיזוי. כדי להביע הסכמה, מוסיפים את הערך android:enableOnBackInvokedCallback="true לתג <application> או לתגי <activity> נפרדים בקובץ AndroidManifest.xml.

הפעלת אנימציות מערכת שמוגדרות כברירת מחדל

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

  • חזרה למסך הבית: החזרת המשתמש למסך הבית.
  • בין פעילויות: מעברים בין פעילויות בתוך האפליקציה.
  • בין משימות: מעברים בין משימות.

האנימציות האלה מופעלות כברירת מחדל ב-Android מגרסה 15 ואילך. במכשירים עם Android בגרסה 13 או 14, המשתמשים יכולים להפעיל אותם דרך האפשרויות למפתחים.

כדי להשתמש באנימציות המערכת, צריך לעדכן את יחסי התלות של AndroidX ב-Activity לגרסה 1.6.0 ואילך.

הפעלת חזרה חזוי באמצעות 'ניווט בכתב'

כדי להשתמש בתכונה 'חזרה חזותית' בתכונה 'ניווט בכתיבה', צריך לוודא שאתם משתמשים בספרייה navigation-compose מגרסה 2.8.0 ואילך.

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

איור 2. אנימציית ברירת המחדל של עמעום הדרגתי בתוך האפליקציה ב-SociaLite.

כשמנווטים, אפשר ליצור מעברים מותאמים אישית באמצעות popEnterTransition ו-popExitTransition. כשמחילים את המשתנים האלה על NavHost, אפשר להגדיר את האנימציה של המסכים 'כניסה' ו'יציאה'. אפשר להשתמש בהם כדי ליצור מגוון אפקטים, כמו שינוי גודל, העלמה או החלקה.

בדוגמה הזו, scaleOut משמש בתוך popExitTransition כדי להקטין את המסך היוצא בזמן שהמשתמש מנווט חזרה. בנוסף, הפרמטר transformOrigin קובע את הנקודה שסביבה מתרחשת האנימציה של שינוי התצוגה. כברירת מחדל, זוהי נקודת המרכז של המסך (0.5f, 0.5f). אפשר לשנות את הערך הזה כדי שהשינוי בגודל יתבצע מנקודה אחרת.

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)
PredictiveBackSnippets.kt

הקוד הזה מניב את התוצאה הבאה:

איור 3. אנימציה בהתאמה אישית בתוך האפליקציה ב-SociaLite.

popEnterTransition ו-popExitTransition שולטים באנימציות באופן ספציפי כשפותחים את מקבץ האפליקציות הקודם, למשל באמצעות תנועה אחורה. אפשר גם להשתמש ב-enterTransition וב-exitTransition כדי להגדיר אנימציות לכניסה וליציאה מרכיבים מורכבים באופן כללי, ולא רק לחזור חזרה חזוי. אם מגדירים רק את enterTransition ו-exitTransition, הם משמשים גם לניווט רגיל וגם להוצאה של סטאק הקודמים. עם זאת, השימוש ב-popEnterTransition וב-popExitTransition מאפשר ליצור אנימציות נפרדות לניווט חזרה אחורה.

שילוב עם מעברים של רכיבים משותפים

מעברים בין רכיבים משותפים מספקים חיבור חזותי חלק בין רכיבים מורכבים עם תוכן משותף, ולרוב משמשים לניווט.

איור 4. מעבר לרכיב משותף עם חזרה חזויה ב'כתיבה' בתפריט הניווט.

במאמר חזרה חזויה עם רכיבים משותפים מוסבר איך משתמשים ברכיבים משותפים עם 'כתיבה באמצעות הניווט'.

תמיכה בחזרה חזותית עם רכיבים של Material Compose

רכיבים רבים בספריית Material Compose תוכננו לפעול בצורה חלקה עם תנועות חזרה חזויות. כדי להפעיל אנימציות חזרה חזויות ברכיבים האלה, צריך לכלול בפרויקט את התלות האחרונה ב-Material3 (androidx.compose.material3:material3-*:1.3.0 ואילך).

רכיבי Material שתומכים בחיזוי אנימציה של תנועת החזרה הם:

SearchBar ו-ModalBottomSheet מקבלים אנימציה אוטומטית באמצעות תנועות חיזוי של חזרה אחורה. כדי להשתמש ב-ModalNavigationDrawer, ב-ModalDrawerSheet, ב-DismissibleDrawerSheet וב-DismissibleNavigationDrawer, צריך להעביר את drawerState ל-composables של תוכן הגיליונות הרלוונטיים.

גישה להתקדמות באופן ידני באמצעות PredictiveBackHandler

ה-composable PredictiveBackHandler[5] ב-Jetpack Compose מאפשר לכם ליירט את תנועת החזרה אחורה ולגשת להתקדמות שלה. אתם יכולים להגיב לתנועת החזרה של המשתמש בזמן אמת, וליצור אנימציות או התנהגויות בהתאמה אישית על סמך המרחק שבו המשתמש מחליק.

כדי להשתמש ב-PredictiveBackHandler, צריך לוודא שאתם משתמשים ב-androidx.activity:activity:1.6.0 ואילך.

PredictiveBackHandler מספק Flow<BackEventCompat> שמפיק אירועים שמייצגים את ההתקדמות של תנועת החזרה. כל אירוע מכיל מידע כמו:

  • progress: ערך ממשי (float) בין 0 ל-1 שמציין את ההתקדמות של מחווה החזרה אחורה (0 = המחווה התחילה, 1 = המחווה הושלמה).
  • touchX ו-touchY: הקואורדינטות X ו-Y של אירוע המגע.

קטע הקוד הבא מציג שימוש בסיסי ב-PredictiveBackHandler:

PredictiveBackHandler(true) { progress: Flow<BackEventCompat> ->
    // code for gesture back started
    try {
        progress.collect { backEvent ->
            // code for progress
            boxScale = 1F - (1F * backEvent.progress)
        }
        // code for completion
        boxScale = 0F
    } catch (e: CancellationException) {
        // code for cancellation
        boxScale = 1F
    }
}
PredictiveBackSnippets.kt

דוגמה: שילוב עם חלונית ההזזה לניווט

בדוגמה הזו מוסבר איך להטמיע אנימציה מותאמת אישית באפליקציה באמצעות PredictiveBackHandler כדי ליצור אינטראקציה חלקה עם חלונית הניווט בתגובה לתנועות חזרה ב-JetLagged:

איור 5. חלונית הזזה לניווט עם תמיכה בחיזוי החזרה.

בדוגמה הזו, PredictiveBackHandler משמש כדי:

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

בדיקת האנימציה של חיזוי תנועת החזרה

אם אתם עדיין משתמשים ב-Android 13 או ב-Android 14, תוכלו לבדוק את האנימציה של החזרה למסך הבית.

כדי לבדוק את האנימציה הזו, מבצעים את השלבים הבאים:

  1. במכשיר, עוברים אל הגדרות > מערכת > אפשרויות למפתחים.
  2. בוחרים באפשרות אנימציה חזרה חזוי.
  3. פותחים את האפליקציה המעודכנת ומשתמשים בתנועת החזרה כדי לראות איך היא פועלת.

במכשירים עם Android מגרסה 15 ואילך, התכונה הזו מופעלת כברירת מחדל.

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