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

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

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

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

You can migrate to Navigation Compose once you're able to replace all of your Fragments with corresponding screen composables . Screen composables can contain a mix of Compose and View content , but all navigation destinations must be composables to enable Navigation Compose migration. Until then, you should continue using Fragment-based Navigation component in your interop View and Compose codebase. See the navigation interop documentation for more information.

Using Navigation Compose in a Compose-only app is not a prerequisite. You can continue using Fragment-based Navigation component , as long as you keep Fragments for hosting your composable content .

মাইগ্রেশনের ধাপগুলি

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

If your app is already following a UDF design pattern and our guide to architecture , migrating to Jetpack Compose and Navigation Compose shouldn't require major refactors of other layers of your app, apart from the UI layer.

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

  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(/* ... */)
            }
        }
    }

  3. প্রতিটি নেভিগেশন গন্তব্যের জন্য প্রকার তৈরি করুন। যেসব গন্তব্যের জন্য কোনও ডেটা এবং data class class হয় না, অথবা যেসব গন্তব্যের জন্য ডেটা প্রয়োজন, তাদের জন্য একটি data object ব্যবহার করুন।

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

  4. Set up the NavController in a place where all composables that need to reference it have access to it (this is usually inside your App composable). This approach follows the principles of state hoisting and lets you use the NavController as the source of truth for navigating between composable screens and maintaining the back stack:

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

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

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

  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(/* ... */)
            }
            // ...
        }
    }

  7. If you followed the guidance on architecting your Compose UI , specifically how ViewModel s and navigation events should be passed to composables, the next step is to change how you provide the ViewModel to each screen composable. You can often use Hilt injection and its integration point with Compose and Navigation via hiltViewModel :

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

  8. সমস্ত findNavController() নেভিগেশন কলগুলিকে navController দিয়ে প্রতিস্থাপন করুন এবং সম্পূর্ণ 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)
                    }
                )
            }
            // ...
        }
    }

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

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

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

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

মাইগ্রেট করার সময় সাধারণ ব্যবহারের ক্ষেত্রে নিম্নলিখিতগুলি অন্তর্ভুক্ত রয়েছে:

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

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

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

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

সীমাবদ্ধতা

এই বিভাগটি নেভিগেশন কম্পোজের বর্তমান সীমাবদ্ধতা বর্ণনা করে।

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

বর্তমানে, আপনি আপনার কোডে গন্তব্য হিসেবে Fragments ব্যবহার করার সময় Navigation Compose ব্যবহার করতে পারবেন না। Navigation Compose ব্যবহার শুরু করার জন্য, আপনার সমস্ত গন্তব্যস্থল কম্পোজেবল হতে হবে। আপনি Issue Tracker এ এই বৈশিষ্ট্যের অনুরোধটি ট্র্যাক করতে পারেন।

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

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

আরও জানুন

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

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