ট্রানজিশন ব্যবহার করে লেআউট পরিবর্তন অ্যানিমেট করুন

Compose-এর মাধ্যমে চেষ্টা করুন

Jetpack Compose হল Android-এর জন্য সাজেস্ট করা UI টুলকিট। Compose-এ কীভাবে অ্যানিমেশন ব্যবহার করতে হয় তা জানুন।

AnimatedContent →

মনে রাখবেন: এই ডকুমেন্টেশনে একই অ্যাক্টিভিটির মধ্যে লেআউটের মধ্যে ট্রানজিশন কীভাবে তৈরি করতে হয় তা বর্ণনা করা হয়েছে। ব্যবহারকারী এক অ্যাক্টিভিটি থেকে অন্য অ্যাক্টিভিটিতে গেলে, অ্যানিমেশন ব্যবহার করে অ্যাক্টিভিটি শুরু করুন নিবন্ধটি পড়ুন।

Android-এর ট্রানজিশন ফ্রেমওয়ার্ক আপনাকে শুরু ও শেষের লেআউট প্রদান করে আপনার UI-তে সব ধরনের মোশন অ্যানিমেট করতে দেয়। আপনি কী ধরনের অ্যানিমেশন চান তা বেছে নিতে পারবেন—যেমন ভিউ ফেড ইন বা আউট করা অথবা ভিউয়ের সাইজ পরিবর্তন করা—এবং ট্রানজিশন ফ্রেমওয়ার্ক নির্ধারণ করে শুরুর লেআউট থেকে শেষের লেআউট পর্যন্ত কীভাবে অ্যানিমেট করতে হবে।

ট্রানজিশন ফ্রেমওয়ার্কে নিম্নলিখিত ফিচারগুলি অন্তর্ভুক্ত:

• গ্রুপ-লেভেল অ্যানিমেশন: ভিউ হায়ারার্কির সব ভিউতে অ্যানিমেশন এফেক্ট প্রয়োগ করুন।
• বিল্ট-ইন অ্যানিমেশন: ফেড আউট বা মুভমেন্টের মতো সাধারণ এফেক্টের জন্য আগে থেকে নির্দিষ্ট অ্যানিমেশন ব্যবহার করুন।
• রিসোর্স ফাইল সংক্রান্ত সহায়তা: লেআউট রিসোর্স ফাইল থেকে ভিউ হায়ারার্কি ও বিল্ট-ইন অ্যানিমেশন লোড করুন।
• লাইফসাইকেল কলব্যাক: কলব্যাক পান যা অ্যানিমেশন এবং হায়ারার্কি পরিবর্তন প্রক্রিয়ার উপর নিয়ন্ত্রণ প্রদান করে।

দুটি লেআউটের মধ্যে অ্যানিমেট করার প্রাথমিক প্রসেস নিচে দেওয়া হল:

1. শুরু ও শেষের লেআউটের জন্য Scene অবজেক্ট তৈরি করুন। তবে, শুরুর লেআউটের দৃশ্য প্রায়ই বর্তমান লেআউট থেকে অটোমেটিক নির্ধারণ করা হয়।
2. আপনি কী ধরনের অ্যানিমেশন চান তা নির্ধারণ করতে একটি Transition অবজেক্ট তৈরি করুন।
3. TransitionManager.go() কল করুন, এবং সিস্টেম লেআউট সোয়্যাপ করার জন্য অ্যানিমেশন রান করে।

১ নম্বর ছবির ডায়াগ্রাম আপনার লেআউট, দৃশ্য, ট্রানজিশন ও ফাইনাল অ্যানিমেশনের মধ্যে সম্পর্ক ব্যাখ্যা করে।

ছবি ১. ট্রানজিশন ফ্রেমওয়ার্ক কীভাবে অ্যানিমেশন তৈরি করে তার প্রাথমিক ইলাস্ট্রেশন।

দৃশ্য তৈরি করুন

