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

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

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

طريقة عمل لوحة العرض الدوّارة مع MotionLayout

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

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

أنشِئ MotionLayout باستخدام الحالات الثلاث التالية وقدِّم له المعرّفات:

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

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

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

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

الانتقالات

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