Jetpack Navigation থেকে Navigation Compose-এ মাইগ্রেট করা

Navigation Compose API আপনাকে Compose অ্যাপে কম্পোজেবলের মধ্যে নেভিগেট করতে দেয়, একই সাথে Jetpack Navigation-এর কম্পোনেন্ট, ইনফ্রাস্ট্রাকচার ও ফিচারের সুবিধা নিতে দেয়।

এই পৃষ্ঠায়, ফ্র্যাগমেন্ট-ভিত্তিক Jetpack Navigation থেকে Navigation Compose-এ কীভাবে মাইগ্রেট করতে হয় তা বর্ণনা করা হয়েছে। এটি Jetpack Compose-এ আরও বড়, ভিউ-ভিত্তিক UI মাইগ্রেশনের অংশ।

মাইগ্রেশনের পূর্বশর্ত

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

মাইগ্রেশনের ধাপ

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

আপনার অ্যাপ আগে থেকেই UDF ডিজাইন প্যাটার্ন এবং আমাদের আর্কিটেকচার সংক্রান্ত গাইড অনুসরণ করলে, Jetpack Compose এবং Navigation Compose-এ মাইগ্রেট করার জন্য UI লেয়ার ছাড়া আপনার অ্যাপের অন্যান্য লেয়ারে বড় ধরনের রিফ্যাক্টরের প্রয়োজন হবে না।

Navigation Compose-এ মাইগ্রেট করতে, এই ধাপগুলি অনুসরণ করুন:

1. আপনার অ্যাপে নেভিগেশন কম্পোজ ডিপেন্ডেন্সি যোগ করুন।

2. একটি App-level কম্পোজেবল তৈরি করুন এবং আপনার Activity-এ আপনার Compose এন্ট্রি পয়েন্ট হিসেবে যোগ করুন, ভিউ লেআউটের সেট-আপ পরিবর্তন করে:

   class SampleActivity : ComponentActivity() {
   
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           // setContentView<ActivitySampleBinding>(this, R.layout.activity_sample)
           setContent {
               SampleApp(/* ... */)
           }
       }
   }
   MigrationCommonScenariosSnippets.kt

3. প্রতিটি নেভিগেশন গন্তব্যের জন্য ধরন তৈরি করুন। যেসব গন্তব্যের জন্য কোনও ডেটার প্রয়োজন নেই সেগুলির জন্য data object এবং যেসব গন্তব্যের জন্য ডেটার প্রয়োজন আছে সেগুলির জন্য data class বা class ব্যবহার করুন।

   @Serializable data object First
   @Serializable data class Second(val id: String)
   @Serializable data object Third
   MigrationCommonScenariosSnippets.kt

4. NavController এমন একটি জায়গায় সেট-আপ করুন যেখানে সমস্ত কম্পোজেবল যেগুলির এটির রেফারেন্স প্রয়োজন, সেগুলির অ্যাক্সেস আছে (এটি সাধারণত আপনার App কম্পোজেবলের ভিতরে থাকে)। এই পদ্ধতি স্টেট হোইস্টিংয়ের নীতি অনুসরণ করে এবং কম্পোজেবল স্ক্রিনের মধ্যে নেভিগেট করা ও ব্যাক স্ট্যাক বজায় রাখার জন্য আপনাকে NavController-কে সোর্স অফ ট্রুথ হিসেবে ব্যবহার করতে দেয়:

   @Composable
   fun SampleApp() {
       val navController = rememberNavController()
       // ...
   }
   MigrationCommonScenariosSnippets.kt

5. App কম্পোজেবলের মধ্যে আপনার অ্যাপের NavHost তৈরি করুন এবং navController পাস করুন:

   @Composable
   fun SampleApp() {
       val navController = rememberNavController()
   
       SampleNavHost(navController = navController)
   }
   
   @Composable
   fun SampleNavHost(
       navController: NavHostController
   ) {
       NavHost(navController = navController, startDestination = First) {
           // ...
       }
   }
   MigrationCommonScenariosSnippets.kt