দৃশ্য ভিউ হায়ারার্কির অবস্থা স্টোর করে, যার মধ্যে এর সব ভিউ এবং সেগুলির প্রপার্টি ভ্যালু অন্তর্ভুক্ত। ট্রানজিশন ফ্রেমওয়ার্ক শুরু ও শেষের দৃশ্যের মধ্যে অ্যানিমেশন রান করতে পারে।

আপনি লেআউট রিসোর্স ফাইল বা আপনার কোডের ভিউয়ের গ্রুপ থেকে দৃশ্য তৈরি করতে পারবেন। তবে, আপনার ট্রানজিশনের জন্য শুরুর দৃশ্যটি প্রায়শই বর্তমান UI থেকে অটোমেটিক নির্ধারিত হয়।

এছাড়াও, কোনও দৃশ্য তার নিজস্ব অ্যাকশন নির্ধারণ করতে পারে যা আপনি দৃশ্য পরিবর্তন করলে রান করে। আপনি কোনও দৃশ্যে ট্রানজিশন করার পরে ভিউ সেটিংস পরিষ্কার করার জন্য এই ফিচারটি উপযোগী।

মনে রাখবেন: ফ্রেমওয়ার্ক দৃশ্য ব্যবহার না করেই একটি ভিউ হায়ারার্কিতে পরিবর্তন অ্যানিমেট করতে পারে, যেমনটি দৃশ্য ছাড়াই ট্রানজিশন প্রয়োগ করুন বিভাগে বর্ণনা করা হয়েছে। তবে, ট্রানজিশন নিয়ে কাজ করার জন্য দৃশ্য বোঝা জরুরি।

লেআউট রিসোর্স থেকে দৃশ্য তৈরি করুন

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

লেআউট রিসোর্স ফাইল থেকে Scene ইনস্ট্যান্স তৈরি করতে, আপনার লেআউট থেকে সিন রুট ViewGroup হিসেবে ফিরিয়ে আনুন। তারপর, Scene.getSceneForLayout() ফাংশনটি কল করুন, যেখানে দৃশ্যটির রুট এবং লেআউট ফাইলের রিসোর্স আইডি থাকবে, যা দৃশ্যটির ভিউ হায়ারার্কি ধারণ করে।

দৃশ্যের জন্য লেআউট নির্ধারণ করুন

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

উদাহরণে নিম্নলিখিত লেআউট সংজ্ঞা রয়েছে:

• টেক্সট লেবেল ও চাইল্ড FrameLayout সহ অ্যাক্টিভিটির মূল লেআউট।
• প্রথম দৃশ্যের জন্য দুটি টেক্সট ফিল্ড সহ একটি ConstraintLayout।
• দ্বিতীয় দৃশ্যের জন্য একটি ConstraintLayout, যেখানে একই দুটি টেক্সট ফিল্ড অন্য ক্রমে রয়েছে।

উদাহরণটি এমনভাবে ডিজাইন করা হয়েছে যাতে সমস্ত অ্যানিমেশন অ্যাক্টিভিটির জন্য মূল লেআউটের চাইল্ড লেআউটের মধ্যে ঘটে। প্রধান লেআউটে টেক্সট লেবেল স্থির থাকে।

অ্যাক্টিভিটির জন্য প্রধান লেআউট নিচে দেখানো হয়েছে:

res/layout/activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/master_layout">
    <TextView
        android:id="@+id/title"
        ...
        android:text="Title"/>
    <FrameLayout
        android:id="@+id/scene_root">
        <include layout="@layout/a_scene" />
    </FrameLayout>
</LinearLayout>

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

প্রথম দৃশ্যের লেআউট এইভাবে দেখানো হয়েছে:

res/layout/a_scene.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:id="@+id/text_view1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
    <TextView
        android:id="@+id/text_view2"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 2"
        app:layout_constraintTop_toBottomOf="@id/text_view1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

দ্বিতীয় দৃশ্যের লেআউটে একই আইডি সহ একই দুটি টেক্সট ফিল্ড রয়েছে, তবে সেগুলি আলাদা ক্রমে সাজানো আছে। এটি এইভাবে সংজ্ঞায়িত করা হয়:

