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

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

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

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

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

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

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

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

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

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

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

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

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

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

שימוש בממשקי Progress API עם AndroidX Transitions

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

  1. במקום beginDelayedTransition, צריך להשתמש ב-TransitionManager#controlDelayedTransition כדי להפעיל מעברים כשהמשתמש מחליק אחורה.
  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, אבל לא במעברים של framework. צריך להפסיק להשתמש במעברים של framework ולעבור לשימוש ב-Animator ובמעברים של AndroidX.
  • מעברים עם חיזוי של חזרה נתמכים במכשירים עם Android מגרסה 14 ואילך, והם לא תואמים לאחור.
  • יש תמיכה גם במעברים שנוצרו באמצעות סצנות XML. ב-handleOnBackStarted, מגדירים את TransitionSeekController לתוצאה של TransitionManager.createSeekController במקום לתוצאה של controlDelayedTransition.

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

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

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

  • קוראים למעברים של פתיחה או סגירה בתוך השיטה onCreate של Activity B.
  • כשהמשתמש מנווט לפעילות ב', משתמשים ב-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 או עם רכיב הניווט, כדי לטפל במחסנית החזרה. התכונה 'חזרה עם חיזוי' לא נתמכת אם אתם מנהלים את ערימת החזרה שלכם. מעבר ממערכים של היסטוריית חזרה ש-FragmentManager לא מכיר.
  • חלק מהספריות כוללות תמיכה בתכונה 'חזרה חזויה'. כדאי לעיין במסמכי התיעוד כדי לוודא.
  • יש תמיכה במחלקה Animator ובספרייה AndroidX Transition.
  • אין תמיכה במחלקה Animation ובספריית ה-framework‏ Transition.
  • אנימציות חיזויות פועלות רק במכשירים עם Android מגרסה 14 ואילך.

כדאי להשתמש בשיטה predictive back cross-fragments במצבים הבאים:

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

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

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

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

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

דרישות

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

קטגוריה אנימציה compileSdk targetSdk גרסת המכשיר android:enableOnBackInvokedCallback תלות
אנימציות מערכת חזרה לדף הבית 33 כל צבע 35 TRUE ללא
פעילות חוצת-פלטפורמות 34 כל צבע 35 TRUE ללא
בין משימות 34 כל צבע 35 TRUE ללא
פלטפורמה פעילות מותאמת אישית בין מכשירים 34 כל צבע 35 TRUE ללא
Progress API Platform 34 כל צבע 34 TRUE ללא
רכיבי Material גיליון תחתון 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 Animations Custom AndroidX cross-fragment 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

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