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

تجربة طريقة Compose
‫Jetpack Compose هي مجموعة أدوات واجهة المستخدم المقترَحة لنظام Android. تعرَّف على كيفية إضافة منصّة عرض بعناصر متغيّرة في Compose.
منصّة عرض بعناصر متغيّرة ←

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 وهمًا بمجموعة لا نهائية من العناصر من خلال إعادة طرق العرض الفعلية إلى مواضعها، ولكن تتم إعادة تهيئتها بالمحتوى الجديد المطابق. يوضّح الرسم البياني التالي هذه الآلية. انتبه إلى قيم "العنصر رقم"):

عمليات نقل

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

على سبيل المثال، يظهر لك ما يلي في ملف 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"

أمثلة

لمزيد من الأمثلة على استخدام العنصر المساعد لمنصّة العرض بعناصر متغيّرة `Carousel`، يمكنك الاطّلاع على نماذج المشاريع على GitHub.