আপনার নেভিগেশন গ্রাফ ডিজাইন করুন

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

গন্তব্যের ধরন

তিনটি সাধারণ ধরনের গন্তব্য রয়েছে: হোস্ট করা, ডায়ালগ এবং কার্যকলাপ। নিম্নলিখিত সারণী এই তিনটি গন্তব্যের ধরন এবং তাদের উদ্দেশ্যগুলিকে রূপরেখা দেয়৷

এই নথিতে হোস্ট করা গন্তব্যগুলির উদাহরণ রয়েছে, যা সবচেয়ে সাধারণ এবং মৌলিক গন্তব্য। অন্যান্য গন্তব্যের তথ্যের জন্য নিম্নলিখিত নির্দেশিকাগুলি দেখুন:

• ডায়ালগ গন্তব্য
• কার্যকলাপ গন্তব্য

ফ্রেমওয়ার্ক

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

• কম্পোজ: NavHost কম্পোজেবল ব্যবহার করুন। Kotlin DSL ব্যবহার করে এটিতে একটি NavGraph যোগ করুন। আপনি দুটি উপায়ে গ্রাফ তৈরি করতে পারেন:
  • NavHost এর অংশ হিসাবে: NavHost যোগ করার অংশ হিসাবে সরাসরি নেভিগেশন গ্রাফ তৈরি করুন।
  • প্রোগ্রামগতভাবে: একটি NavGraph তৈরি করতে NavController.createGraph() পদ্ধতি ব্যবহার করুন এবং এটি সরাসরি NavHost এ পাস করুন।
• টুকরা: ভিউ UI ফ্রেমওয়ার্কের সাথে টুকরো ব্যবহার করার সময়, হোস্ট হিসাবে একটি NavHostFragment ব্যবহার করুন। একটি নেভিগেশন গ্রাফ তৈরি করার বিভিন্ন উপায় আছে:
  • প্রোগ্রামগতভাবে: একটি NavGraph তৈরি করতে এবং সরাসরি NavHostFragment এ প্রয়োগ করতে Kotlin DSL ব্যবহার করুন।
    • createGraph() ফাংশনটি কোটলিন ডিএসএল-এর সাথে খন্ড এবং রচনা উভয়ের জন্যই একই।
  • XML: সরাসরি XML-এ আপনার নেভিগেশন হোস্ট এবং গ্রাফ লিখুন।
  • অ্যান্ড্রয়েড স্টুডিও সম্পাদক: একটি XML রিসোর্স ফাইল হিসাবে আপনার গ্রাফ তৈরি এবং সামঞ্জস্য করতে অ্যান্ড্রয়েড স্টুডিওতে GUI সম্পাদক ব্যবহার করুন।

রচনা করুন

কম্পোজে, একটি রুট সংজ্ঞায়িত করার জন্য একটি সিরিয়ালাইজেবল অবজেক্ট বা ক্লাস ব্যবহার করুন। একটি রুট বর্ণনা করে কিভাবে একটি গন্তব্যে যেতে হয় এবং গন্তব্যের জন্য প্রয়োজনীয় সমস্ত তথ্য থাকে।

স্বয়ংক্রিয়ভাবে আপনার রুটের প্রকারের জন্য প্রয়োজনীয় সিরিয়ালাইজেশন এবং ডিসিরিয়ালাইজেশন পদ্ধতি তৈরি করতে @Serializable টীকা ব্যবহার করুন। এই টীকাটি কোটলিন সিরিয়ালাইজেশন প্লাগইন দ্বারা সরবরাহ করা হয়েছে। এই প্লাগইন যোগ করতে এই নির্দেশাবলী অনুসরণ করুন .

একবার আপনি আপনার রুটগুলি সংজ্ঞায়িত করলে, আপনার নেভিগেশন গ্রাফ তৈরি করতে NavHost কম্পোজেবল ব্যবহার করুন। নিম্নলিখিত উদাহরণ বিবেচনা করুন:

@Serializable
object Profile
@Serializable
object FriendsList

val navController = rememberNavController()

NavHost(navController = navController, startDestination = Profile) {
    composable<Profile> { ProfileScreen( /* ... */ ) }
    composable<FriendsList> { FriendsListScreen( /* ... */ ) }
    // Add more destinations similarly.
}

1. একটি সিরিয়ালাইজেবল অবজেক্ট Profile এবং FriendsList দুটি রুটের প্রতিটিকে উপস্থাপন করে।
2. NavHost কম্পোজেবলের কল একটি NavController এবং শুরু গন্তব্যের জন্য একটি রুট পাস করে।
3. NavHost এ পাস করা ল্যাম্বডা অবশেষে NavController.createGraph() কল করে এবং একটি NavGraph ফেরত দেয়।
4. প্রতিটি রুট NavGraphBuilder.composable<T>() এ টাইপ আর্গুমেন্ট হিসাবে সরবরাহ করা হয় যা ফলে NavGraph এ গন্তব্য যোগ করে।
5. ল্যাম্বডা composable পাস করা হল যা NavHost সেই গন্তব্যের জন্য প্রদর্শন করে।

ল্যাম্বডা বোঝো

