MotionLayout
হল একটি লেআউট প্রকার যা আপনাকে আপনার অ্যাপে মোশন এবং উইজেট অ্যানিমেশন পরিচালনা করতে সাহায্য করে। MotionLayout
হল ConstraintLayout
এর একটি সাবক্লাস এবং এটি এর সমৃদ্ধ লেআউট ক্ষমতার উপর ভিত্তি করে তৈরি করে। ConstraintLayout
লাইব্রেরির অংশ হিসাবে, MotionLayout
একটি সমর্থন লাইব্রেরি হিসাবে উপলব্ধ।
MotionLayout
লেআউট ট্রানজিশন এবং জটিল মোশন হ্যান্ডলিংয়ের মধ্যে ব্যবধান পূরণ করে, সম্পত্তি অ্যানিমেশন ফ্রেমওয়ার্ক , TransitionManager
এবং CoordinatorLayout
মধ্যে বৈশিষ্ট্যের মিশ্রণ প্রদান করে।
লেআউটের মধ্যে ট্রানজিশন বর্ণনা করার পাশাপাশি, MotionLayout
আপনাকে যেকোনো লেআউট বৈশিষ্ট্য অ্যানিমেট করতে দেয়। অধিকন্তু, এটি অন্তর্নিহিতভাবে অনুসন্ধানযোগ্য রূপান্তর সমর্থন করে। এর মানে আপনি কিছু শর্তের উপর ভিত্তি করে ট্রানজিশনের মধ্যে যেকোন বিন্দু তাৎক্ষণিকভাবে দেখাতে পারেন, যেমন টাচ ইনপুট। MotionLayout
এছাড়াও কীফ্রেম সমর্থন করে, আপনার প্রয়োজন অনুসারে সম্পূর্ণ কাস্টমাইজড ট্রানজিশন সক্ষম করে।
MotionLayout
সম্পূর্ণরূপে ঘোষণামূলক, যার অর্থ আপনি XML-এ যেকোনো রূপান্তর বর্ণনা করতে পারেন, তা যত জটিলই হোক না কেন।
নকশা বিবেচনা
MotionLayout
উদ্দেশ্য হল UI উপাদানগুলিকে সরানো, পুনরায় আকার দেওয়া এবং অ্যানিমেট করা যার সাথে ব্যবহারকারীরা ইন্টারঅ্যাক্ট করে, যেমন বোতাম এবং শিরোনাম বার৷ একটি অকারণে বিশেষ প্রভাব হিসাবে আপনার অ্যাপে গতি ব্যবহার করবেন না। আপনার অ্যাপ কি করছে তা ব্যবহারকারীদের বুঝতে সাহায্য করতে এটি ব্যবহার করুন। গতির সাথে আপনার অ্যাপ ডিজাইন করার বিষয়ে আরও তথ্যের জন্য, মেটেরিয়াল ডিজাইন বিভাগটি বোঝার গতি দেখুন।
শুরু করুন
আপনার প্রকল্পে MotionLayout
ব্যবহার শুরু করতে এই পদক্ষেপগুলি অনুসরণ করুন৷
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") }
একটি
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>
একটি 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-এ দেখানো হিসাবে দৃশ্যের রঙগুলি এর গতির অংশ হিসাবে পরিবর্তন করতে চান।
নিম্নলিখিত কোড স্নিপেটে দেখানো হিসাবে প্রতিটি 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
সম্পর্কে আরও তথ্যের জন্য, নিম্নলিখিত সংস্থানগুলি দেখুন:
- Kotlin 03.2-এ উন্নত Android: MotionLayout সহ অ্যানিমেশন
- মোশন লেআউট উদাহরণ
- GitHub-এ MotionLayout/ConstraintLayout নমুনা
- MotionLayout এর ভূমিকা (প্রথম অংশ)
- MotionLayout এর ভূমিকা (২য় খণ্ড)
- মোশনলেআউটের ভূমিকা (তৃতীয় অংশ)
- MotionLayout এর ভূমিকা (চতুর্থ অংশ)