res/layout/another_scene.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:id="@+id/text_view2"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    <TextView
        android:id="@+id/text_view1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 1"
        app:layout_constraintTop_toBottomOf="@id/text_view2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

লেআউট থেকে দৃশ্য তৈরি করুন

দুটি কনস্ট্রেন্ট লেআউটের জন্য সংজ্ঞা তৈরি করার পরে, আপনি তাদের প্রত্যেকের জন্য একটি দৃশ্য পেতে পারেন। এটি আপনাকে দুটি UI কনফিগারেশনের মধ্যে ট্রানজিশন করতে দেয়। কোনও দৃশ্য পেতে, আপনাকে দৃশ্যের রুট এবং লেআউট রিসোর্স আইডির রেফারেন্স দিতে হবে।

নিচের কোড স্নিপেট থেকে জানা যাবে কীভাবে সিন রুটের রেফারেন্স পাওয়া যায় এবং লেআউট ফাইল থেকে দুটি Scene অবজেক্ট তৈরি করা যায়:

Kotlin

val sceneRoot: ViewGroup = findViewById(R.id.scene_root)
val aScene: Scene = Scene.getSceneForLayout(sceneRoot, R.layout.a_scene, this)
val anotherScene: Scene = Scene.getSceneForLayout(sceneRoot, R.layout.another_scene, this)

জাভা

Scene aScene;
Scene anotherScene;

// Create the scene root for the scenes in this app.
sceneRoot = (ViewGroup) findViewById(R.id.scene_root);

// Create the scenes.
aScene = Scene.getSceneForLayout(sceneRoot, R.layout.a_scene, this);
anotherScene =
    Scene.getSceneForLayout(sceneRoot, R.layout.another_scene, this);

অ্যাপে এখন ভিউ হায়ারার্কির ভিত্তিতে দুটি Scene অবজেক্ট রয়েছে। উভয় দৃশ্যই res/layout/activity_main.xml-এ FrameLayout এলিমেন্ট দ্বারা সংজ্ঞায়িত দৃশ্য রুট ব্যবহার করে।

আপনার কোডে একটি দৃশ্য তৈরি করুন

এছাড়াও, আপনি ViewGroup অবজেক্ট থেকে আপনার কোডে Scene ইনস্ট্যান্স তৈরি করতে পারবেন। আপনার কোডে সরাসরি ভিউ হায়ারার্কি পরিবর্তন করার সময় অথবা ডায়নামিক উপায়ে সেগুলি তৈরি করার সময় এই টেকনিক ব্যবহার করুন।

আপনার কোডে ভিউ হায়ারার্কি থেকে কোনও দৃশ্য তৈরি করতে, Scene(sceneRoot, viewHierarchy) কনস্ট্রাক্টর ব্যবহার করুন। আপনি আগে থেকেই লেআউট ফাইল ইনফ্লেট করে থাকলে, এই কনস্ট্রাক্টরকে কল করা মানে Scene.getSceneForLayout() ফাংশনকে কল করা।

নিম্নলিখিত কোড স্নিপেট থেকে জানতে পারবেন যে কীভাবে আপনার কোডে দৃশ্যের জন্য ভিউ হায়ারার্কি ও দৃশ্যের রুট এলিমেন্ট থেকে Scene ইনস্ট্যান্স তৈরি করতে হয়:

Kotlin

val sceneRoot = someLayoutElement as ViewGroup
val viewHierarchy = someOtherLayoutElement as ViewGroup
val scene: Scene = Scene(sceneRoot, viewHierarchy)

জাভা

Scene mScene;

// Obtain the scene root element.
sceneRoot = (ViewGroup) someLayoutElement;

// Obtain the view hierarchy to add as a child of
// the scene root when this scene is entered.
viewHierarchy = (ViewGroup) someOtherLayoutElement;

// Create a scene.
mScene = new Scene(sceneRoot, mViewHierarchy);

দৃশ্য অ্যাকশন তৈরি করুন