NavGraph তৈরি করা ল্যাম্বডাকে আরও ভালোভাবে বোঝার জন্য, বিবেচনা করুন যে আগের স্নিপেটের মতো একই গ্রাফ তৈরি করতে, আপনি NavController.createGraph() ব্যবহার করে আলাদাভাবে NavGraph তৈরি করতে পারেন এবং সরাসরি NavHost এ পাস করতে পারেন:

val navGraph by remember(navController) {
  navController.createGraph(startDestination = Profile)) {
    composable<Profile> { ProfileScreen( /* ... */ ) }
    composable<FriendsList> { FriendsListScreen( /* ... */ ) }
  }
}
NavHost(navController, navGraph)

আর্গুমেন্ট পাস

আপনার যদি কোনো গন্তব্যে ডেটা পাস করতে হয়, তাহলে প্যারামিটার আছে এমন একটি ক্লাস দিয়ে রুটটি সংজ্ঞায়িত করুন। উদাহরণস্বরূপ, Profile রুট একটি name পরামিতি সহ একটি ডেটা ক্লাস।

@Serializable
data class Profile(val name: String)

যখনই আপনাকে সেই গন্তব্যে আর্গুমেন্ট পাস করতে হবে, আপনি আপনার রুট ক্লাসের একটি উদাহরণ তৈরি করেন, ক্লাস কনস্ট্রাক্টরের কাছে আর্গুমেন্টগুলি পাস করেন।

ঐচ্ছিক আর্গুমেন্টের জন্য, একটি ডিফল্ট মান সহ বাতিলযোগ্য ক্ষেত্র তৈরি করুন।

@Serializable
data class Profile(val nickname: String? = null)

রুট উদাহরণ প্রাপ্ত

আপনি NavBackStackEntry.toRoute() বা SavedStateHandle.toRoute() দিয়ে রুটের উদাহরণ পেতে পারেন। যখন আপনি composable() ব্যবহার করে একটি গন্তব্য তৈরি করেন, তখন NavBackStackEntry একটি প্যারামিটার হিসাবে উপলব্ধ থাকে।

@Serializable
data class Profile(val name: String)

val navController = rememberNavController()

NavHost(navController = navController, startDestination = Profile(name="John Smith")) {
    composable<Profile> { backStackEntry ->
        val profile: Profile = backStackEntry.toRoute()
        ProfileScreen(name = profile.name) }
}

এই স্নিপেটে নিম্নলিখিত নোট করুন:

• Profile রুট নেভিগেশন গ্রাফে শুরুর গন্তব্য নির্দিষ্ট করে, name জন্য আর্গুমেন্ট হিসেবে "John Smith" ।
• গন্তব্য নিজেই composable<Profile>{} ব্লক।
• ProfileScreen কম্পোজেবল তার নিজের name আর্গুমেন্টের জন্য profile.name এর মান নেয়।
• যেমন, "John Smith" মানটি ProfileScreen চলে যায়।

ন্যূনতম উদাহরণ

একটি NavController এবং NavHost একসাথে কাজ করার একটি সম্পূর্ণ উদাহরণ:

@Serializable
data class Profile(val name: String)

@Serializable
object FriendsList

// Define the ProfileScreen composable.
@Composable
fun ProfileScreen(
    profile: Profile
    onNavigateToFriendsList: () -> Unit,
  ) {
  Text("Profile for ${profile.name}")
  Button(onClick = { onNavigateToFriendsList() }) {
    Text("Go to Friends List")
  }
}

// Define the FriendsListScreen composable.
@Composable
fun FriendsListScreen(onNavigateToProfile: () -> Unit) {
  Text("Friends List")
  Button(onClick = { onNavigateToProfile() }) {
    Text("Go to Profile")
  }
}

// Define the MyApp composable, including the `NavController` and `NavHost`.
@Composable
fun MyApp() {
  val navController = rememberNavController()
  NavHost(navController, startDestination = Profile(name = "John Smith")) {
    composable<Profile> { backStackEntry ->
        val profile: Profile = backStackEntry.toRoute()
        ProfileScreen(
            profile = profile,
            onNavigateToFriendsList = {
                navController.navigate(route = FriendsList)
            }
        )
    }
    composable<FriendsList> {
      FriendsListScreen(
        onNavigateToProfile = {
          navController.navigate(
            route = Profile(name = "Aisha Devi")
          )
        }
      )
    }
  }
}

স্নিপেট যেমন দেখায়, আপনার কম্পোজেবলে NavController পাঠানোর পরিবর্তে, NavHost এ একটি ইভেন্ট প্রকাশ করুন। অর্থাৎ, আপনার কম্পোজেবলের টাইপ () -> Unit একটি প্যারামিটার থাকা উচিত যার জন্য NavHost একটি ল্যাম্বডা পাস করে যা NavController.navigate() কল করে।

টুকরা

পূর্ববর্তী বিভাগগুলিতে বর্ণিত হিসাবে, টুকরোগুলি ব্যবহার করার সময় আপনার কাছে Kotlin DSL, XML, বা Android Studio এডিটর ব্যবহার করে প্রোগ্রাম্যাটিকভাবে একটি নেভিগেশন গ্রাফ তৈরি করার বিকল্প রয়েছে।

নিম্নলিখিত বিভাগগুলি এই বিভিন্ন পদ্ধতির বিশদ বিবরণ দেয়।

প্রোগ্রামগতভাবে

কোটলিন ডিএসএল টুকরা সহ একটি নেভিগেশন গ্রাফ তৈরি করার একটি প্রোগ্রাম্যাটিক উপায় প্রদান করে। অনেক উপায়ে এটি একটি XML রিসোর্স ফাইল ব্যবহার করার চেয়ে আরও পরিষ্কার এবং আধুনিক।

নিম্নলিখিত উদাহরণটি বিবেচনা করুন, যা একটি দুই-স্ক্রীন নেভিগেশন গ্রাফ প্রয়োগ করে।

প্রথমে NavHostFragment তৈরি করা প্রয়োজন, যাতে একটি app:navGraph উপাদান অন্তর্ভুক্ত করা উচিত নয় :

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

এরপর, NavHostFragment এর id NavController.findNavController এ পাস করুন। এটি NavHostFragment এর সাথে NavController-কে যুক্ত করে।

পরবর্তীকালে, NavController.createGraph() এ কলটি গ্রাফটিকে NavController এর সাথে লিঙ্ক করে এবং এর ফলে NavHostFragment এর সাথেও:

@Serializable
data class Profile(val name: String)

@Serializable
object FriendsList

// Retrieve the NavController.
val navController = findNavController(R.id.nav_host_fragment)

// Add the graph to the NavController with `createGraph()`.
navController.graph = navController.createGraph(
    startDestination = Profile(name = "John Smith")
) {
    // Associate each destination with one of the route constants.
    fragment<ProfileFragment, Profile> {
        label = "Profile"
    }

    fragment<FriendsListFragment, FriendsList>() {
        label = "Friends List"
    }

    // Add other fragment destinations similarly.
}

এইভাবে DSL ব্যবহার করা কম্পোজের পূর্ববর্তী বিভাগে বর্ণিত কর্মপ্রবাহের অনুরূপ। উদাহরণস্বরূপ, সেখানে এবং এখানে উভয়ই, NavController.createGraph() ফাংশন NavGraph তৈরি করে। একইভাবে, যখন NavGraphBuilder.composable() গ্রাফে সংমিশ্রণযোগ্য গন্তব্য যোগ করে, এখানে NavGraphBuilder.fragment() একটি খণ্ড গন্তব্য যোগ করে।

কোটলিন ডিএসএল কীভাবে ব্যবহার করবেন সে সম্পর্কে আরও তথ্যের জন্য, NavGraphBuilder DSL দিয়ে একটি গ্রাফ তৈরি করুন দেখুন।

এক্সএমএল

আপনি সরাসরি XML নিজে লিখতে পারেন। নিম্নলিখিত উদাহরণ মিরর এবং পূর্ববর্তী বিভাগ থেকে দুই-স্ক্রীন উদাহরণের সমতুল্য।

প্রথমে, একটি NavHostFragment তৈরি করুন। এটি নেভিগেশন হোস্ট হিসাবে কাজ করে যা প্রকৃত নেভিগেশন গ্রাফ ধারণ করে।

একটি NavHostFragment এর একটি ন্যূনতম বাস্তবায়ন:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:navGraph="@navigation/nav_graph" />

</FrameLayout>

NavHostFragment এ অ্যাট্রিবিউট app:navGraph । আপনার নেভিগেশন গ্রাফটি নেভিগেশন হোস্টের সাথে সংযুক্ত করতে এই বৈশিষ্ট্যটি ব্যবহার করুন। আপনি কীভাবে গ্রাফটি বাস্তবায়ন করতে পারেন তার একটি উদাহরণ নিচে দেওয়া হল:

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/profile">

    <fragment
        android:id="@+id/profile"
        android:name="com.example.ProfileFragment"
        android:label="Profile">

        <!-- Action to navigate from Profile to Friends List. -->
        <action
            android:id="@+id/action_profile_to_friendslist"
            app:destination="@id/friendslist" />
    </fragment>

    <fragment
        android:id="@+id/friendslist"
        android:name="com.example.FriendsListFragment"
        android:label="Friends List" />

    <!-- Add other fragment destinations similarly. -->
</navigation>

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

সম্পাদক

আপনি অ্যান্ড্রয়েড স্টুডিওতে নেভিগেশন এডিটর ব্যবহার করে আপনার অ্যাপের নেভিগেশন গ্রাফ পরিচালনা করতে পারেন। এটি মূলত একটি GUI যা আপনি আপনার NavigationFragment XML তৈরি এবং সম্পাদনা করতে ব্যবহার করতে পারেন, যেমনটি পূর্ববর্তী বিভাগে দেখা গেছে।

আরও তথ্যের জন্য, নেভিগেশন সম্পাদক দেখুন।

নেস্টেড গ্রাফ

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

আরও পড়া

আরও মূল নেভিগেশন ধারণার জন্য, নিম্নলিখিত নির্দেশিকাগুলি দেখুন:

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