כשמשתמשים בממשקי ה-API של המערכת לאחור, אפשר להביע הסכמה לקבלת אנימציות בתוך האפליקציה ולתמוך במעברים בהתאמה אישית.
אחרי שתאשרו את השימוש, באפליקציה יוצגו אנימציות לחזרה למסך הבית, לפעילות בין משימות ולמשימות שונות.
אפשר גם לשדרג את התלות ברכיבי Material לגרסה 1.10.0 של MDC ל-Android כדי לקבל אנימציות של רכיבי Material, כמו:
מידע נוסף זמין בהנחיות למפתחים של רכיבי Material ב-GitHub.
הסרטון מציג דוגמה קצרה לאנימציות חזרה לפעילות מרובה ולחזרה הביתה באמצעות אפליקציית ההגדרות של Android.
- באנימציה, המשתמש מחליק חזרה כדי לחזור למסך ההגדרות הקודם – דוגמה לאנימציה שמופיעה בכמה פעילויות.
- עכשיו במסך הקודם, המשתמש מתחיל להחליק שוב לאחור, מוצגת תצוגה מקדימה של מסך הבית עם הטפט שלו – דוגמה לאנימציה של החזרה למסך הבית.
- המשתמש ממשיך להחליק ימינה, ומוצגת אנימציה של החלון שנעלם עד שהוא הופך לסמל במסך הבית.
- המשתמש חזר למסך הבית.
איך מוסיפים תמיכה בתנועות חזויות לאחור
הוספת אנימציות ומעברים בהתאמה אישית בתוך האפליקציה
אתם יכולים ליצור אנימציות ומעברים מותאמים אישית בנכס באפליקציה, אנימציות מותאמות אישית בפעילויות שונות ואנימציות מותאמות אישית בקטעים שונים באמצעות תנועות חזרה חזויות.
הוספת מעברים מותאמים אישית באמצעות 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 ואילך כדי ליצור מעברים חזרה חזויים.
- משתמשים ב-
TransitionManager#controlDelayedTransition
במקום ב-beginDelayedTransition
כדי להפעיל מעברים כשהמשתמש מחליק לאחור. - יוצרים את המעבר בתוך
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, אבל לא במעברים של מסגרת. עוברים מת 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 ואילך.
מומלץ להשתמש בקטעי קוד חוזרים חזויים לאחור במצבים הבאים:
- הוספת אנימציה לרכיב הניווט
- יצירת אנימציה עם
setCustomAnimations
. - להוסיף אנימציה למעברים של כניסה ויציאה באמצעות
setEnterTransition
,setExitTransition
, setReenterTransition
ו-setReturnTransition
. - להוסיף אנימציה למעברים בין רכיבים משותפים באמצעות
setSharedElementEnterTransition
ו-setSharedElementReturnTransition
.
חלק מתנועות החומר תומכות בחיזוי חזרה החל מ-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 |