ফ্রেমওয়ার্ক আপনাকে কাস্টম সিন অ্যাকশন সংজ্ঞায়িত করতে দেয় যা কোনও সিনে প্রবেশ বা বেরিয়ে আসার সময় সিস্টেম রান করে। অনেক ক্ষেত্রে, কাস্টম দৃশ্য অ্যাকশন সংজ্ঞায়িত করা অপ্রয়োজনীয়, কারণ ফ্রেমওয়ার্ক দৃশ্যের মধ্যে পরিবর্তনকে অটোমেটিক অ্যানিমেট করে।

এইসব ক্ষেত্রে দৃশ্য অ্যাকশন ব্যবহার করা হয়:

• একই হায়ারার্কিতে নেই এমন ভিউ অ্যানিমেট করতে। আপনি এক্সিট ও এন্ট্রি সিন অ্যাকশন ব্যবহার করে শুরু ও শেষের সিনের জন্য ভিউ অ্যানিমেট করতে পারবেন।
• ট্রানজিশন ফ্রেমওয়ার্ক অটোমেটিক অ্যানিমেট করতে পারে না এমন ভিউ অ্যানিমেট করতে, যেমন ListView অবজেক্ট। আরও তথ্যের জন্য, সীমাবদ্ধতা সংক্রান্ত বিভাগ দেখুন।

কাস্টম সিন অ্যাকশন প্রদান করতে, আপনার অ্যাকশনকে Runnable অবজেক্ট হিসেবে সংজ্ঞায়িত করুন এবং সেগুলিকে Scene.setExitAction() বা Scene.setEnterAction() ফাংশনে পাস করুন। ফ্রেমওয়ার্ক ট্রানজিশন অ্যানিমেশন চালানোর আগে শুরুর সিনে setExitAction() ফাংশন এবং ট্রানজিশন অ্যানিমেশন চালানোর পরে শেষের সিনে setEnterAction() ফাংশন কল করে।

মনে রাখবেন: শুরু ও শেষের দৃশ্যের মধ্যে ডেটা পাস করার জন্য দৃশ্য অ্যাকশন ব্যবহার করবেন না। আরও তথ্যের জন্য, ট্রানজিশন লাইফসাইকেল কলব্যাক নির্ধারণ করা সংক্রান্ত বিভাগটি দেখুন।

ট্রানজিশন প্রয়োগ করা

ট্রানজিশন ফ্রেমওয়ার্ক, Transition অবজেক্টের মাধ্যমে দৃশ্যের মধ্যে অ্যানিমেশনের স্টাইল দেখায়। আপনি বিল্ট-ইন সাবক্লাস ব্যবহার করে Transition ইনস্ট্যান্টিয়েট করতে পারবেন, যেমন AutoTransition এবং Fade, অথবা আপনার নিজস্ব ট্রানজিশন সংজ্ঞায়িত করুন। তারপর, আপনি Scene-এর শেষ এবং Transition-এর শুরু TransitionManager.go()-এ পাস করে দুটি দৃশ্যের মধ্যে অ্যানিমেশন রান করতে পারবেন।

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

ট্রানজিশন তৈরি করুন

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

টেবিল ১. বিল্ট-ইন ট্রানজিশনের ধরন।

