MotionLayout সহ ক্যারাউজেল

রচনা পদ্ধতি চেষ্টা করুন

জেটপ্যাক কম্পোজ হল Android এর জন্য প্রস্তাবিত UI টুলকিট। কম্পোজে কীভাবে ক্যারোজেল যোগ করবেন তা শিখুন।

ক্যারোজেল →

Carousel হল একটি মোশন হেল্পার অবজেক্ট যা কাস্টম ক্যারোজেল ভিউ তৈরি করে যা ব্যবহারকারীর মাধ্যমে স্কিম করতে পারে এমন উপাদানগুলির একটি তালিকা দেখায়। এই ধরনের দৃষ্টিভঙ্গি বাস্তবায়নের অন্যান্য উপায়ের তুলনায়, এই সাহায্যকারী আপনাকে MotionLayout এর সুবিধা নিয়ে আপনার Carousel জন্য দ্রুত জটিল গতি এবং মাত্রা পরিবর্তন করতে দেয়।

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 সহায়কের জন্য নিম্নলিখিত বৈশিষ্ট্যগুলি সেট করুন:

• app:carousel_firstView : যে দৃশ্যটি Carousel প্রথম উপাদানকে উপস্থাপন করে — এই উদাহরণে, C.
• app:carousel_previousState : আগের রাজ্যের ConstraintSet ID।
• app:carousel_nextState : পরবর্তী রাজ্যের ConstraintSet ID।
• 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 অ্যাডাপ্টার সেট আপ করুন:

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"

উদাহরণ

ক্যারোজেল হেল্পার ব্যবহার করে আরও উদাহরণের জন্য, গিটহাবের উদাহরণ প্রকল্পগুলি দেখুন।