6. আপনার নেভিগেশন গ্রাফ তৈরি করতে composableটি গন্তব্য যোগ করুন। প্রতিটি স্ক্রিন আগে থেকেই Compose-এ মাইগ্রেট করা হয়ে থাকলে, এই ধাপে শুধু আপনার ফ্র্যাগমেন্ট থেকে এই স্ক্রিন কম্পোজেবলগুলি এক্সট্র্যাক্ট করে composable ডেস্টিনেশনে নিয়ে যেতে হবে:

   class FirstFragment : Fragment() {
   
       override fun onCreateView(
           inflater: LayoutInflater,
           container: ViewGroup?,
           savedInstanceState: Bundle?
       ): View {
           return ComposeView(requireContext()).apply {
               setContent {
                   // FirstScreen(...) EXTRACT FROM HERE
               }
           }
       }
   }
   
   @Composable
   fun SampleNavHost(
       navController: NavHostController
   ) {
       NavHost(navController = navController, startDestination = First) {
           composable<First> {
               FirstScreen(/* ... */) // EXTRACT TO HERE
           }
           composable<Second> {
               SecondScreen(/* ... */)
           }
           // ...
       }
   }
   MigrationCommonScenariosSnippets.kt

7. আপনি যদি আপনার Compose UI আর্কিটেক্ট করা সংক্রান্ত নির্দেশিকা অনুসরণ করে থাকেন, বিশেষ করে কীভাবে ViewModel এবং নেভিগেশন ইভেন্ট কম্পোজেবলে পাস করা উচিত, তাহলে পরবর্তী ধাপ হল প্রতিটি স্ক্রিন কম্পোজেবলে আপনি কীভাবে ViewModel প্রদান করেন তা পরিবর্তন করা। আপনি প্রায়ই hiltViewModel-এর মাধ্যমে Compose ও Navigation-এর সাথে Hilt ইনজেকশন ও এর ইন্টিগ্রেশন পয়েন্ট ব্যবহার করতে পারবেন:

   @Composable
   fun FirstScreen(
       // viewModel: FirstViewModel = viewModel(),
       viewModel: FirstViewModel = hiltViewModel(),
       onButtonClick: () -> Unit = {},
   ) {
       // ...
   }
   MigrationCommonScenariosSnippets.kt

8. সমস্ত findNavController() নেভিগেশন কলকে navController দিয়ে প্রতিস্থাপন করুন এবং সম্পূর্ণ navController পাস করার পরিবর্তে প্রতিটি কম্পোজেবল স্ক্রিনে নেভিগেশন ইভেন্ট হিসেবে এগুলি পাস করুন। এই পদ্ধতি কম্পোজেবল ফাংশন থেকে কলারদের কাছে ইভেন্ট প্রকাশ করার পেশাদার পদ্ধতি অনুসরণ করে এবং navController-কে single source of truth হিসেবে রাখে।

   কোনও গন্তব্যের জন্য সংজ্ঞায়িত রুট ক্লাসের ইনস্ট্যান্স তৈরি করে সেই গন্তব্যে ডেটা পাস করা যেতে পারে। তারপর এটি সরাসরি গন্তব্যের ব্যাক স্ট্যাক এন্ট্রি থেকে অথবা SavedStateHandle.toRoute() ব্যবহার করে ViewModel থেকে পাওয়া যেতে পারে।

   @Composable
   fun SampleNavHost(
       navController: NavHostController
   ) {
       NavHost(navController = navController, startDestination = First) {
           composable<First> {
               FirstScreen(
                   onButtonClick = {
                       // findNavController().navigate(firstScreenToSecondScreenAction)
                       navController.navigate(Second(id = "ABC"))
                   }
               )
           }
           composable<Second> { backStackEntry ->
               val secondRoute = backStackEntry.toRoute<Second>()
               SecondScreen(
                   id = secondRoute.id,
                   onIconClick = {
                       // findNavController().navigate(secondScreenToThirdScreenAction)
                       navController.navigate(Third)
                   }
               )
           }
           // ...
       }
   }
   MigrationCommonScenariosSnippets.kt

9. সব ফ্র্যাগমেন্ট, প্রাসঙ্গিক XML লেআউট, অপ্রয়োজনীয় নেভিগেশন ও অন্যান্য রিসোর্স এবং পুরনো ফ্র্যাগমেন্ট ও Jetpack Navigation ডিপেন্ডেন্সি সরিয়ে দিন।

আপনি সেট-আপ ডকুমেন্টেশন থেকে নেভিগেশন কম্পোজ সম্পর্কিত আরও বিবরণ সহ একই ধাপগুলি খুঁজে পেতে পারেন।

