כשמשתמשים בממשקי ה-API של מערכת ההפעלה, אפשר להביע הסכמה לקבל אנימציות באפליקציה ולתמוך במעברים בהתאמה אישית.
אחרי שתאשרו את השימוש, יוצגו באפליקציה אנימציות לחזרה למסך הבית, לפעילות בין משימות ולמשימות שונות.
אפשר גם לשדרג את התלות ברכיבי Material ל-MDC Android בגרסה 1.10.0 כדי לקבל אנימציות של רכיבי Material, כמו:
מידע נוסף זמין בהנחיות למפתחים של רכיבי Material ב-GitHub.
בסרטון מוצגת דוגמה קצרה לאנימציות חזרה חזויות לפעילות בין אפליקציות ולחזרה למסך הבית באמצעות אפליקציית ההגדרות של Android.
- באנימציה, המשתמש מחליק חזרה כדי לחזור למסך ההגדרות הקודם – דוגמה לאנימציה שמופיעה בכמה פעילויות.
- עכשיו במסך הקודם, המשתמש מתחיל להחליק שוב לאחור, מוצגת תצוגה מקדימה של מסך הבית עם הטפט שלו – דוגמה לאנימציה של החזרה למסך הבית.
- המשתמש ממשיך להחליק ימינה, ומוצגת אנימציה של החלון שנעלם עד שהוא הופך לסמל במסך הבית.
- המשתמש חזר למסך הבית.
איך מוסיפים תמיכה בתנועות חזויות לאחור
הוספת אנימציות ומעברים בהתאמה אישית בתוך האפליקציה
אתם יכולים ליצור אנימציות ומעברים מותאמים אישית בנכס באפליקציה, אנימציות מותאמות אישית בפעילויות שונות ואנימציות מותאמות אישית בקטעים שונים באמצעות תנועות חזרה חזויות.
הוספת מעברים מותאמים אישית באמצעות Progress API
בגרסה 1.8.0-alpha01 ואילך של AndroidX Activity, אפשר להשתמש ב-API של התקדמות החיזוי לאחור כדי לפתח אנימציות בהתאמה אישית לתנועת החזרה האוטומטית לאחור באפליקציה. ממשקי ה-API של התקדמות מועילים ליצירת אנימציות לתצוגות, אבל יש להם מגבלות ביצירת אנימציות למעברים בין קטעים. ב-OnBackPressedCallback
הוספנו את השיטות handleOnBackProgressed
, handleOnBackCancelled
ו-handleOnBackStarted
כדי להנפיש אובייקטים בזמן שהמשתמש מחליק לאחור. צריך להשתמש בשיטות האלה אם אתם צריכים להתאים אישית יותר מאנימציות ברירת המחדל שסופקו על ידי המערכת או אנימציות של רכיבי Material.
אנחנו צופים שרוב האפליקציות ישתמשו בממשקי ה-API של AndroidX עם תאימות לאחור, אבל יש גם ממשקי API דומים של פלטפורמות בממשק OnBackAnimationCallback
שזמינים לבדיקה ב-Android 14 Developer Preview 1 ואילך.
שימוש ב-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
. - אנימציות חזויות פועלות רק במכשירים עם 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 |