রচনায় ফিরে ভবিষ্যদ্বাণীপূর্ণ

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

চিত্র 1. সোশিয়ালাইট নমুনা অ্যাপে বাড়ি থেকে ফিরে অ্যানিমেশন।

ভবিষ্যদ্বাণীমূলক ব্যাক সহ নিম্নলিখিতগুলি কীভাবে করবেন তা এই গাইডটি বর্ণনা করে:

  • ভবিষ্যদ্বাণীমূলক ব্যাক জেসচারে অপ্ট-ইন করুন
  • ডিফল্ট সিস্টেম অ্যানিমেশন সক্ষম করুন
  • নেভিগেশন রচনার সাথে ভবিষ্যদ্বাণীমূলক ব্যাক সক্ষম করুন
  • শেয়ার্ড এলিমেন্ট ট্রানজিশনের সাথে ইন্টিগ্রেট করুন
  • উপাদান রচনা উপাদানগুলির সাথে ভবিষ্যদ্বাণীমূলক ব্যাক সমর্থন করুন
  • PredictiveBackHandler দিয়ে ম্যানুয়ালি অগ্রগতি অ্যাক্সেস করুন
  • ভবিষ্যদ্বাণীমূলক ব্যাক জেসচার অ্যানিমেশন পরীক্ষা করুন

ভবিষ্যদ্বাণীমূলক ব্যাক জেসচারে অপ্ট-ইন করুন

ভবিষ্যদ্বাণীমূলক ব্যাক অ্যানিমেশনগুলি সক্ষম করতে, আপনাকে অবশ্যই পূর্বাভাসমূলক ব্যাক জেসচার সমর্থন করতে অপ্ট-ইন করতে হবে৷ অপ্ট-ইন করতে, আপনার AndroidManifest.xml ফাইলের মধ্যে <application> ট্যাগ বা স্বতন্ত্র <activity> ট্যাগে android:enableOnBackInvokedCallback="true " যোগ করুন।

ডিফল্ট সিস্টেম অ্যানিমেশন সক্ষম করুন

ব্যাক-টু-হোম, ক্রস-অ্যাক্টিভিটি, এবং ক্রস-টাস্ক সিস্টেম অ্যানিমেশনগুলি সমর্থিত ব্যাক হ্যান্ডলিং APIগুলিতে স্থানান্তরিত অ্যাপগুলির জন্য Android 15 এবং পরবর্তী ডিভাইসগুলিতে উপলব্ধ।

  • ব্যাক-টু-হোম : ব্যবহারকারীকে হোম স্ক্রিনে ফিরিয়ে দেয়।
  • ক্রস-অ্যাক্টিভিটি : অ্যাপের মধ্যে ক্রিয়াকলাপগুলির মধ্যে পরিবর্তন।
  • ক্রস-টাস্ক : কাজের মধ্যে পরিবর্তন।

এই অ্যানিমেশনগুলি Android 15 এবং উচ্চতর সংস্করণে ডিফল্টরূপে সক্রিয় থাকে৷ Android 13 বা 14 চলমান ডিভাইসগুলিতে, ব্যবহারকারীরা বিকাশকারী বিকল্পগুলির মাধ্যমে তাদের সক্ষম করতে পারেন৷

সিস্টেম অ্যানিমেশন পেতে, আপনার AndroidX Activity নির্ভরতা 1.6.0 বা উচ্চতর আপডেট করুন।

নেভিগেশন রচনার সাথে ভবিষ্যদ্বাণীমূলক ব্যাক সক্ষম করুন

নেভিগেশন কম্পোজে ভবিষ্যদ্বাণীমূলক ব্যাক ব্যবহার করতে, নিশ্চিত করুন যে আপনি navigation-compose 2.8.0 লাইব্রেরি বা উচ্চতর ব্যবহার করছেন।

ন্যাভিগেশন কম্পোজ স্বয়ংক্রিয়ভাবে স্ক্রীনের মধ্যে ক্রস-ফ্যাড হয়ে যায় যখন ব্যবহারকারী ফিরে সোয়াইপ করে:

চিত্র 2। সোশিয়ালাইটে ডিফল্ট ক্রসফেড ইন-অ্যাপ অ্যানিমেশন।

নেভিগেট করার সময়, আপনি popEnterTransition এবং popExitTransition দিয়ে কাস্টম রূপান্তর তৈরি করতে পারেন। যখন আপনার NavHost এ প্রয়োগ করা হয়, তখন এই মডিফায়ারগুলি আপনাকে সংজ্ঞায়িত করতে দেয় যে কীভাবে এন্টার এবং এক্সিট স্ক্রিন অ্যানিমেট হয়। আপনি এগুলিকে বিভিন্ন ধরণের প্রভাব তৈরি করতে ব্যবহার করতে পারেন, যেমন স্কেলিং, ফেইডিং বা স্লাইডিং৷

