জেটপ্যাক নেভিগেশনকে নেভিগেশন কম্পোজে স্থানান্তর করুন

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

এই পৃষ্ঠায় বর্ণনা করা হয়েছে কীভাবে জেটপ্যাক কম্পোজে বৃহত্তর ভিউ-ভিত্তিক UI মাইগ্রেশনের অংশ হিসেবে, ফ্র্যাগমেন্ট-ভিত্তিক জেটপ্যাক নেভিগেশন থেকে নেভিগেশন কম্পোজে মাইগ্রেট করতে হয়।

অভিবাসনের পূর্বশর্ত

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

অভিবাসনের পদক্ষেপ

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

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

নেভিগেশন কম্পোজে স্থানান্তরিত হতে, এই ধাপগুলো অনুসরণ করুন:

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

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

   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. আপনার অ্যাপের NavHost App composable-এর ভিতরে তৈরি করুন এবং navController টি পাস করুন:

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

6. আপনার নেভিগেশন গ্রাফ তৈরি করতে composable ডেস্টিনেশনগুলো যোগ করুন। যদি প্রতিটি স্ক্রিন আগে থেকেই কম্পোজে মাইগ্রেট করা হয়ে থাকে, তাহলে এই ধাপে শুধু আপনার ফ্র্যাগমেন্টগুলো থেকে এই স্ক্রিন কম্পোজেবলগুলোকে 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 সরবরাহ করার পদ্ধতি পরিবর্তন করা। আপনি প্রায়শই Hilt ইনজেকশন এবং hiltViewModel এর মাধ্যমে Compose ও নেভিগেশনের সাথে এর ইন্টিগ্রেশন পয়েন্ট ব্যবহার করতে পারেন:

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

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

   কোনো গন্তব্যের জন্য সংজ্ঞায়িত রাউট ক্লাসের একটি ইনস্ট্যান্স তৈরি করে সেখানে ডেটা পাঠানো যায়। এরপর সেই ডেটা সরাসরি গন্তব্যের ব্যাক স্ট্যাক এন্ট্রি থেকে অথবা 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. সমস্ত ফ্র্যাগমেন্ট, প্রাসঙ্গিক এক্সএমএল লেআউট, অপ্রয়োজনীয় নেভিগেশন ও অন্যান্য রিসোর্স এবং অপ্রচলিত ফ্র্যাগমেন্ট ও জেটপ্যাক নেভিগেশন ডিপেন্ডেন্সিগুলো মুছে ফেলুন।

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

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

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

মাইগ্রেট করার সময় সাধারণ ব্যবহারের ক্ষেত্রগুলো নিম্নরূপ:

• একটি রচনাযোগ্য স্থানে নেভিগেট করুন
• আর্গুমেন্ট দিয়ে নেভিগেট করুন
• গভীর সংযোগ
• নেস্টেড নেভিগেশন
• বটম ন্যাভ বারের সাথে ইন্টিগ্রেশন
• একটি কাস্টম ন্যাভ কম্পোনেন্টের সাথে ইন্টিগ্রেশন

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

নেভিগেট করার সময় জটিল ডেটা পুনরুদ্ধার করুন

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

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

সীমাবদ্ধতা

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

নেভিগেশন কম্পোজে ক্রমবর্ধমান স্থানান্তর

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

রূপান্তর অ্যানিমেশন

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

আরও জানুন

নেভিগেশন কম্পোজে স্থানান্তরের বিষয়ে আরও তথ্যের জন্য, নিম্নলিখিত রিসোর্সগুলো দেখুন:

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

{% হুবহু %} {% endverbatim %}

আপনার জন্য প্রস্তাবিত

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

{% হুবহু %} {% endverbatim %}