קרוסלה עם פריסה בתנועה

Carousel הוא אובייקט עוזר תנועה כדי ליצור תצוגות קרוסלה בהתאמה אישית שמציגות רשימה של רכיבים שהמשתמש יכול לרפרף בו. בהשוואה לדרכים אחרות להטמעת תצוגות מפורטות, הכלי הזה מאפשר לך ליצור במהירות שינויים מורכבים בתנועה ובמימדים ל-Carousel באמצעות MotionLayout.

הווידג'ט Carousel תומך ברשימות בעלות התחלה וסוף וגם רשימות עם עיגול רשימות מקיפות.

הסבר על קרוסלה עם MotionLayout פועלת

נניח שרוצים ליצור תצוגה אופקית של Carousel, עם הפריט המרכזי מוגדל:

הפריסה הבסיסית הזו מכילה כמה תצוגות שמייצגות את Carousel הפריטים:

יוצרים MotionLayout עם שלושת המצבים הבאים ונותנים להם את המזהים:

  • הקודם
  • התחלה
  • הבא

אם מצב start תואם לפריסה הבסיסית, במצב הקודם והבא מצב שבו הפריטים Carousel מזיזים אחד שמאלה ו מימין, בהתאמה.

לדוגמה, ניקח את חמש הצפיות בתרשים 3 והניח שבהתחלה של המצבים 'ב', 'ג' ו-'ד' גלויות, ו-A ו-E מוצגים מחוץ למסך. סיום את המצב הקודם כך שהמיקום של A, B, C ו-D יהיו איפה B, ג', ד' ו-ה' היו, והתצוגות נעו משמאל לימין. בהבא ההפך צריך לקרות, ו-B, C, D ו-E עוברים למקום שבו א', ב'. C ו-D היו, והתצוגות נעו מימין לשמאל. מוצג בצורת 4:

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

מעברים.

באמצעות שלוש קבוצות האילוצים שמוגדרות בקובץ של סצנת התנועה, צרו מעברים קדימה ואחורה, בין התחלה והבא ואת המצב התחלה והקודם. הוספת handler של OnSwipe אל תפעיל את המעברים בתגובה לתנועה, כמו בדוגמה הבאה דוגמה:

    <Transition
        motion:constraintSetStart="@id/start"
        motion:constraintSetEnd="@+id/next"
        motion:duration="1000"
        android:id="@+id/forward">
        <OnSwipe
            motion:dragDirection="dragLeft"
            motion:touchAnchorSide="left" />
    </Transition>

    <Transition
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/previous"
        android:id="@+id/backward">
        <OnSwipe
            motion:dragDirection="dragRight"
            motion:touchAnchorSide="right" />
    </Transition>

אחרי שיוצרים את סצנת התנועה הבסיסית, צריך להוסיף כלי עזר של Carousel לפריסה והפניות לתצוגות לפי אותו סדר שבו הטמענו את הקודם אנימציה.

מגדירים את המאפיינים הבאים בכלי העזר של Carousel:

  • app:carousel_firstView: התצוגה שמייצגת את הרכיב הראשון Carousel – בדוגמה הזו, C.
  • app:carousel_previousState: המזהה ConstraintSet של הקודם .
  • app:carousel_nextState: מזהה ה-ConstraintSet של המצב הבא.
  • app:carousel_backwardTransition: Transition המזהה הוחל בין המצב התחלה למצב הקודם.
  • app:carousel_forwardTransition: המזהה Transition שהוחל בין המצבים התחלה והבא.

לדוגמה, בקובץ ה-XML של הפריסה יש משהו כזה:

    <androidx.constraintlayout.motion.widget.MotionLayout ... >

        <ImageView  android:id="@+id/imageView0" .. />
        <ImageView  android:id="@+id/imageView1" .. />
        <ImageView  android:id="@+id/imageView2" .. />
        <ImageView  android:id="@+id/imageView3" .. />
        <ImageView  android:id="@+id/imageView4" .. />

        <androidx.constraintlayout.helper.widget.Carousel
            android:id="@+id/carousel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:carousel_forwardTransition="@+id/forward"
            app:carousel_backwardTransition="@+id/backward"
            app:carousel_previousState="@+id/previous"
            app:carousel_nextState="@+id/next"
            app:carousel_infinite="true"
            app:carousel_firstView="@+id/imageView2"
            app:constraint_referenced_ids="imageView0,imageView1,imageView2,imageView3,imageView4" />

    </androidx.constraintlayout.motion.widget.MotionLayout>

צריך להגדיר מתאם Carousel בקוד:

Kotlin

carousel.setAdapter(object : Carousel.Adapter {
            override fun count(): Int {
              // Return the number of items in the Carousel.
            }

            override fun populate(view: View, index: Int) {
                // Implement this to populate the view at the given index.
            }

            override fun onNewItem(index: Int) {
                // Called when an item is set.
            }
        })

Java

carousel.setAdapter(new Carousel.Adapter() {
            @Override
            public int count() {
                // Return the number of items in the Carousel.
            }

            @Override
            public void populate(View view, int index) {
                // Populate the view at the given index.
            }

            @Override
            public void onNewItem(int index) {
                 // Called when an item is set.
            }
        });

הערות נוספות

בהתאם לפריט הנוכחי "נבחר" ב-Carousel, הצפיות יכול להיות שצריך להסתיר את הפריטים לפני או אחרי כן עבור Carousel התחלה וסיום. כינוי העוזר של Carousel את הפעולה הזו באופן אוטומטי. כברירת מחדל, הוא מסמן את הצפיות האלה כ-View.INVISIBLE ב- במצבים אלה, כך שהפריסה הכוללת לא משתנה.

יש מצב חלופי שבו כלי העזר Carousel מסמן במקום זאת את הצפיות האלה בתור View.GONE. אפשר להגדיר את המצב הזה באמצעות המאפיין הבא:

app:carousel_emptyViewsBehavior="gone"

דוגמאות

לדוגמאות נוספות לשימוש בכלי העזר של הקרוסלה, אפשר לעיין ב פרויקטים לדוגמה ב-GitHub.