শ্রেণী	ট্যাগ	এফেক্ট
AutoTransition	<autoTransition/>	ডিফল্ট ট্রানজিশন। এই ক্রমে ভিউ ফেড আউট, সরানো ও ছোট বড় করা এবং ফেড ইন করে।
ChangeBounds	<changeBounds/>	ভিউ সরায় ও ছোট বড় করে।
ChangeClipBounds	<changeClipBounds/>	দৃশ্য পরিবর্তনের আগে ও পরে View.getClipBounds() ক্যাপচার করে এবং ট্রানজিশনের সময় সেই পরিবর্তনগুলি অ্যানিমেট করে।
ChangeImageTransform	<changeImageTransform/>	দৃশ্য পরিবর্তনের আগে ও পরে ImageView-এর ম্যাট্রিক্স ক্যাপচার করে এবং ট্রানজিশনের সময় এটিকে অ্যানিমেট করে।
ChangeScroll	<changeScroll/>	দৃশ্য পরিবর্তনের আগে ও পরে টার্গেটের স্ক্রল প্রপার্টি ক্যাপচার করে এবং যেকোনও পরিবর্তন অ্যানিমেট করে।
ChangeTransform	<changeTransform/>	দৃশ্য পরিবর্তনের আগে ও পরে ভিউয়ের স্কেল ও রোটেশন ক্যাপচার করে এবং ট্রানজিশনের সময় সেইসব পরিবর্তন অ্যানিমেট করে।
Explode	<explode/>	শুরু ও শেষের দৃশ্যে টার্গেট ভিউয়ের দৃশ্যমানতায় হওয়া পরিবর্তন ট্র্যাক করে এবং দৃশ্যের প্রান্ত থেকে ভিউ ভিতরে বা বাইরে নিয়ে যায়।
Fade	<fade/>	fade_in ভিউতে ফেড ইন হয়। fade_out ভিউ ফেড আউট করে। fade_in_out (ডিফল্ট) fade_out করে এবং তারপরে fade_in করে।
Slide	<slide/>	শুরু ও শেষের দৃশ্যে টার্গেট ভিউয়ের দৃশ্যমানতায় পরিবর্তন ট্র্যাক করে এবং দৃশ্যের কোনও একটি প্রান্ত থেকে ভিউ ভিতরে বা বাইরে নিয়ে যায়।

রিসোর্স ফাইল থেকে ট্রানজিশন ইনস্ট্যান্স তৈরি করুন

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

রিসোর্স ফাইলে বিল্ট-ইন ট্রানজিশন নির্দিষ্ট করতে, এই ধাপগুলি অনুসরণ করুন:

• আপনার প্রোজেক্টে res/transition/ ডিরেক্টরি যোগ করুন।
• এই ডিরেক্টরির মধ্যে একটি নতুন XML রিসোর্স ফাইল তৈরি করুন।
• বিল্ট-ইন ট্রানজিশনের জন্য XML নোড যোগ করুন।

যেমন, নিম্নলিখিত রিসোর্স ফাইল Fade ট্রানজিশন নির্দিষ্ট করে:

res/transition/fade_transition.xml

<fade xmlns:android="http://schemas.android.com/apk/res/android" />

নিম্নলিখিত কোড স্নিপেট থেকে জানতে পারবেন যে কীভাবে রিসোর্স ফাইল থেকে আপনার অ্যাক্টিভিটির মধ্যে Transition ইনস্ট্যান্স ইনফ্লেট করতে হয়:

Kotlin

var fadeTransition: Transition =
    TransitionInflater.from(this)
                      .inflateTransition(R.transition.fade_transition)

জাভা

Transition fadeTransition =
        TransitionInflater.from(this).
        inflateTransition(R.transition.fade_transition);

আপনার কোডে ট্রানজিশন ইনস্ট্যান্স তৈরি করুন

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

বিল্ট-ইন ট্রানজিশনের ইনস্ট্যান্স তৈরি করতে, Transition ক্লাসের সাবক্লাসে পাবলিক কনস্ট্রাক্টরের একটি ইনভোক করুন। যেমন, নিম্নলিখিত কোড স্নিপেট Fade ট্রানজিশনের একটি ইনস্ট্যান্স তৈরি করে:

Kotlin

var fadeTransition: Transition = Fade()

জাভা

Transition fadeTransition = new Fade();

ট্রানজিশন প্রয়োগ করা

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

আপনার অ্যাক্টিভিটিতে কোনও ইভেন্টের উত্তরে ট্রানজিশন প্রয়োগ করার সময় দৃশ্য পরিবর্তন করতে, শেষের দৃশ্য এবং অ্যানিমেশনের জন্য ব্যবহার করার জন্য ট্রানজিশন ইনস্ট্যান্স সহ TransitionManager.go() ক্লাস ফাংশন কল করুন, যেমন নিম্নলিখিত স্নিপেটে দেখানো হয়েছে:

Kotlin

TransitionManager.go(endingScene, fadeTransition)

জাভা

TransitionManager.go(endingScene, fadeTransition);

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

