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

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

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

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

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

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

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

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

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

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

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

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

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

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

שימוש ב-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 של ה-framework.
  • אנימציות חזויות פועלות רק במכשירים עם 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

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