הוספת תמיכה באנימציות אחורה בזמן

כשמשתמשים בממשקי ה-API של מערכת ההפעלה, אפשר להביע הסכמה לקבל אנימציות באפליקציה ולתמוך במעברים בהתאמה אישית.

סרטון 1: אנימציות חזרה חזויות

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

אפשר גם לשדרג את התלות ברכיבי Material ל-MDC Android בגרסה 1.10.0 כדי לקבל אנימציות של רכיבי Material, כמו:

מידע נוסף זמין בהנחיות למפתחים של רכיבי Material ב-GitHub.

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

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

איך מוסיפים תמיכה בתנועות חזויות לאחור

הוספת אנימציות ומעברים בהתאמה אישית בתוך האפליקציה

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

הוספת מעברים מותאמים אישית באמצעות Progress API

בגרסה 1.8.0-alpha01 ואילך של AndroidX Activity, אפשר להשתמש ב-API של התקדמות החיזוי לאחור כדי לפתח אנימציות בהתאמה אישית לתנועת החזרה האוטומטית לאחור באפליקציה. ממשקי ה-API של התקדמות מועילים ליצירת אנימציות לתצוגות, אבל יש להם מגבלות ביצירת אנימציות למעברים בין קטעים. ב-OnBackPressedCallback הוספנו את השיטות handleOnBackProgressed,‏ handleOnBackCancelled ו-handleOnBackStarted כדי להנפיש אובייקטים בזמן שהמשתמש מחליק לאחור. צריך להשתמש בשיטות האלה אם אתם צריכים להתאים אישית יותר מאנימציות ברירת המחדל שסופקו על ידי המערכת או אנימציות של רכיבי Material.

אנחנו צופים שרוב האפליקציות ישתמשו בממשקי ה-API של AndroidX עם תאימות לאחור, אבל יש גם ממשקי API דומים של פלטפורמות בממשק OnBackAnimationCallback שזמינים לבדיקה ב-Android 14 Developer Preview 1 ואילך.

שימוש ב-Progress APIs עם AndroidX Transitions

אפשר להשתמש ב-Progress APIs עם AndroidX Transitions 1.5.0-alpha01 ואילך ב-Android 14 ואילך כדי ליצור מעברים חזרה חזויים.

  1. משתמשים ב-TransitionManager#controlDelayedTransition במקום ב-beginDelayedTransition כדי להפעיל מעברים כשהמשתמש מחליק לאחור.
  2. יוצרים את המעבר בתוך handleOnBackStarted.
  3. כדי להפעיל את המעבר עם אירוע החזרה ב-handleOnBackProgressed, צריך לקשר את currentFraction ל-BackEvent.progress, שמציג את המרחק שבו המשתמש החליק לאחור.
  4. מסיימים את המעבר אחרי שהמשתמש מבצע את תנועת החזרה ב-handleOnBackPressed.
  5. לבסוף, מאפסים את המצב של המעבר ב-handleOnBackCancelled.

הסרטון, קוד ה-Kotlin וקובץ ה-XML הבאים מדגימים מעבר בהתאמה אישית בין שני תיבות שהופעלה באמצעות OnBackPressedCallback:

    class MyFragment : Fragment() {

    val transitionSet = TransitionSet().apply {
        addTransition(Fade(Fade.MODE_OUT))
        addTransition(ChangeBounds())
        addTransition(Fade(Fade.MODE_IN))
    }
    ...
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val callback = object : OnBackPressedCallback(enabled = false) {

            var controller: TransitionSeekController? = null

            @RequiresApi(34)
            override fun handleOnBackStarted(backEvent: BackEvent) {
                // Create the transition
                controller = TransitionManager.controlDelayedTransition(
                    binding.card,
                    transitionSet
                )
                changeTextVisibility(ShowText.SHORT)
            }

            @RequiresApi(34)
            override fun handleOnBackProgressed(backEvent: BackEvent) {
                // Play the transition as the user swipes back
                if (controller?.isReady == true) {
                    controller?.currentFraction = backEvent.progress
                }
            }

            override fun handleOnBackPressed() {
                // Finish playing the transition when the user commits back
                controller?.animateToEnd()
                this.isEnabled = false
            }

            @RequiresApi(34)
            override fun handleOnBackCancelled() {
                // If the user cancels the back gesture, reset the state
                transition(ShowText.LONG)
            }
        }

        binding.shortText.setOnClickListener {
            transition(ShowText.LONG)
            callback.isEnabled = true
        }

        this.requireActivity().onBackPressedDispatcher.addCallback(callback)
    }

    private fun transition(showText: ShowText) {
        TransitionManager.beginDelayedTransition(
            binding.card,
            transitionSet
        )
        changeTextVisibility(showText)
    }

    enum class ShowText { SHORT, LONG }
    private fun changeTextVisibility(showText: ShowText) {
        when (showText) {
            ShowText.SHORT -> {
                binding.shortText.isVisible = true
                binding.longText.isVisible = false
            }
            ShowText.LONG -> {
                binding.shortText.isVisible = false
                binding.longText.isVisible = true
            }
        }
    }
}
  
<?xml version="1.0" encoding="utf-8"?>
...
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...>

        <TextView
            android:id="@+id/short_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            ... />

        <TextView
            android:id="@+id/long_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"
            .../>

    </androidx.constraintlayout.widget.ConstraintLayout>

