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

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

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

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

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

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

নকশা বিবেচনা

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

শুরু করুন

আপনার প্রকল্পে MotionLayout ব্যবহার শুরু করতে এই পদক্ষেপগুলি অনুসরণ করুন৷

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

    গ্রোভি 

    dependencies {
    implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha14"
    // To use constraintlayout in compose
    implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14"
}

    কোটলিন

    dependencies {
    implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha14")
    // To use constraintlayout in compose
    implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14")
}

  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 ফাইলের একটি সম্পূর্ণ উদাহরণ, যা চিত্র 1 এ দেখানো বিন্যাসটিকে সংজ্ঞায়িত করে:

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

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

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

    <?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" ব্যবহার করে উল্লম্বভাবে কেন্দ্রীভূত করা হয়েছে। অনুভূমিকভাবে, শেষ পয়েন্টগুলি স্ক্রিনের বাম এবং ডান দিকে রয়েছে।

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

ইন্টারপোলেটেড বৈশিষ্ট্য

একটি গতি দৃশ্য ফাইলের মধ্যে, 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
    • motion:customFloatValue
    • motion:customStringValue
    • motion:customDimension
    • motion:customBoolean

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

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

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

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

নিম্নলিখিত কোড স্নিপেটে দেখানো হিসাবে প্রতিটি 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 বৈশিষ্ট্য

পূর্ববর্তী উদাহরণের বৈশিষ্ট্যগুলি ছাড়াও, 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 সম্পর্কে আরও তথ্যের জন্য, নিম্নলিখিত সংস্থানগুলি দেখুন: