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

Compose-এর মাধ্যমে চেষ্টা করুন
Jetpack Compose হল Android-এর জন্য সাজেস্ট করা UI টুলকিট। Compose-এ কীভাবে ক্যারোজেল যোগ করতে হয় তা জানুন।
ক্যারোজেল →

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

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, 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 আইডি।
  • 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 অ্যাডাপ্টার সেট-আপ করুন:

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.
            }
        })

জাভা

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-এ উদাহরণ প্রোজেক্ট দেখুন।