সাধারণ ব্যবহারিক ক্ষেত্র

আপনি যে নেভিগেশন কম্পোনেন্টই ব্যবহার করুন না কেন, নেভিগেশনের একই নীতি প্রযোজ্য।

মাইগ্রেট করার সময় সাধারণত নিম্নলিখিত কারণে এটি করা হয়:

• কম্পোজেবলে নেভিগেট করা
• আর্গুমেন্ট ব্যবহার করে নেভিগেট করা
• ডিপ লিঙ্ক
• নেস্টেড নেভিগেশন
• নিচের নেভিগেশন বারের সাথে ইন্টিগ্রেশন
• কাস্টম নেভিগেশন কম্পোনেন্টের সাথে ইন্টিগ্রেশন

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

নেভিগেট করার সময় জটিল ডেটা ফিরিয়ে আনা

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

আপনার ফ্র্যাগমেন্ট যদি আর্গুমেন্ট হিসেবে জটিল অবজেক্ট পাস করে, তাহলে প্রথমে আপনার কোড রিফ্যাক্টর করার কথা বিবেচনা করুন, যাতে ডেটা লেয়ার থেকে এইসব অবজেক্ট স্টোর ও ফেচ করা যায়। উদাহরণ দেখতে Now in Android রিপোজিটরি দেখুন।

সীমাবদ্ধতা

এই বিভাগে Navigation Compose-এর বর্তমান সীমাবদ্ধতা বর্ণনা করা হয়েছে।

Navigation Compose-এ ইনক্রিমেন্টাল মাইগ্রেশন

বর্তমানে, আপনার কোডে ডেস্টিনেশন হিসেবে ফ্র্যাগমেন্ট ব্যবহার করার সময় আপনি নেভিগেশন কম্পোজ ব্যবহার করতে পারবেন না। নেভিগেশন কম্পোজ ব্যবহার করা শুরু করতে, আপনার সব গন্তব্য কম্পোজেবল হতে হবে। আপনি Issue Tracker-এ এই ফিচার সংক্রান্ত অনুরোধ ট্র্যাক করতে পারবেন।

ট্রানজিশন অ্যানিমেশন

Navigation 2.7.0-alpha01 থেকে শুরু করে, কাস্টম ট্রানজিশন সেট করার জন্য সহায়তা, আগে AnimatedNavHost থেকে, এখন সরাসরি NavHost-এ কাজ করে। আরও তথ্যের জন্য রিলিজ নোট পড়ুন।

আরও জানুন

Navigation Compose-এ মাইগ্রেট করার ব্যাপারে আরও জানতে, নিম্নলিখিত রিসোর্স দেখুন:

• Navigation Compose কোডল্যাব: হাতে-কলমে কোডল্যাবের মাধ্যমে Navigation Compose-এর প্রাথমিক বিষয়গুলি জানুন।
• Now in Android রিপোজিটরি: সম্পূর্ণভাবে Kotlin ও Jetpack Compose দিয়ে তৈরি একটি সম্পূর্ণ ফাংশনাল Android অ্যাপ, যা Android ডিজাইন ও ডেভেলপমেন্টের সেরা পদ্ধতি অনুসরণ করে এবং এতে Navigation Compose অন্তর্ভুক্ত আছে।
• Sunflower-কে Jetpack Compose-এ মাইগ্রেট করা: একটি ব্লগ পোস্ট যা Sunflower স্যাম্পেল অ্যাপকে ভিউ থেকে Compose-এ মাইগ্রেট করার যাত্রাকে ডকুমেন্ট করে, যার মধ্যে Navigation Compose-এ মাইগ্রেট করার বিষয়টিও অন্তর্ভুক্ত।
• প্রতিটি স্ক্রিনের জন্য Jetnews: একটি ব্লগ পোস্ট যা Jetnews স্যাম্পেলের রিফ্যাক্টর এবং মাইগ্রেশনকে ডকুমেন্ট করে যাতে Jetpack Compose এবং Navigation Compose-এর মাধ্যমে সমস্ত স্ক্রিনকে সাপোর্ট করা যায়।

আপনার জন্য সাজেস্ট করা হয়েছে

• মনে রাখবেন: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট দেখানো হয়
• Compose-এর মাধ্যমে নেভিগেট করা
• Compose ও অন্যান্য লাইব্রেরি
• অন্যান্য বিষয়