আপনি যদি কোনও ট্রানজিশন ইনস্ট্যান্স নির্দিষ্ট না করেন, তাহলে ট্রানজিশন ম্যানেজার একটি অটোমেটিক ট্রানজিশন প্রয়োগ করতে পারে যা বেশিরভাগ পরিস্থিতিতেই উপযুক্ত। আরও তথ্যের জন্য, TransitionManager ক্লাসের জন্য API রেফারেন্স দেখুন।

নির্দিষ্ট টার্গেট ভিউ বেছে নিন

ফ্রেমওয়ার্ক ডিফল্ট হিসেবে শুরু ও শেষের দৃশ্যের সব ভিউতে ট্রানজিশন প্রয়োগ করে। কিছু ক্ষেত্রে, আপনি হয়ত কোনও দৃশ্যের ভিউয়ের সাবসেটে অ্যানিমেশন প্রয়োগ করতে চাইবেন। ফ্রেমওয়ার্ক আপনাকে নির্দিষ্ট ভিউ বেছে নিতে দেয় যা আপনি অ্যানিমেট করতে চান। যেমন, ফ্রেমওয়ার্ক ListView অবজেক্টে অ্যানিমেট করা পরিবর্তন সাপোর্ট করে না, তাই ট্রানজিশনের সময় সেগুলি অ্যানিমেট করার চেষ্টা করবেন না।

ট্রানজিশন অ্যানিমেট করে এমন প্রতিটি ভিউকে টার্গেট বলা হয়। আপনি শুধুমাত্র এমন টার্গেট বেছে নিতে পারবেন যা কোনও দৃশ্যের সাথে যুক্ত ভিউ হায়ারার্কির অংশ।

টার্গেটের তালিকা থেকে এক বা একাধিক ভিউ সরাতে, ট্রানজিশন শুরু করার আগে removeTarget() মেথড কল করুন। টার্গেটের তালিকায় আপনার উল্লেখ করা ভিউ যোগ করতে, addTarget() ফাংশন কল করুন। আরও তথ্যের জন্য, Transition ক্লাসের জন্য API রেফারেন্স দেখুন।

একাধিক ট্রানজিশন নির্দিষ্ট করুন

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

আপনাকে শুধু একটি অ্যানিমেশন বেছে নিতে হবে না, কারণ ট্রানজিশন ফ্রেমওয়ার্ক আপনাকে ট্রানজিশন সেটে অ্যানিমেশন এফেক্ট একত্রিত করতে দেয় যাতে আলাদা আলাদা বিল্ট-ইন বা কাস্টম ট্রানজিশনের গ্রুপ থাকে।

XML-এ ট্রানজিশনের সংগ্রহ থেকে ট্রানজিশন সেট নির্ধারণ করতে, res/transitions/ ডিরেক্টরিতে একটি রিসোর্স ফাইল তৈরি করুন এবং TransitionSet এলিমেন্টের অধীনে ট্রানজিশনগুলি তালিকাভুক্ত করুন। যেমন, নিম্নলিখিত স্নিপেট থেকে বোঝা যায় যে কীভাবে এমন একটি ট্রানজিশন সেট নির্দিষ্ট করতে হয় যার আচরণ AutoTransition ক্লাসের মতোই:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:transitionOrdering="sequential">
    <fade android:fadingMode="fade_out" />
    <changeBounds />
    <fade android:fadingMode="fade_in" />
</transitionSet>

আপনার কোডে TransitionSet অবজেক্টে ট্রানজিশন সেট ইনফ্লেট করতে, আপনার অ্যাক্টিভিটিতে TransitionInflater.from() ফাংশন কল করুন। TransitionSet ক্লাসটি Transition ক্লাস থেকে এক্সটেন্ড করে, তাই আপনি এটি অন্য যেকোনও Transition ইনস্ট্যান্সের মতো ট্রানজিশন ম্যানেজারের সাথে ব্যবহার করতে পারবেন।

দৃশ্য ছাড়াই ট্রানজিশন প্রয়োগ করুন

