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

כשמשתמשים בממשקי ה-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 של התקדמות התכונה 'חזרה עם תצוגה מקדימה' כדי לפתח אנימציות בהתאמה אישית עבור תנועת החזרה עם תצוגה מקדימה באפליקציה. ממשקי ה-API של התקדמות התכונה 'חזרה עם תצוגה מקדימה' עוזרים להנפיש תצוגות, אבל יש להם מגבלות כשמנפישים מעברים בין קטעים. בתוך OnBackPressedCallback, הוספנו את השיטות handleOnBackProgressed, handleOnBackCancelled ו-handleOnBackStarted כדי להנפיש אובייקטים בזמן שהמשתמש מחליק אחורה. משתמשים בשיטות האלה אם רוצים לבצע התאמה אישית מעבר לאנימציות שמוגדרות כברירת מחדל במערכת, או לאנימציות של רכיבי Material.

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

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

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

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

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

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

כדי להמחיש איך זה עובד, נניח שפעילות ב' נמצאת מעל פעילות א' במקבץ הפעילויות הקודמות (back stack). כך מטפלים באנימציות של פעילויות מותאמות אישית:

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

• כשמציינים את OVERRIDE_TRANSITION_CLOSE, ‏ enterAnim היא אנימציית הכניסה של פעילות א' ו-exitAnim היא אנימציית היציאה של פעילות ב'.

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

הוספת תמיכה בחיזוי החזרה עם פרגמנטים

כשמטמיעים את התכונה 'חזרה עם אנימציה' עם קטעי קוד, יש שתי גישות.

שימוש בממשקי 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 ואילך.

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

• הוספת אנימציה לרכיב הניווט.
• יוצרים אנימציה באמצעות setCustomAnimations.
• הפעלת אנימציה של מעברי כניסה ויציאה באמצעות setEnterTransition,‏ setExitTransition, ‏ setReenterTransition ו-setReturnTransition.
• אפשר להנפיש מעברים של רכיבים משותפים באמצעות setSharedElementEnterTransition ו-setSharedElementReturnTransition.

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

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

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

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

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

דרישות

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

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

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

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

• דוגמאות קוד של חיזוי החזרה
• מושגי יסוד לגבי סרטונים למילוי חוסרים במערכת
• הכנה לעתיד של סרטונים ב-Android