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

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

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

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

• גיליונות תחתונים
• גיליונות צדדיים
• חיפוש

לקבלת מידע נוסף, עיינו בהנחיות למפתחים של רכיבי חומר ב-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 ואילך.

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

אפשר להשתמש בממשקי Progress API עם AndroidX מעברים מגרסה 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. עוברים מת 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 מסתמכת על כך ש'מעברים' יכול לחפש אנימציות, שזמין רק ב'מעברים' בגרסה 1.5.0 ואילך.
• משתמשים ב-Fragments, עם FragmentManager או עם רכיב הניווט, כדי לטפל ב-back stack. אי אפשר להשתמש בתכונה 'חזרה חזותית' אם אתם מנהלים את מקבץ הבקשות הקודמות בעצמכם. עוברים מסטאקים קודמים ש-FragmentManager לא יודע עליהם.
• בחלק מהספריות יש תמיכה בחזרה חזוי. מומלץ לעיין במסמכי התיעוד כדי לוודא זאת.
• יש תמיכה בכיתה Animator ובספרייה AndroidX Transition.
• אין תמיכה בכיתה Animation ובספריית המסגרת Transition.
• אנימציות חזויות פועלות רק במכשירים עם Android מגרסה 14 ואילך.

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

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

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

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

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

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

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

הדרישות

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

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

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