MotionLayout এর সাথে গতি এবং উইজেট অ্যানিমেশন পরিচালনা করুন

কম্পোজ পদ্ধতিটি চেষ্টা করুন
অ্যান্ড্রয়েডের জন্য Jetpack Compose হলো প্রস্তাবিত UI টুলকিট। Compose-এ কীভাবে অ্যানিমেশন ব্যবহার করতে হয় তা শিখুন।
কম্পোজে অ্যানিমেশন →

MotionLayout হলো এক ধরনের লেআউট যা আপনার অ্যাপে মোশন এবং উইজেট অ্যানিমেশন পরিচালনা করতে সাহায্য করে। MotionLayout হলো ConstraintLayout একটি সাবক্লাস এবং এটি এর সমৃদ্ধ লেআউট সক্ষমতার উপর ভিত্তি করে তৈরি। ConstraintLayout লাইব্রেরির অংশ হিসেবে, MotionLayout একটি সাপোর্ট লাইব্রেরি হিসেবে উপলব্ধ।

MotionLayout প্রপার্টি অ্যানিমেশন ফ্রেমওয়ার্ক , TransitionManager এবং CoordinatorLayout বৈশিষ্ট্যগুলোর সংমিশ্রণ প্রদান করে লেআউট ট্রানজিশন এবং জটিল মোশন হ্যান্ডলিং-এর মধ্যকার ব্যবধান পূরণ করে।

চিত্র ১. মৌলিক স্পর্শ-নিয়ন্ত্রিত গতি।

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

MotionLayout সম্পূর্ণরূপে ডিক্লারেটিভ, যার অর্থ হলো আপনি XML-এ যেকোনো ট্রানজিশন বর্ণনা করতে পারেন, তা যতই জটিল হোক না কেন।

নকশা বিবেচনা

MotionLayout উদ্দেশ্য হলো বাটন এবং টাইটেল বারের মতো UI এলিমেন্টগুলোকে সরানো, আকার পরিবর্তন করা এবং অ্যানিমেট করা, যেগুলোর সাথে ব্যবহারকারীরা ইন্টারঅ্যাক্ট করে। আপনার অ্যাপে মোশনকে একটি অপ্রয়োজনীয় স্পেশাল ইফেক্ট হিসেবে ব্যবহার করবেন না। আপনার অ্যাপ কী করছে, তা ব্যবহারকারীদের বোঝাতে এটি ব্যবহার করুন। মোশন ব্যবহার করে আপনার অ্যাপ ডিজাইন করার বিষয়ে আরও তথ্যের জন্য, ম্যাটেরিয়াল ডিজাইনের ‘ আন্ডারস্ট্যান্ডিং মোশন’ অংশটি দেখুন।

শুরু করুন

আপনার প্রজেক্টে MotionLayout ব্যবহার শুরু করতে এই ধাপগুলো অনুসরণ করুন।

  1. ConstraintLayout ডিপেন্ডেন্সি যোগ করুন: আপনার প্রজেক্টে MotionLayout ব্যবহার করতে, আপনার অ্যাপের build.gradle ফাইলে ConstraintLayout 2.0 ডিপেন্ডেন্সিটি যোগ করুন। আপনি যদি AndroidX ব্যবহার করেন, তাহলে নিম্নলিখিত ডিপেন্ডেন্সিটি যোগ করুন:

    গ্রোভি 

    dependencies {
    implementation "androidx.constraintlayout:constraintlayout:2.2.1"
    // To use constraintlayout in compose
    implementation "androidx.constraintlayout:constraintlayout-compose:1.1.1"
}

    কোটলিন 

    dependencies {
    implementation("androidx.constraintlayout:constraintlayout:2.2.1")
    // To use constraintlayout in compose
    implementation("androidx.constraintlayout:constraintlayout-compose:1.1.1")
}

  2. একটি MotionLayout ফাইল তৈরি করুন: MotionLayout হলো ConstraintLayout এর একটি সাবক্লাস, তাই আপনি আপনার লেআউট রিসোর্স ফাইলে ক্লাসের নামটি পরিবর্তন করে যেকোনো বিদ্যমান ConstraintLayout MotionLayout এ রূপান্তর করতে পারেন, যেমনটি নিম্নলিখিত উদাহরণগুলিতে দেখানো হয়েছে:

    অ্যান্ড্রয়েডএক্স 

    <!-- before: ConstraintLayout -->
