لوحة عرض دوّارة مع تنسيق MotionLayout

إنّ Carousel عبارة عن كائن مساعد للحركة لإنشاء طرق عرض مخصّصة للوحة العرض الدوّارة تعرض قائمة بالعناصر التي يمكن للمستخدم الاطّلاع عليها. مقارنةً بالطرق الأخرى لتنفيذ طرق العرض هذه، يتيح لك هذا المساعد إجراء تغييرات معقدة في الحركة والأبعاد على Carousel بسرعة من خلال الاستفادة من MotionLayout.

يتوافق تطبيق Carousel المصغّر مع القوائم ذات البداية والنهاية بالإضافة إلى القوائم الدائرية.

كيفية عمل لوحة العرض الدوارة مع MotionLayout

لنفترض أنّك تريد إنشاء عرض Carousel أفقي مع تكبير العنصر الأوسط:

يحتوي هذا التنسيق الأساسي على عدة طرق عرض تمثّل عناصر Carousel:

أنشِئ MotionLayout مع الحالات الثلاث التالية واعرض لها المعرّفات:

• السابق
• بدء
• التالي

إذا كانت حالة start متوافقة مع التنسيق الأساسي، ففي الحالة السابقة والحالة التالية، يتم نقل عناصر Carousel بمقدار واحد إلى اليسار وإلى اليمين، على التوالي.

على سبيل المثال، خذ المشاهدات الخمس في الشكل 3 وافترض أنه في حالة البداية، تكون طرق العرض "ب" و"ج" و"د" مرئية، وأن "أ" و"هـ" خارج الشاشة. عليك إعداد الحالة السابقة بحيث تكون مواضع "أ" و"ب" و"ج" و"د" هي المواضع "ب" و"ج" و"د" و"هـ"، مع انتقال طرق العرض من اليسار إلى اليمين. في الحالة التالية، يجب أن يحدث العكس، مع انتقال B وC وD وE إلى الموضع A وB وC وD وانتقال المشاهدات من اليمين إلى اليسار. يظهر ذلك في الشكل 4:

من المهمّ أن ينتهي عدد المشاهدات تمامًا من النقطة التي تبدأ منها المشاهدات الأصلية. تمنحك ميزة Carousel وهمًا بجمع مجموعة لا حصر لها من العناصر من خلال إعادة المشاهدات الفعلية إلى ما كانت عليه، ولكن مع إعادة إعدادها باستخدام المحتوى المطابق الجديد. ويوضح الرسم البياني التالي هذه الآلية. انتبه لقيم "رقم العنصر"):

الانتقالات

باستخدام مجموعات القيود الثلاث هذه المحددة في ملف مشهد الحركة، يمكنك إنشاء عمليتَي انتقال، للأمام وللخلف بين حالتَي البدء والتالي والبداية والسابقة. أضِف معالج 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 في الرمز:

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.
            }
        })

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.