আপনার ইউজার ইন্টারফেস পরিবর্তন করার একমাত্র উপায় ভিউ হায়ারার্কি পরিবর্তন করা নয়। এছাড়াও, আপনি বর্তমান হায়ারার্কির মধ্যে চাইল্ড ভিউ যোগ, পরিবর্তন ও সরানোর মাধ্যমে পরিবর্তন করতে পারবেন।

যেমন, আপনি একটি লেআউটের মাধ্যমে সার্চ ইন্টার‍্যাকশন প্রয়োগ করতে পারেন। সার্চ এন্ট্রি ফিল্ড ও সার্চ আইকন দেখানো লেআউট দিয়ে শুরু করুন। ফলাফল দেখানোর জন্য ইউজার ইন্টারফেস পরিবর্তন করতে, ব্যবহারকারী সার্চ বোতামে ট্যাপ করলে ViewGroup.removeView() ফাংশন কল করে সেটি সরিয়ে দিন এবং ViewGroup.addView() ফাংশন কল করে সার্চ ফলাফল যোগ করুন।

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

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

একটি ভিউ হায়ারার্কির মধ্যে বিলম্বিত ট্রানজিশন তৈরি করতে, এইসব ধাপ অনুসরণ করুন:

1. ট্রানজিশন ট্রিগার করে এমন ইভেন্ট ঘটলে, TransitionManager.beginDelayedTransition() ফাংশন কল করুন, আপনি পরিবর্তন করতে চান এমন সব ভিউয়ের পেরেন্ট ভিউ এবং ব্যবহার করার জন্য ট্রানজিশন প্রদান করুন। ফ্রেমওয়ার্ক চাইল্ড ভিউয়ের বর্তমান অবস্থা এবং তাদের প্রপার্টি ভ্যালু স্টোর করে।
2. আপনার ব্যবহারের ক্ষেত্রে প্রয়োজন অনুযায়ী চাইল্ড ভিউতে পরিবর্তন করুন। ফ্রেমওয়ার্ক চাইল্ড ভিউ ও তার প্রপার্টিতে আপনার করা পরিবর্তন রেকর্ড করে।
3. আপনার করা পরিবর্তন অনুযায়ী সিস্টেম ইউজার ইন্টারফেস আবার ড্র করলে, ফ্রেমওয়ার্ক আসল অবস্থা ও নতুন অবস্থার মধ্যে পরিবর্তন অ্যানিমেট করে।

নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে কীভাবে বিলম্বিত ট্রানজিশন ব্যবহার করে ভিউ হায়ারার্কিতে টেক্সট ভিউ যোগ করার অ্যানিমেশন তৈরি করা যায়। প্রথম স্নিপেট লেআউট ডেফিনেশন ফাইল দেখায়:

res/layout/activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <EditText
        android:id="@+id/inputText"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    ...
</androidx.constraintlayout.widget.ConstraintLayout>

পরের স্নিপেটটি সেই কোড দেখায় যা টেক্সট ভিউ যোগ করার অ্যানিমেশন দেখায়:

মূল অ্যাক্টিভিটি

Kotlin

setContentView(R.layout.activity_main)
val labelText = TextView(this).apply {
    text = "Label"
    id = R.id.text
}
val rootView: ViewGroup = findViewById(R.id.mainLayout)
val mFade: Fade = Fade(Fade.IN)
TransitionManager.beginDelayedTransition(rootView, mFade)
rootView.addView(labelText)

জাভা

private TextView labelText;
private Fade mFade;
private ViewGroup rootView;
...
// Load the layout.
setContentView(R.layout.activity_main);
...
// Create a new TextView and set some View properties.
labelText = new TextView(this);
labelText.setText("Label");
labelText.setId(R.id.text);

// Get the root view and create a transition.
rootView = (ViewGroup) findViewById(R.id.mainLayout);
mFade = new Fade(Fade.IN);

// Start recording changes to the view hierarchy.
TransitionManager.beginDelayedTransition(rootView, mFade);

// Add the new TextView to the view hierarchy.
rootView.addView(labelText);

// When the system redraws the screen to show this update,
// the framework animates the addition as a fade in.

