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

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

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

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

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

শুধুমাত্র কম্পোজ অ্যাপে নেভিগেশন কম্পোজ ব্যবহার করা পূর্বশর্ত নয়। আপনি ফ্র্যাগমেন্ট-ভিত্তিক নেভিগেশন কম্পোনেন্ট ব্যবহার চালিয়ে যেতে পারেন, যতক্ষণ না আপনি আপনার কম্পোজেবল কন্টেন্ট হোস্ট করার জন্য ফ্র্যাগমেন্টস রাখেন।

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

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

যদি আপনার অ্যাপটি ইতিমধ্যেই 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(/* ... */)
            }
        }
    }

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

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

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

    @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. যদি আপনি আপনার Compose UI তৈরির নির্দেশিকা অনুসরণ করে থাকেন, বিশেষ করে ViewModel এবং নেভিগেশন ইভেন্টগুলি composables-এ কীভাবে প্রেরণ করা উচিত, তাহলে পরবর্তী ধাপ হল প্রতিটি স্ক্রিন composable-এ ViewModel কীভাবে প্রদান করবেন তা পরিবর্তন করা। আপনি প্রায়শই hiltViewModel এর মাধ্যমে Hilt ইনজেকশন এবং এর ইন্টিগ্রেশন পয়েন্ট Compose এবং Navigation-এর সাথে ব্যবহার করতে পারেন:

    @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 এ সমর্থিত। আরও তথ্যের জন্য রিলিজ নোটগুলি পড়ুন।

আরও জানুন

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

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