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

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

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

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

ধরন

বর্ণনা

উদাহরণ

হোস্ট করা হয়েছে

সম্পূর্ণ নেভিগেশন হোস্ট পূরণ করে। অর্থাৎ, হোস্ট করা ডেস্টিনেশনের সাইজ নেভিগেশন হোস্টের সাইজের সমান এবং আগের ডেস্টিনেশন দেখা যায় না।

প্রধান ও বিস্তারিত স্ক্রিন।

ডায়ালগ

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

সতর্কতা, বাছাই, ফর্ম।

অ্যাক্টিভিটি

অ্যাপের মধ্যে অনন্য স্ক্রিন বা ফিচার দেখায়।

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

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

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

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

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

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

লিখুন

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

আপনার রুট টাইপের জন্য প্রয়োজনীয় সিরিয়ালাইজেশন ও ডিসিরিয়ালাইজেশন পদ্ধতি অটোমেটিক তৈরি করতে @Serializable অ্যানোটেশন ব্যবহার করুন। এই অ্যানোটেশন Kotlin Serialization প্লাগ-ইন প্রদান করে। এই প্লাগ-ইন যোগ করতে এইসব নির্দেশাবলী অনুসরণ করুন।

আপনার রুট নির্দিষ্ট করা হয়ে গেলে, আপনার নেভিগেশন গ্রাফ তৈরি করতে 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 রুট নেভিগেশন গ্রাফে শুরুর গন্তব্য নির্দিষ্ট করে, যেখানে "John Smith" হল name-এর আর্গুমেন্ট।
  • গন্তব্যটি নিজেই 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 এডিটর ব্যবহার করে প্রোগ্রাম্যাটিক্যালি নেভিগেশন গ্রাফ তৈরি করার বিকল্প থাকে।

নিম্নলিখিত বিভাগে এইসব বিভিন্ন পদ্ধতির বিবরণ দেওয়া হয়েছে।

প্রোগ্রাম্যাটিক্যালি

Kotlin DSL ফ্র্যাগমেন্ট সহ নেভিগেশন গ্রাফ তৈরি করার জন্য একটি প্রোগ্রাম্যাটিক উপায় প্রদান করে। 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-এ পাস করুন। এটি NavController-কে NavHostFragment-এর সাথে যুক্ত করে।

এরপর, 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 ব্যবহার করা Compose-এর পূর্ববর্তী বিভাগে বর্ণিত ওয়ার্কফ্লোর মতোই। যেমন, সেখানে এবং এখানে, উভয় ক্ষেত্রেই NavController.createGraph() ফাংশন NavGraph জেনারেট করে। একইভাবে, NavGraphBuilder.composable() গ্রাফে কম্পোজেবল গন্তব্য যোগ করার সময়, এখানে NavGraphBuilder.fragment() ফ্র্যাগমেন্ট গন্তব্য যোগ করে।

Kotlin DSL কীভাবে ব্যবহার করতে হয় সেই সম্পর্কে আরও জানতে, NavGraphBuilder DSL-এর মাধ্যমে গ্রাফ তৈরি করুন দেখুন।

XML

আপনি সরাসরি নিজেই 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-এ নেভিগেট করে। আরও তথ্যের জন্য, নেভিগেশন অ্যাকশন ও ফ্র্যাগমেন্ট ব্যবহার করা দেখুন।

এডিটর

Android Studio-তে নেভিগেশন এডিটর ব্যবহার করে আপনি অ্যাপের নেভিগেশন গ্রাফ ম্যানেজ করতে পারবেন। এটি মূলত একটি GUI যা আপনি আপনার NavigationFragment XML তৈরি এবং এডিট করতে ব্যবহার করতে পারেন, যেমনটি আগের বিভাগে দেখা গেছে।

আরও তথ্যের জন্য, নেভিগেশন এডিটর দেখুন।

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

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

আরও পড়ুন

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

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