MotionLayout
הוא סוג פריסה שעוזר לנהל את התנועה והווידג'ט של האנימציה באפליקציה.
MotionLayout
הוא תת-מחלקה של
ConstraintLayout
ומתבסס על מגוון עשיר של
יכולות פריסה. כחלק מספריית ConstraintLayout
, MotionLayout
זמין בתור ספריית תמיכה.
MotionLayout
מגשר על הפער בין מעברי הפריסה ותנועה מורכבת
לטיפול, ומציע שילוב של תכונות בין האנימציה של הנכס
framework,
TransitionManager
, וגם
CoordinatorLayout
.
נוסף לתיאור המעברים בין הפריסות, MotionLayout
מאפשר לך
מוסיפים אנימציה לכל מאפייני הפריסה. בנוסף, הוא תומך מעצם טבעו
מעברים בין חשבונות. כלומר, אתם יכולים להציג באופן מיידי כל נקודה במהלך המעבר
בהתאם למצב מסוים, כמו קלט מגע. MotionLayout
תומך גם ב-
תמונות מפתח, שמאפשרים מעברים מותאמים אישית באופן מלא לפי הצרכים שלכם.
המונח MotionLayout
הוא הצהרתי לחלוטין, כלומר אפשר לתאר כל מעבר
XML, לא משנה עד כמה הוא מורכב.
שיקולים לגבי התכנון
MotionLayout
מיועד להזיז, לשנות את הגודל ולהנפיש רכיבי ממשק משתמש
של המשתמשים, למשל לחצנים וסרגלי כותרות. אין להשתמש בתנועה באפליקציה בתור
אפקט מיוחד מיותר. אפשר להיעזר בה כדי לעזור למשתמשים להבין מהי האפליקציה
לעשות. למידע נוסף על עיצוב האפליקציה עם תנועה, אפשר לעיין ב
הקטע Material Design הבנה
.
שנתחיל?
כדי להתחיל להשתמש ב-MotionLayout
בפרויקט, צריך לבצע את השלבים הבאים.
-
מוסיפים את התלות
ConstraintLayout
: כדי להשתמש בהMotionLayout
בפרויקט, צריך להוסיף אתConstraintLayout
2.0 תלויה באפליקציה שלך קובץbuild.gradle
. אם משתמשים ב-AndroidX, צריך להוסיף את הקוד של התלות הזאת:מגניב
dependencies { implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha14" // To use constraintlayout in compose implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14" }
Kotlin
dependencies { implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha14") // To use constraintlayout in compose implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14") }
-
יוצרים קובץ
MotionLayout
:MotionLayout
הוא תת-מחלקה שלConstraintLayout
, כך שאפשר לשנות כלConstraintLayout
קיים ב-MotionLayout
של החלפת שם הכיתה בקובץ משאבי הפריסה, כפי שמוצג הדוגמאות הבאות:AndroidX
<!-- before: ConstraintLayout --> <androidx.constraintlayout.widget.ConstraintLayout .../> <!-- after: MotionLayout --> <androidx.constraintlayout.motion.widget.MotionLayout .../>
ספריית תמיכה
<!-- before: ConstraintLayout --> <android.support.constraint.ConstraintLayout .../> <!-- after: MotionLayout --> <android.support.constraint.motion.MotionLayout .../>
לפניכם דוגמה מלאה לקובץ
MotionLayout
: מגדיר את הפריסה שמוצגת בתרשים 1:AndroidX
<?xml version="1.0" encoding="utf-8"?> <!-- activity_main.xml --> <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_01" tools:showPaths="true"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" android:text="Button" /> </androidx.constraintlayout.motion.widget.MotionLayout>
ספריית תמיכה
<?xml version="1.0" encoding="utf-8"?> <!-- activity_main.xml --> <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_01" tools:showPaths="true"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" android:text="Button" /> </android.support.constraint.motion.MotionLayout>
-
Create a MotionScene: ב-
MotionLayout
הקודם לדוגמה, המאפייןapp:layoutDescription
מפנה סצנה של תנועה. סצנת תנועה היא קובץ משאבים בפורמט XML. במסגרת<MotionScene>
רכיב שורש, סצנת תנועה מכילה את כל תיאורי התנועה של של הפריסה המתאימה. כדי להפריד בין פרטי הפריסה לבין התנועה בתיאורים, כלMotionLayout
מפנה לתנועה נפרדת לסצנה. ההגדרות בסצנת התנועה מקבלות קדימות על פני הגדרות דומות הגדרות בMotionLayout
.הנה דוגמה לקובץ של סצינת תנועה שמתארת את התמונה האופקית הבסיסית תנועה באיור 1:
<?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> <OnSwipe motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene>
שימו לב:
-
<Transition>
מכיל את ההגדרה הבסיסית של התנועה.-
motion:constraintSetStart
והקבוצהmotion:constraintSetEnd
הן הפניות אל נקודות הקצה של התנועה. נקודות הקצה האלה מוגדרות רכיבי<ConstraintSet>
מאוחר יותר בסצנת התנועה. -
motion:duration
מציין את מספר אלפיות השנייה שנדרשת להשלמת התנועה.
-
-
<OnSwipe>
מאפשר ליצור בקרת מגע לתנועה.-
motion:touchAnchorId
מתייחס לתצוגה שהמשתמש יכול להחליק ולגרור. -
המשמעות של
motion:touchAnchorSide
והתצוגה גוררת מהצד הימני. -
motion:dragDirection
מתייחס להתקדמות את הכיוון של הגרירה. לדוגמה, המשמעות שלmotion:dragDirection="dragRight"
היא התקדמות עולה ככל שהתצוגה נגררת ימינה.
-
-
<ConstraintSet>
הוא המקום שבו מגדירים את המגבלות השונות שמתארות את התנועה. בדוגמה הזו, מוגדר<ConstraintSet>
אחד עבור כל נקודת קצה בתנועה. נקודות הקצה האלה ממורכזות במאונך באמצעותapp:layout_constraintTop_toTopOf="parent"
ועםapp:layout_constraintBottom_toBottomOf="parent"
. אופקית, נקודות הקצה נמצאות בקצה השמאלי ובקצה הימני של מסך.
כדי לראות בצורה מפורטת יותר את האלמנטים השונים שבהם מוצגת סצנת תנועה תומך ב- דוגמאות לפריסת תנועה.
-
מאפיינים משולבים
בתוך קובץ של סצנה עם תנועה, רכיבי ConstraintSet
יכולים להכיל עוד
מאפיינים שעברו אינטרפולציה במהלך המעבר. נוסף על המיקום,
גבולות, המאפיינים הבאים משתנים על ידי MotionLayout
:
alpha
visibility
elevation
rotation
,rotationX
rotationY
translationX
,translationY
translationZ
scaleX
,scaleY
מאפיינים מותאמים אישית
בתוך <Constraint>
, אפשר להשתמש ברכיב <CustomAttribute>
כדי לציין
מעבר של מאפיינים שלא קשורים רק למיקום או ל-View
.
<Constraint android:id="@+id/button" ...> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60"/> </Constraint>
ל-<CustomAttribute>
יש שני מאפיינים משלו:
- השדה
motion:attributeName
הוא שדה חובה, והוא צריך להתאים לאובייקט עם getter ו שמרכיבות את העין. הרכיב המקבל ורכיב המגדיר צריכים להתאים לדפוס מסוים. עבור לדוגמה,backgroundColor
נתמך, מפני שהתצוגה כוללתgetBackgroundColor()
ו-setBackgroundColor()
. - המאפיין האחר שצריך לציין מבוסס על סוג הערך. אפשר לבחור מבין האפשרויות
אלה הסוגים הנתמכים:
motion:customColorValue
לצבעיםmotion:customIntegerValue
למספרים שלמיםmotion:customFloatValue
לצפיםmotion:customStringValue
למחרוזותmotion:customDimension
למאפייניםmotion:customBoolean
לערך בוליאני
כשמציינים מאפיין מותאם אישית, צריך להגדיר ערכים של נקודות קצה גם במאפיין ההתחלה וגם
בסוף <ConstraintSet>
רכיבים.
שינוי צבע הרקע
על בסיס הדוגמה הקודמת, נניח שאתם רוצים לשנות את צבעי התצוגה כחלק מהתנועה שלו, כפי שמוצג באיור 2.
צריך להוסיף רכיב <CustomAttribute>
לכל רכיב ConstraintSet
, כפי שמוצג
את קטע הקוד הבא:
<ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent"> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent"> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#9999FF" /> </Constraint> </ConstraintSet>
מאפיינים נוספים של פריסת תנועה
בנוסף למאפיינים שבדוגמה הקודמת, ל-MotionLayout
יש
שאולי תרצו לציין:
app:applyMotionScene="boolean"
מציין אם להחיל את סצנת התנועה. ערך ברירת המחדל של המאפיין הזה הואtrue
.app:showPaths="boolean"
מציין אם להציג את נתיבי התנועה התנועה רצה. ערך ברירת המחדל של המאפיין הזה הואfalse
.- בעזרת
app:progress="float"
אפשר לציין במפורש את התקדמות המעבר. שלך יכול להשתמש בכל ערך של נקודה צפה (floating-point) מ-0
(התחלת המעבר) אל1
(סיום המעבר). - בעזרת
app:currentState="reference"
אפשר לצייןConstraintSet
ספציפי. app:motionDebug
מאפשר להציג מידע נוסף על תוצאות ניפוי הבאגים לגבי תנועה. הערכים האפשריים הם"SHOW_PROGRESS"
,"SHOW_PATH"
או"SHOW_ALL"
.
מקורות מידע נוספים
אפשר להיעזר במקורות המידע הבאים כדי לקבל מידע נוסף על MotionLayout
:
- Android מתקדם ב-Kotlin 03.2: אנימציה עם MotionLayout
- דוגמאות לפריסת תנועה
- דוגמאות MotionLayout/ConstraintLayout ב-GitHub
- מבוא לפריסה בתנועה (חלק I)
- מבוא לפריסת תנועה (חלק II)
- מבוא לפריסת תנועה (חלק III)
- מבוא לפריסת תנועה (חלק IV)