כשעובדים עם מעברים חזויים לאחור, חשוב לזכור את הדברים הבאים:

  • משתמשים ב-isSeekingSupported כדי לבדוק אם המעבר תומך בחזרה חזויה.
  • משנים את הערך של isSeekingSupported כדי להחזיר את הערך true למעברים בהתאמה אישית.
  • יוצרים אמצעי בקרה אחד לכל אנימציה.
  • אפשר להשתמש במעברים חזויים אחורה במעברים של AndroidX, אבל לא במעברים של מסגרת. עוברים מת transitions של framework ומשתמשים ב-Animator וב-AndroidX transitions במקום.
  • המעבר האוטומטי לאחור נתמך במכשירים עם Android מגרסה 14 ואילך, והוא לא תואם לאחור.
  • יש גם תמיכה במעברים שנוצרו באמצעות סצנות XML. ב-handleOnBackStarted, מגדירים את TransitionSeekController לתוצאה של TransitionManager.createSeekController במקום לתוצאה של controlDelayedTransition.

הוספת מעברים מותאמים אישית בין פעילויות ב-Android מגרסה 14 ואילך

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

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

  • קוראים למעברים של פתיחה או סגירה בתוך השיטה onCreate של פעילות ב'.
  • כשהמשתמש מנווט לפעילות ב', משתמשים ב-OVERRIDE_TRANSITION_OPEN. כשהמשתמש מחליק כדי לנווט חזרה לפעילות א', משתמשים ב-OVERRIDE_TRANSITION_CLOSE.
  • כשמציינים את OVERRIDE_TRANSITION_CLOSE, הערך enterAnim הוא אנימציית הכניסה של פעילות א' והערך exitAnim הוא אנימציית היציאה של פעילות ב'.

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

יש שתי גישות להטמעת 'חזרה חזוי' עם קטעי קוד.

שימוש בממשקי API קיימים

מומלץ להשתמש בממשקי API קיימים. ממשקי ה-API האלה מאפשרים להחליק מהקצה של המסך כדי לשנות את המעברים של Animator או Androidx באמצעות המחווה. אם תעבירו את המחווה מעבר לסף מסוים, היא תושלם ותחזירו אתכם לקטע הקודם. אם לא, היא תבוטל ותישאר לכם את הקטע הנוכחי. מידע נוסף זמין במאמר ניווט בין קטעים באמצעות אנימציות.

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

  • לייבא את Transitions 1.5.0 ואילך ואת Fragments 1.7.0 ואילך. רוב התמיכה בחיזוי תנועת החזרה ב-Fragments מבוססת על היכולת של Transitions לדלג על אנימציות, ואפשר לעשות זאת רק ב-Transitions מגרסה 1.5.0 ואילך.
  • משתמשים ב-Fragments, עם FragmentManager או עם רכיב הניווט, כדי לטפל ב-back stack. אי אפשר להשתמש בתכונה 'חזרה חזותית' אם אתם מנהלים את מקבץ הבקשות הקודמות בעצמכם. עוברים מסטאקים קודמים ש-FragmentManager לא יודע עליהם.
  • בחלק מהספריות יש תמיכה בחזרה חזוי. מומלץ לעיין במסמכי התיעוד כדי לוודא זאת.
  • יש תמיכה בכיתה Animator ובספרייה AndroidX Transition.
  • אין תמיכה בכיתה Animation ובספריית המסגרת Transition.
  • אנימציות חזויות פועלות רק במכשירים עם Android מגרסה 14 ואילך.

מומלץ להשתמש בקטעי קוד חוזרים חזויים לאחור במצבים הבאים:

חלק מתנועות החומר תומכות בהחזרה חזותית חזותית החל מגרסה 1.12.02-alpha02 ואילך, כולל MaterialFadeThrough, ‏ MaterialSharedAxis ו-MaterialFade. הערה: MaterialContainerTransform לא תומך בהחזרה חזויה.

שימוש בקריאות חזרה

אפשר ליצור מעבר בין קטעים באמצעות פונקציות חזרה (callbacks), אבל יש מגבלה ידועה בשימוש בפונקציות חזרה, שבה המשתמשים לא יכולים לראות את החלק הקודם כשהם מחליקים חזרה. כדי ליצור מעבר של אלמנט משותף בין קטעי קוד שמתאים להנחיות לתכנון של חזרה חזותית חזויה, מבצעים את הפעולות הבאות:

יוצרים OnBackPressedCallback. בתוך handleOnBackProgressed, משנים את הגודל והמיקום של החלק. לאחר מכן, מעיפים אותו מהמקבץ האחורי. לאחר מכן, מפעילים את המעבר של הרכיב המשותף באמצעות setSharedElementReturnTransition מחוץ ל-callback.

מידע נוסף זמין בדוגמת הקוד ב-GitHub.

הדרישות

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

קטגוריה אנימציה compileSdk targetSdk גרסת המכשיר android:enableOnBackInvokedCallback תלות
אנימציות מערכת חזרה לדף הבית 33 כל צבע 35 TRUE ללא
פעילות חוצת-פעילויות 34 כל צבע 35 TRUE ללא
במשימות שונות 34 כל צבע 35 TRUE ללא
פלטפורמה פעילות מותאמת אישית בכמה מודעות 34 כל צבע 35 TRUE ללא
פלטפורמת Progress API 34 כל צבע 34 TRUE ללא
Material Components גיליון תחתון 34 כל צבע 34 TRUE Material Component 1.10.0
גיליון צדדי 34 כל צבע 34 TRUE Material Component 1.10.0
חלונית הזזה לניווט 34 כל צבע 34 TRUE Material Component 1.10.0
חיפוש 34 כל צבע 34 TRUE Material Component 1.10.0
אנימציות ב-Jetpack קטעי קוד (fragments) חוצי-פלאגין בהתאמה אישית של AndroidX 34 כל צבע 34 TRUE AndroidX Fragment 1.7
מעברים מותאמים אישית של AndroidX 34 כל צבע 34 TRUE AndroidX Transition 1.5
Progress API Jetpack 34 כל צבע 34 TRUE AndroidX Activity 1.8

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