<androidx.constraintlayout.widget.ConstraintLayout .../>
<!-- after: MotionLayout -->
<androidx.constraintlayout.motion.widget.MotionLayout .../>

    লাইব্রেরি সমর্থন করুন 

    <!-- before: ConstraintLayout -->
<android.support.constraint.ConstraintLayout .../>
<!-- after: MotionLayout -->
<android.support.constraint.motion.MotionLayout .../>

    এখানে একটি MotionLayout ফাইলের সম্পূর্ণ উদাহরণ দেওয়া হলো, যা চিত্র ১-এ দেখানো লেআউটটি সংজ্ঞায়িত করে:

    অ্যান্ড্রয়েডএক্স 

    <?xml version="1.0" encoding="utf-8"?>
<!-- activity_main.xml -->
<androidx.constraintlayout.motion.widget.MotionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/motionLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/scene_01"
    tools:showPaths="true">

    <View
        android:id="@+id/button"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:background="@color/colorAccent"
        android:text="Button" />

</androidx.constraintlayout.motion.widget.MotionLayout>

    লাইব্রেরি সমর্থন করুন 

    <?xml version="1.0" encoding="utf-8"?>
<!-- activity_main.xml -->
<android.support.constraint.motion.MotionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/motionLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/scene_01"
    tools:showPaths="true">

    <View
        android:id="@+id/button"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:background="@color/colorAccent"
        android:text="Button" />

</android.support.constraint.motion.MotionLayout>

  3. একটি মোশনসিন তৈরি করুন: পূর্ববর্তী MotionLayout উদাহরণে, ` app:layoutDescription অ্যাট্রিবিউটটি একটি মোশনসিনকে নির্দেশ করে। একটি মোশনসিন হলো একটি XML রিসোর্স ফাইল। এর <MotionScene> ` রুট এলিমেন্টের মধ্যে, একটি মোশনসিনে সংশ্লিষ্ট লেআউটের জন্য সমস্ত মোশন ডেসক্রিপশন থাকে। লেআউটের তথ্যকে মোশন ডেসক্রিপশন থেকে আলাদা রাখতে, প্রতিটি MotionLayout একটি পৃথক মোশনসিনকে নির্দেশ করে। মোশনসিনের সংজ্ঞাগুলো MotionLayout যেকোনো অনুরূপ সংজ্ঞার চেয়ে অগ্রাধিকার পায়।

    এখানে একটি উদাহরণ মোশন সিন ফাইল দেওয়া হলো, যা চিত্র ১-এর মৌলিক অনুভূমিক গতি বর্ণনা করে:

    <?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/end"
        motion:duration="1000">
        <OnSwipe
            motion:touchAnchorId="@+id/button"
            motion:touchAnchorSide="right"
            motion:dragDirection="dragRight" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginStart="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginEnd="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>

