MotionLayout के साथ कैरसेल

Carousel मोशन हेल्पर ऑब्जेक्ट जो एलिमेंट की सूची दिखाने वाले कस्टम कैरसेल व्यू बनाने में मदद करता है जिसे उपयोगकर्ता आगे से पढ़ सके. दूसरे तरीकों की तुलना में, देखें, तो यह सहायक आपको तेज़ी से जटिल गति और आयाम में परिवर्तन करने देता है अपने Carousel के लिए MotionLayout.

Carousel विजेट शुरू और खत्म होने के साथ-साथ सर्कुलर वाली सूचियों का इस्तेमाल करता है पूरी जानकारी वाली सूची.

MotionLayout के साथ कैरसेल कैसे काम करता है

मान लें कि आपको बीच में मौजूद आइटम के साथ एक हॉरिज़ॉन्टल Carousel व्यू बनाना है बड़ा:

इस बेसिक लेआउट में, Carousel आइटम के बारे में बताने वाले कई व्यू शामिल हैं:

इन तीन स्थितियों के साथ MotionLayout बनाएं और उन्हें आईडी दें:

  • पिछला
  • शुरू करें
  • आगे बढ़ें

अगर शुरू की स्थिति बेस लेआउट के हिसाब से है, तो पिछली स्थिति में और अगली स्थिति में Carousel आइटम एक से बाईं ओर शिफ़्ट हो गए हैं और दाईं ओर रखें.

उदाहरण के लिए, तीसरी इमेज में दिए गए पांच व्यू को लें और मान लें कि शुरुआत में स्थिति, व्यू B, C, और D दिख रहे हैं. साथ ही, A और E, स्क्रीन से बाहर हैं. शुरू पिछली स्थिति से आगे बढ़ें, ताकि A, B, C, और D की पोज़िशन B हो. C, D, और E प्रॉपर्टी के व्यू बाईं से दाईं ओर जा रहे हैं. अगले में होने पर, B, C, D, और E में A, B, और E का इस्तेमाल करते हैं. अंग्रेज़ी के छोटे अक्षर "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—इस उदाहरण में, सी.
  • app:carousel_previousState: पिछले आईडी का ConstraintSet आईडी राज्य.
  • app:carousel_nextState: अगली स्थिति वाला ConstraintSet आईडी.
  • app:carousel_backwardTransition: Transition आईडी को शुरू और पिछली स्थितियों के बीच लागू किया जाता है.
  • app:carousel_forwardTransition: Transition आईडी, जो शुरू करें और अगली स्थितियां.

उदाहरण के लिए, आपकी लेआउट एक्सएमएल फ़ाइल में कुछ ऐसा होता है:

    <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 अडैप्टर सेट अप करें:

KotlinJava
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 पर.