כשמשתמשים בממשקי ה-API של מערכת החזרה, אפשר להביע הסכמה לקבלת אנימציות בתוך האפליקציה ולתמיכה במעברים בהתאמה אישית.
אחרי שתביעו הסכמה לשימוש באנימציות, האפליקציה תציג אנימציות של חזרה למסך הבית, מעבר בין פעילויות ומעבר בין משימות.
אפשר גם לשדרג את התלות ברכיב Material לגרסה v1.10.0 של MDC Android כדי לקבל אנימציות של רכיבי Material כמו אלה:
מידע נוסף זמין בהנחיות למפתחים בנושא רכיבי Material ב-GitHub.
בסרטון מוצגת דוגמה קצרה לאנימציות של חזרה עם חיזוי עבור פעילות חוצה וחזרה למסך הבית באמצעות אפליקציית ההגדרות של Android.
- באנימציה רואים את המשתמש מחליק אחורה כדי לחזור למסך ההגדרות הקודם – דוגמה לאנימציה חוצת-פעילות.
- עכשיו, במסך הקודם, המשתמש מתחיל להחליק אחורה בפעם השנייה, ומוצגת תצוגה מקדימה של מסך הבית עם הטפט שלו – דוגמה לאנימציה של חזרה למסך הבית.
- המשתמש ממשיך להחליק ימינה, ומוצגת אנימציה של החלון שמצטמצם לסמל במסך הבית.
- המשתמש חזר עכשיו למסך הבית.
איך מוסיפים תמיכה במחוות חזרה עם חיזוי
הוספה של אנימציות ומעברים מותאמים אישית באפליקציה
אתם יכולים ליצור אנימציות ומעברים מותאמים אישית בנכס באפליקציה, אנימציות מותאמות אישית בין פעילויות ואנימציות מותאמות אישית בין קטעים עם תנועות ניווט חזויות.
הוספת מעברים בהתאמה אישית באמצעות 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 ואילך כדי ליצור מעברים של חזרה עם חיזוי.
- במקום
beginDelayedTransition, צריך להשתמש ב-TransitionManager#controlDelayedTransitionכדי להפעיל מעברים כשהמשתמש מחליק אחורה. - יוצרים את המעבר ב-
handleOnBackStarted. - מפעילים את המעבר עם אירוע החזרה בתוך
handleOnBackProgressedעל ידי שיוךcurrentFractionאלBackEvent.progress, וכך אפשר לראות כמה רחוק המשתמש החליק אחורה. - השלמת המעבר אחרי שהמשתמש מבצע את תנועת החזרה ב-
handleOnBackPressed. - לבסוף, מאפסים את מצב המעבר בתוך
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ובספריית frameworkTransition. - אנימציות חיזויות פועלות רק במכשירים עם Android מגרסה 14 ואילך.
כדאי להשתמש בשיטה 'חזרה חוצה-קטעים חזויה' במצבים הבאים:
- הוספת אנימציה לרכיב הניווט.
- יצירת אנימציה באמצעות
setCustomAnimations. - אנימציה של מעברים בכניסה וביציאה עם
setEnterTransition,setExitTransition, setReenterTransitionו-setReturnTransition. - אנימציה של מעברים בין רכיבים משותפים באמצעות
setSharedElementEnterTransitionו-setSharedElementReturnTransition.
חלק מתנועות החומר תומכות בחזרה עם חיזוי החל מגרסה 1.12.02-alpha02 ומעלה, כולל MaterialFadeThrough, MaterialSharedAxis ו-MaterialFade.
שימוש בהחזרת שיחות
אפשר ליצור מעבר בין קטעים באמצעות קריאות חוזרות (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 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