</MotionScene>

    নিম্নলিখিত বিষয়গুলো লক্ষ্য করুন:

    • <Transition> এ গতির মূল সংজ্ঞাটি থাকে।

      • motion:constraintSetStart এবং motion:constraintSetEnd হলো মোশনের শেষবিন্দুগুলোর রেফারেন্স। এই শেষবিন্দুগুলো মোশন সিনের পরবর্তী অংশে <ConstraintSet> এলিমেন্টগুলোতে সংজ্ঞায়িত করা হয়।

      • motion:duration নির্দিষ্ট করে যে গতিটি সম্পূর্ণ হতে কত মিলিসেকেন্ড সময় লাগবে।

    • <OnSwipe> আপনাকে গতির জন্য টাচ কন্ট্রোল তৈরি করতে দেয়।

      • motion:touchAnchorId বলতে সেই ভিউটিকে বোঝায় যেটি ব্যবহারকারী সোয়াইপ এবং ড্র্যাগ করতে পারেন।

      • motion:touchAnchorSide অর্থ হলো ভিউটিকে ডান দিক থেকে ড্র্যাগ করা হচ্ছে।

      • motion:dragDirection ড্র্যাগের অগ্রগতির দিক নির্দেশ করে। উদাহরণস্বরূপ, motion:dragDirection="dragRight" এর অর্থ হলো, ভিউটিকে ডানদিকে ড্র্যাগ করার সাথে সাথে অগ্রগতির হার বাড়বে।

    • <ConstraintSet> হলো সেই জায়গা যেখানে আপনি আপনার গতি বর্ণনা করে এমন বিভিন্ন সীমাবদ্ধতা নির্ধারণ করেন। এই উদাহরণে, আপনার গতির প্রতিটি প্রান্তবিন্দুর জন্য একটি করে <ConstraintSet> নির্ধারণ করা হয়েছে। এই প্রান্তবিন্দুগুলোকে উল্লম্বভাবে কেন্দ্রে রাখা হয়েছে app:layout_constraintTop_toTopOf="parent" এবং app:layout_constraintBottom_toBottomOf="parent" ব্যবহার করে। আনুভূমিকভাবে, প্রান্তবিন্দুগুলো স্ক্রিনের একেবারে বাম এবং ডান দিকে অবস্থিত।

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

ইন্টারপোলেটেড অ্যাট্রিবিউট

একটি মোশন সিন ফাইলের মধ্যে, ConstraintSet এলিমেন্টগুলিতে অতিরিক্ত অ্যাট্রিবিউট থাকতে পারে যা ট্রানজিশনের সময় ইন্টারপোলেট করা হয়। পজিশন এবং বাউন্ডস ছাড়াও, MotionLayout দ্বারা নিম্নলিখিত অ্যাট্রিবিউটগুলি ইন্টারপোলেট করা হয়:

  • alpha
  • visibility
  • elevation
  • rotation , rotationX , rotationY
  • translationX , translationY , translationZ
  • scaleX , scaleY

কাস্টম অ্যাট্রিবিউট

একটি <Constraint> ভিতরে, আপনি <CustomAttribute> এলিমেন্টটি ব্যবহার করে এমন অ্যাট্রিবিউটগুলির জন্য একটি ট্রানজিশন নির্দিষ্ট করতে পারেন, যেগুলি কেবল পজিশন বা View অ্যাট্রিবিউটের সাথে সম্পর্কিত নয়।

<Constraint
    android:id="@+id/button" ...>
    <CustomAttribute
        motion:attributeName="backgroundColor"
        motion:customColorValue="#D81B60"/>
</Constraint>

একটি <CustomAttribute> এর নিজস্ব দুটি অ্যাট্রিবিউট থাকে:

  • motion:attributeName আবশ্যক এবং এটি অবশ্যই গেটার ও সেটার মেথডযুক্ত একটি অবজেক্টের সাথে মিলতে হবে। গেটার এবং সেটারকে অবশ্যই একটি নির্দিষ্ট প্যাটার্নের সাথে মিলতে হবে। উদাহরণস্বরূপ, backgroundColor সমর্থিত, কারণ ভিউটির অন্তর্নিহিত getBackgroundColor() এবং setBackgroundColor() মেথড রয়েছে।
  • অন্য যে অ্যাট্রিবিউটটি আপনাকে অবশ্যই প্রদান করতে হবে, তা ভ্যালু টাইপের উপর ভিত্তি করে নির্ধারিত হয়। নিম্নলিখিত সমর্থিত টাইপগুলো থেকে বেছে নিন:
    • রঙের জন্য motion:customColorValue
    • পূর্ণসংখ্যার জন্য motion:customIntegerValue
    • float-এর জন্য motion:customFloatValue
    • স্ট্রিংগুলির জন্য motion:customStringValue
    • ডাইমেনশনের জন্য motion:customDimension
    • বুলিয়ানের জন্য motion:customBoolean