ট্রানজিশন লাইফসাইকেল কলব্যাক সংজ্ঞায়িত করুন

ট্রানজিশন লাইফসাইকেল অ্যাক্টিভিটি লাইফসাইকেলের মতোই। এটি সেই ট্রানজিশন স্টেটকে দেখায় যা ফ্রেমওয়ার্ক TransitionManager.go() ফাংশনে কল করা এবং অ্যানিমেশন সম্পূর্ণ হওয়ার মধ্যবর্তী সময়ে মনিটর করে। গুরুত্বপূর্ণ লাইফসাইকেল স্টেটে, ফ্রেমওয়ার্ক TransitionListener ইন্টারফেস দ্বারা নির্ধারিত কলব্যাক ইনভোক করে।

ট্রানজিশন লাইফসাইকেল কলব্যাকগুলি উপযোগী, যেমন, দৃশ্য পরিবর্তনের সময় শুরু হওয়া ভিউ হায়ারার্কি থেকে শেষ হওয়া ভিউ হায়ারার্কিতে একটি ভিউ প্রপার্টি ভ্যালু কপি করার জন্য। আপনি শুধু শুরুর ভিউ থেকে শেষ ভিউ হায়ারার্কির ভিউতে ভ্যালু কপি করতে পারবেন না, কারণ ট্রানজিশন সম্পূর্ণ না হওয়া পর্যন্ত শেষ ভিউ হায়ারার্কি ইনফ্লেট হয় না। পরিবর্তে, আপনাকে ভ্যালুটি একটি ভেরিয়েবলে স্টোর করতে হবে এবং ফ্রেমওয়ার্ক ট্রানজিশন শেষ করলে, ভ্যালুটি এন্ডিং ভিউ হায়ারার্কিতে কপি করতে হবে। ট্রানজিশন সম্পূর্ণ হলে বিজ্ঞপ্তি পেতে, আপনার অ্যাক্টিভিটিতে TransitionListener.onTransitionEnd() ফাংশন প্রয়োগ করুন।

আরও তথ্যের জন্য, TransitionListener ক্লাসের জন্য API রেফারেন্স দেখুন।

সীমাবদ্ধতা

এই বিভাগে ট্রানজিশন ফ্রেমওয়ার্কের কিছু পরিচিত সীমাবদ্ধতার তালিকা দেওয়া হয়েছে:

• SurfaceView-এ প্রয়োগ করা অ্যানিমেশন সঠিকভাবে নাও দেখাতে পারে। SurfaceView ইনস্ট্যান্স নন-UI থ্রেড থেকে আপডেট করা হয়েছে, তাই আপডেটগুলি অন্যান্য ভিউয়ের অ্যানিমেশনের সাথে সিঙ্ক নাও হতে পারে।
• TextureView-এ প্রয়োগ করা হলে, কিছু নির্দিষ্ট ট্রানজিশনের ধরন থেকে কাঙ্খিত অ্যানিমেশন এফেক্ট নাও পাওয়া যেতে পারে।
• AdapterView-এর এক্সটেনশন ক্লাস, যেমন ListView, চাইল্ড ভিউ এমনভাবে ম্যানেজ করে যা ট্রানজিশন ফ্রেমওয়ার্কের সাথে সামঞ্জস্যপূর্ণ নয়। আপনি যদি AdapterView-এর উপর ভিত্তি করে কোনও ভিউ অ্যানিমেট করার চেষ্টা করেন, তাহলে ডিভাইসের ডিসপ্লে কাজ করা বন্ধ করে দিতে পারে।
• আপনি যদি অ্যানিমেশন সহ কোনও TextView-এর সাইজ পরিবর্তন করার চেষ্টা করেন, তাহলে অবজেক্টের সাইজ সম্পূর্ণ পরিবর্তন হওয়ার আগে টেক্সটটি একটি নতুন লোকেশনে পপ-আপ করে। এই সমস্যা এড়াতে, টেক্সট আছে এমন ভিউয়ের সাইজ পরিবর্তন করার সময় অ্যানিমেশন ব্যবহার করবেন না।