এই উদাহরণে, scaleOut ব্যবহার করা হয় popExitTransition মধ্যে প্রস্থান করা স্ক্রীনকে স্কেল করার জন্য যখন ব্যবহারকারী ফিরে নেভিগেট করে। উপরন্তু, transformOrigin প্যারামিটার নির্ধারণ করে যে বিন্দুর চারপাশে স্কেলিং অ্যানিমেশন ঘটে। ডিফল্টরূপে, এটি স্ক্রিনের কেন্দ্র ( 0.5f, 0.5f )। স্কেলিং একটি ভিন্ন পয়েন্ট থেকে উদ্ভূত করতে আপনি এই মান সামঞ্জস্য করতে পারেন। 

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)
PredictiveBackSnippets.kt

এই কোড নিম্নলিখিত ফলাফল উত্পাদন করে:

চিত্র 3. সোশিয়ালাইটে একটি কাস্টম ইন-অ্যাপ অ্যানিমেশন।

popEnterTransition এবং popExitTransition বিশেষভাবে অ্যানিমেশন নিয়ন্ত্রণ করে যখন ব্যাক স্ট্যাক পপিং করে, যেমন পিছনের অঙ্গভঙ্গি সহ। আপনি enterTransition এবং exitTransition ব্যবহার করতে পারেন সাধারণভাবে কম্পোজেবলগুলিতে প্রবেশ এবং প্রস্থান করার জন্য অ্যানিমেশনগুলিকে সংজ্ঞায়িত করতে, শুধুমাত্র ভবিষ্যদ্বাণীমূলক পিছনের জন্য নয়। আপনি যদি শুধুমাত্র enterTransition এবং exitTransition সেট করেন, তাহলে এগুলি নিয়মিত নেভিগেশন এবং ব্যাক স্ট্যাক পপিং উভয়ের জন্যই ব্যবহৃত হয়। যাইহোক, popEnterTransition এবং popExitTransition ব্যবহার করে আপনাকে ব্যাক নেভিগেশনের জন্য স্বতন্ত্র অ্যানিমেশন তৈরি করতে দেয়।

শেয়ার্ড এলিমেন্ট ট্রানজিশনের সাথে ইন্টিগ্রেট করুন

শেয়ার্ড এলিমেন্ট ট্রানজিশন শেয়ার করা কন্টেন্ট সহ কম্পোজেবলের মধ্যে একটি মসৃণ ভিজ্যুয়াল সংযোগ প্রদান করে, যা প্রায়ই নেভিগেশনের জন্য ব্যবহৃত হয়।

চিত্র 4. নেভিগেশন কম্পোজে ভবিষ্যদ্বাণীমূলক ব্যাক সহ ভাগ করা উপাদান পরিবর্তন।

নেভিগেশন রচনার সাথে ভাগ করা উপাদানগুলি ব্যবহার করতে, ভাগ করা উপাদানগুলির সাথে পূর্বাভাসমূলক ফিরে দেখুন৷

উপাদান রচনা উপাদানগুলির সাথে ভবিষ্যদ্বাণীমূলক ব্যাক সমর্থন করুন

ম্যাটেরিয়াল কম্পোজ লাইব্রেরির অনেক উপাদান ভবিষ্যদ্বাণীমূলক পিছনের অঙ্গভঙ্গি সহ নির্বিঘ্নে কাজ করার জন্য ডিজাইন করা হয়েছে। এই উপাদানগুলিতে ভবিষ্যদ্বাণীমূলক ব্যাক অ্যানিমেশনগুলি সক্ষম করতে, আপনার প্রকল্পে সর্বশেষ Material3 নির্ভরতা ( androidx.compose.material3:material3-*:1.3.0 বা উচ্চতর) অন্তর্ভুক্ত করুন।

ভবিষ্যদ্বাণীমূলক ব্যাক অ্যানিমেশনগুলিকে সমর্থন করে এমন উপাদান উপাদানগুলির মধ্যে রয়েছে:

SearchBar এবং ModalBottomSheet স্বয়ংক্রিয়ভাবে ভবিষ্যদ্বাণীমূলক ব্যাক অঙ্গভঙ্গি সঙ্গে অ্যানিমেট. ModalNavigationDrawer , ModalDrawerSheet , DismissibleDrawerSheet , এবং DismissibleNavigationDrawer জন্য আপনাকে drawerState তাদের নিজ নিজ শীট সামগ্রী কম্পোজেবলে পাস করতে হবে।

PredictiveBackHandler দিয়ে ম্যানুয়ালি অগ্রগতি অ্যাক্সেস করুন

জেটপ্যাক কম্পোজে PredictiveBackHandler [৫] কম্পোজযোগ্য আপনাকে পিছনের অঙ্গভঙ্গিটি আটকাতে এবং এর অগ্রগতি অ্যাক্সেস করতে দেয়। ব্যবহারকারী কতদূর সোয়াইপ করে তার উপর ভিত্তি করে কাস্টম অ্যানিমেশন বা আচরণ তৈরি করে আপনি রিয়েল-টাইমে ব্যবহারকারীর পিছনের অঙ্গভঙ্গিতে প্রতিক্রিয়া জানাতে পারেন।

PredictiveBackHandler ব্যবহার করতে, আপনি androidx.activity:activity:1.6.0 বা উচ্চতর ব্যবহার করছেন তা নিশ্চিত করুন।

PredictiveBackHandler একটি Flow<BackEventCompat> প্রদান করে যা পিছনের অঙ্গভঙ্গির অগ্রগতি প্রতিনিধিত্ব করে এমন ঘটনাগুলি নির্গত করে। প্রতিটি ইভেন্টে তথ্য থাকে যেমন:

  • progress : 0 এবং 1 এর মধ্যে একটি ফ্লোট মান যা পিছনের অঙ্গভঙ্গির অগ্রগতি নির্দেশ করে (0 = অঙ্গভঙ্গি শুরু হয়েছে, 1 = অঙ্গভঙ্গি সম্পন্ন হয়েছে)।
  • touchX এবং touchY : স্পর্শ ইভেন্টের X এবং Y স্থানাঙ্ক।

নিম্নলিখিত স্নিপেট PredictiveBackHandler এর মৌলিক ব্যবহার দেখায়: 

PredictiveBackHandler(true) { progress: Flow<BackEventCompat> ->
    // code for gesture back started
    try {
        progress.collect { backEvent ->
            // code for progress
            boxScale = 1F - (1F * backEvent.progress)
        }
        // code for completion
        boxScale = 0F
    } catch (e: CancellationException) {
        // code for cancellation
        boxScale = 1F
    }
}
PredictiveBackSnippets.kt

উদাহরণ: একটি নেভিগেশন ড্রয়ারের সাথে একত্রিত করুন

JetLagged- এ ব্যাক জেসচারের প্রতিক্রিয়া হিসাবে একটি নেভিগেশন ড্রয়ারের সাথে একটি মসৃণ মিথস্ক্রিয়া তৈরি করতে PredictiveBackHandler ব্যবহার করে একটি কাস্টম ইন-অ্যাপ অ্যানিমেশন কীভাবে প্রয়োগ করা যায় এই উদাহরণটি দেখায়:

চিত্র 5. ভবিষ্যদ্বাণীমূলক ব্যাক সমর্থন সহ নেভিগেশন ড্রয়ার।

এই উদাহরণে, PredictiveBackHandler ব্যবহার করা হয়:

  • পিছনের অঙ্গভঙ্গির অগ্রগতি ট্র্যাক করুন।
  • অঙ্গভঙ্গি অগ্রগতির উপর ভিত্তি করে ড্রয়ারের translationX আপডেট করুন।
  • অঙ্গভঙ্গি সম্পূর্ণ বা বাতিল করার সময় অঙ্গভঙ্গি বেগের উপর ভিত্তি করে ড্রয়ারটি মসৃণভাবে খুলতে বা বন্ধ করতে একটি velocityTracker ব্যবহার করুন।

ভবিষ্যদ্বাণীমূলক ব্যাক জেসচার অ্যানিমেশন পরীক্ষা করুন

আপনি যদি এখনও অ্যান্ড্রয়েড 13 বা অ্যান্ড্রয়েড 14 ব্যবহার করেন, তাহলে আপনি বাড়িতে ব্যাক-টু-হোম অ্যানিমেশন পরীক্ষা করতে পারেন।

এই অ্যানিমেশন পরীক্ষা করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. আপনার ডিভাইসে, সেটিংস > সিস্টেম > বিকাশকারী বিকল্পগুলিতে যান।
  2. ভবিষ্যদ্বাণীমূলক ব্যাক অ্যানিমেশন নির্বাচন করুন।
  3. আপনার আপডেট করা অ্যাপটি চালু করুন এবং এটিকে কার্যকর দেখতে পিছনের অঙ্গভঙ্গিটি ব্যবহার করুন৷

অ্যান্ড্রয়েড 15 এবং পরবর্তীতে, এই বৈশিষ্ট্যটি ডিফল্টরূপে সক্রিয় থাকে৷

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