কাস্টম অ্যাট্রিবিউট নির্দিষ্ট করার সময়, start এবং end উভয় <ConstraintSet> এলিমেন্টেই এন্ডপয়েন্ট ভ্যালু নির্ধারণ করুন।

পটভূমির রঙ পরিবর্তন করুন

পূর্ববর্তী উদাহরণের উপর ভিত্তি করে, ধরুন আপনি চান যে দৃশ্যটির গতির অংশ হিসেবে এর রং পরিবর্তন হোক, যেমনটি চিত্র ২-এ দেখানো হয়েছে।

চিত্র ২। দৃশ্যটি চলার সাথে সাথে এর পটভূমির রঙ পরিবর্তন করে।

নিম্নলিখিত কোড স্নিপেটে দেখানো অনুযায়ী, প্রতিটি ConstraintSet এলিমেন্টে একটি <CustomAttribute> এলিমেন্ট যোগ করুন:

<ConstraintSet android:id="@+id/start">
    <Constraint
        android:id="@+id/button"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_marginStart="8dp"
        motion:layout_constraintBottom_toBottomOf="parent"
        motion:layout_constraintStart_toStartOf="parent"
        motion:layout_constraintTop_toTopOf="parent">
        <CustomAttribute
            motion:attributeName="backgroundColor"
            motion:customColorValue="#D81B60" />
    </Constraint>
</ConstraintSet>

<ConstraintSet android:id="@+id/end">
    <Constraint
        android:id="@+id/button"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_marginEnd="8dp"
        motion:layout_constraintBottom_toBottomOf="parent"
        motion:layout_constraintEnd_toEndOf="parent"
        motion:layout_constraintTop_toTopOf="parent">
        <CustomAttribute
            motion:attributeName="backgroundColor"
            motion:customColorValue="#9999FF" />
    </Constraint>
</ConstraintSet>

অতিরিক্ত মোশনলেআউট অ্যাট্রিবিউট

পূর্ববর্তী উদাহরণে উল্লিখিত অ্যাট্রিবিউটগুলো ছাড়াও, MotionLayout আরও কিছু অ্যাট্রিবিউট আছে যা আপনি নির্দিষ্ট করতে চাইতে পারেন:

  • app:applyMotionScene="boolean" অ্যাট্রিবিউটটি নির্দেশ করে যে মোশন সিনটি প্রয়োগ করা হবে কি না। এই অ্যাট্রিবিউটের ডিফল্ট মান হলো true ।
  • app:showPaths="boolean" নির্দেশ করে যে মোশন চলার সময় তার পাথগুলো দেখানো হবে কি না। এই অ্যাট্রিবিউটের ডিফল্ট মান হলো false ।
  • app:progress="float" আপনাকে ট্রানজিশনের অগ্রগতি স্পষ্টভাবে নির্দিষ্ট করার সুযোগ দেয়। আপনি 0 (ট্রানজিশনের শুরু) থেকে 1 (ট্রানজিশনের শেষ) পর্যন্ত যেকোনো ফ্লোটিং-পয়েন্ট মান ব্যবহার করতে পারেন।
  • app:currentState="reference" আপনাকে একটি নির্দিষ্ট ConstraintSet উল্লেখ করার সুযোগ দেয়।
  • app:motionDebug আপনাকে মোশনটি সম্পর্কে অতিরিক্ত ডিবাগ তথ্য প্রদর্শন করতে দেয়। এর সম্ভাব্য মানগুলো হলো "SHOW_PROGRESS" , "SHOW_PATH" , অথবা "SHOW_ALL" ।

অতিরিক্ত সম্পদ

MotionLayout সম্পর্কে আরও তথ্যের জন্য, নিম্নলিখিত উৎসগুলো দেখুন: