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

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

অ্যান্ড্রয়েডের জন্য Jetpack Compose হলো প্রস্তাবিত UI টুলকিট। Compose-এ কীভাবে ক্যারোসেল যোগ করতে হয় তা জানুন।

ক্যারোসেল →

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

Carousel উইজেটটি শুরু ও শেষ প্রান্তযুক্ত তালিকার পাশাপাশি বৃত্তাকার র‍্যাপ-অ্যারাউন্ড তালিকাও সমর্থন করে।

মোশনলেআউটের সাথে ক্যারোসেল কীভাবে কাজ করে

ধরুন আপনি একটি হরাইজন্টাল Carousel ভিউ তৈরি করতে চান, যেখানে মাঝের আইটেমটি বড় করা থাকবে:

এই মৌলিক লেআউটটিতে Carousel আইটেমগুলির প্রতিনিধিত্বকারী বেশ কয়েকটি ভিউ রয়েছে:

নিম্নলিখিত তিনটি স্টেট সহ একটি MotionLayout তৈরি করুন এবং সেগুলোকে আইডি দিন:

• পূর্ববর্তী
• শুরু
• পরবর্তী

যদি প্রারম্ভিক অবস্থাটি মূল বিন্যাসের অনুরূপ হয়, তবে পূর্ববর্তী ও পরবর্তী অবস্থায় Carousel আইটেমগুলো যথাক্রমে এক ঘর বামে ও এক ঘর ডানে সরে যায়।

উদাহরণস্বরূপ, চিত্র ৩-এর পাঁচটি ভিউ নিন এবং ধরে নিন যে শুরুর অবস্থায়, ভিউ B, C, এবং D দৃশ্যমান, এবং A ও E স্ক্রিনের বাইরে রয়েছে। পূর্ববর্তী অবস্থাটি এমনভাবে সেট করুন যাতে A, B, C, এবং D-এর অবস্থান সেখানেই থাকে যেখানে B, C, D, এবং E ছিল, এবং ভিউগুলো বাম থেকে ডানে চলাচল করে। পরবর্তী অবস্থায়, এর বিপরীতটি ঘটতে হবে, যেখানে B, C, D, এবং E সেই জায়গায় চলে আসবে যেখানে A, B, C, এবং D ছিল, এবং ভিউগুলো ডান থেকে বামে চলাচল করবে। এটি চিত্র ৪-এ দেখানো হয়েছে:

এটা অত্যন্ত গুরুত্বপূর্ণ যে ভিউগুলো ঠিক সেখানেই শেষ হবে যেখান থেকে মূল ভিউগুলো শুরু হয়েছিল। 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 আইডি।

উদাহরণস্বরূপ, আপনার লেআউট 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"

উদাহরণ

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