আপনার অ্যাপের মধ্যে লগ-ইন ফ্লো, উইজার্ড বা অন্যান্য সাবফ্লো সাধারণত নেস্টেড নেভিগেশন গ্রাফ হিসেবে সবচেয়ে ভালোভাবে উপস্থাপন করা হয়। এইভাবে স্বয়ংসম্পূর্ণ সাব-নেভিগেশন ফ্লো নেস্ট করার মাধ্যমে, আপনার অ্যাপের UI-এর মূল ফ্লো বোঝা ও ম্যানেজ করা আরও সহজ হয়।
এছাড়াও, নেস্টেড গ্রাফ আবার ব্যবহার করা যায়। এছাড়াও, তারা এক লেভেলের
এনক্যাপসুলেশন প্রদান করে—নেস্টেড গ্রাফের বাইরের গন্তব্যগুলির নেস্টেড গ্রাফের মধ্যে থাকা কোনও গন্তব্যে
সরাসরি অ্যাক্সেস থাকে না। পরিবর্তে, তাদের নেস্টেড গ্রাফেই
navigate() করতে হবে, যেখানে গ্রাফের বাকি অংশকে প্রভাবিত না করেই ইন্টার্নাল লজিক
পরিবর্তন করা যেতে পারে।
উদাহরণ
আপনার অ্যাপের টপ-লেভেল নেভিগেশন গ্রাফে অ্যাপ লঞ্চ করার সময় ব্যবহারকারী যে প্রাথমিক গন্তব্য দেখতে পান সেটি দিয়ে শুরু করতে হবে এবং অ্যাপে নেভিগেট করার সময় যেসব গন্তব্য দেখতে পান সেগুলিও অন্তর্ভুক্ত করতে হবে।
উদাহরণ হিসেবে ছবি ১ থেকে টপ-লেভেল নেভিগেশন গ্রাফ ব্যবহার করে, ধরুন আপনি চান যে ব্যবহারকারী শুধুমাত্র প্রথমবার অ্যাপ লঞ্চ করার সময় title_screen এবং register স্ক্রিন দেখুন। এর পরে, ব্যবহারকারীর তথ্য স্টোর করা হয় এবং পরবর্তীকালে অ্যাপটি চালু করার সময়, আপনাকে সরাসরি ম্যাচ স্ক্রিনে যেতে হবে।
সেরা পদ্ধতি হিসেবে, ম্যাচ স্ক্রিনকে টপ-লেভেল নেভিগেশন গ্রাফের শুরুর ডেস্টিনেশন হিসেবে সেট করুন এবং টাইটেল ও রেজিস্টার স্ক্রিনকে নেস্টেড গ্রাফে সরান, যেমনটি চিত্র ১-এ দেখানো হয়েছে:
ম্যাচ স্ক্রিন চালু হলে, কোনও রেজিস্টার করা ব্যবহারকারী আছেন কিনা তা চেক করে দেখুন। ব্যবহারকারী রেজিস্টার না করে থাকলে, তাকে রেজিস্ট্রেশন স্ক্রিনে নিয়ে যান।
শর্তসাপেক্ষ নেভিগেশন পরিস্থিতি সম্পর্কে আরও তথ্যের জন্য, শর্তসাপেক্ষ নেভিগেশন দেখুন।
লিখুন
Compose ব্যবহার করে নেস্টেড নেভিগেশন গ্রাফ তৈরি করতে, NavGraphBuilder.navigation() ফাংশন ব্যবহার করুন। গ্রাফে গন্তব্য যোগ করার সময় আপনি
NavGraphBuilder.composable() এবং NavGraphBuilder.dialog()
ফাংশনের মতো navigation() ব্যবহার করেন।
মূল পার্থক্য হল, navigation নতুন গন্তব্য তৈরি করার পরিবর্তে নেস্টেড গ্রাফ তৈরি করে। তারপর আপনি নেস্টেড গ্রাফে গন্তব্য যোগ করতে navigation()-এর ল্যাম্বডার মধ্যে composable() এবং dialog() কল করেন।
Compose ব্যবহার করে নিম্নলিখিত স্নিপেট কীভাবে চিত্র ২-এ গ্রাফ প্রয়োগ করে তা বিবেচনা করুন:
// Routes
@Serializable object Title
@Serializable object Register
// Route for nested graph
@Serializable object Game
// Routes inside nested graph
@Serializable object Match
@Serializable object InGame
@Serializable object ResultsWinner
@Serializable object GameOver
NavHost(navController, startDestination = Title) {
composable<Title> {
TitleScreen(
onPlayClicked = { navController.navigate(route = Register) },
onLeaderboardsClicked = { /* Navigate to leaderboards */ }
)
}
composable<Register> {
RegisterScreen(
onSignUpComplete = { navController.navigate(route = Game) }
)
}
navigation<Game>(startDestination = Match) {
composable<Match> {
MatchScreen(
onStartGame = { navController.navigate(route = InGame) }
)
}
composable<InGame> {
InGameScreen(
onGameWin = { navController.navigate(route = ResultsWinner) },
onGameLose = { navController.navigate(route = GameOver) }
)
}
composable<ResultsWinner> {
ResultsWinnerScreen(
onNextMatchClicked = {
navController.navigate(route = Match) {
popUpTo(route = Match) { inclusive = true }
}
},
onLeaderboardsClicked = { /* Navigate to leaderboards */ }
)
}
composable<GameOver> {
GameOverScreen(
onTryAgainClicked = {
navController.navigate(route = Match) {
popUpTo(route = Match) { inclusive = true }
}
}
)
}
}
}
নেস্টেড গন্তব্যে সরাসরি নেভিগেট করতে, অন্য যেকোনও গন্তব্যের মতো রুট টাইপ ব্যবহার করুন। কারণ, রুট হল একটি গ্লোবাল কনসেপ্ট যা ব্যবহার করে এমন গন্তব্য শনাক্ত করা হয় যেখানে যেকোনও স্ক্রিন নেভিগেট করতে পারে:
navController.navigate(route = Match)
XML
XML ব্যবহার করার সময়, আপনি নেস্টেড গ্রাফ তৈরি করতে নেভিগেশন এডিটর ব্যবহার করতে পারেন। এটি করতে, নিম্নলিখিত ধাপগুলি অনুসরণ করুন:
- নেভিগেশন এডিটরে, Shift কী প্রেস করে ধরে রাখুন এবং নেস্টেড গ্রাফে আপনি যেসব গন্তব্য অন্তর্ভুক্ত করতে চান সেগুলিতে ক্লিক করুন।
সংশ্লিষ্ট মেনু খুলতে মাউসের ডানদিকের বোতামে ক্লিক করুন এবং নেস্টেড গ্রাফে সরান > নতুন গ্রাফ বিকল্পটি বেছে নিন। গন্তব্যগুলি একটি নেস্টেড গ্রাফে আবদ্ধ থাকে। ছবি ২-এ নেভিগেশন এডিটর-এ একটি নেস্টেড গ্রাফ দেখানো হয়েছে:
ছবি ২. নেভিগেশন এডিটরে নেস্টেড গ্রাফ নেস্টেড গ্রাফে ক্লিক করুন। অ্যাট্রিবিউট প্যানেলে নিম্নলিখিত অ্যাট্রিবিউটগুলি দেখা যায়:
- টাইপ, যাতে "নেস্টেড গ্রাফ" আছে
- ID, যাতে নেস্টেড গ্রাফের জন্য সিস্টেম-অ্যাসাইন করা আইডি থাকে। আপনার কোড থেকে নেস্টেড গ্রাফ রেফারেন্স করতে এই ID ব্যবহার করা হয়।
নেস্টেড গ্রাফের গন্তব্য দেখতে সেটির উপর ডবল ক্লিক করুন।
XML ভিউতে টগল করতে টেক্সট ট্যাবে ক্লিক করুন। গ্রাফে একটি নেস্টেড নেভিগেশন গ্রাফ যোগ করা হয়েছে। এই নেভিগেশন গ্রাফের নিজস্ব
navigationএলিমেন্ট আছে, সাথে আছে নিজস্ব আইডি এবং একটিstartDestinationঅ্যাট্রিবিউট যা নেস্টেড গ্রাফের প্রথম গন্তব্যকে নির্দেশ করে:<?xml version="1.0" encoding="utf-8"?> <navigation xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android" app:startDestination="@id/mainFragment"> <fragment android:id="@+id/mainFragment" android:name="com.example.cashdog.cashdog.MainFragment" android:label="fragment_main" tools:layout="@layout/fragment_main" > <action android:id="@+id/action_mainFragment_to_sendMoneyGraph" app:destination="@id/sendMoneyGraph" /> <action android:id="@+id/action_mainFragment_to_viewBalanceFragment" app:destination="@id/viewBalanceFragment" /> </fragment> <fragment android:id="@+id/viewBalanceFragment" android:name="com.example.cashdog.cashdog.ViewBalanceFragment" android:label="fragment_view_balance" tools:layout="@layout/fragment_view_balance" /> <navigation android:id="@+id/sendMoneyGraph" app:startDestination="@id/chooseRecipient"> <fragment android:id="@+id/chooseRecipient" android:name="com.example.cashdog.cashdog.ChooseRecipient" android:label="fragment_choose_recipient" tools:layout="@layout/fragment_choose_recipient"> <action android:id="@+id/action_chooseRecipient_to_chooseAmountFragment" app:destination="@id/chooseAmountFragment" /> </fragment> <fragment android:id="@+id/chooseAmountFragment" android:name="com.example.cashdog.cashdog.ChooseAmountFragment" android:label="fragment_choose_amount" tools:layout="@layout/fragment_choose_amount" /> </navigation> </navigation>আপনার কোডে, রুট গ্রাফকে নেস্টেড গ্রাফের সাথে কানেক্ট করা অ্যাকশনের রিসোর্স আইডি পাস করুন:
Kotlin
view.findNavController().navigate(R.id.action_mainFragment_to_sendMoneyGraph)
জাভা
Navigation.findNavController(view).navigate(R.id.action_mainFragment_to_sendMoneyGraph);
- ডিজাইন ট্যাবে ফিরে গিয়ে, রুট বিকল্পে ক্লিক করে রুট গ্রাফে ফিরে যান।
include ব্যবহার করে অন্যান্য নেভিগেশন গ্রাফ রেফারেন্স করা
আপনার গ্রাফ স্ট্রাকচার মডিউলারাইজ করার আরেকটি উপায় হল, প্যারেন্ট নেভিগেশন গ্রাফে <include> এলিমেন্ট ব্যবহার করে একটি গ্রাফের মধ্যে
অন্যটি অন্তর্ভুক্ত করা। এটি
অন্তর্ভুক্ত গ্রাফকে সম্পূর্ণ আলাদা মডিউল বা প্রোজেক্টে সংজ্ঞায়িত করার অনুমতি দেয়, যা পুনর্ব্যবহারযোগ্যতাকে সর্বাধিক করে তোলে।
নিচের স্নিপেট থেকে আপনি কীভাবে <include> ব্যবহার করবেন তা দেখানো হয়েছে:
<!-- (root) nav_graph.xml -->
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/nav_graph"
app:startDestination="@id/fragment">
<include app:graph="@navigation/included_graph" />
<fragment
android:id="@+id/fragment"
android:name="com.example.myapplication.BlankFragment"
android:label="Fragment in Root Graph"
tools:layout="@layout/fragment_blank">
<action
android:id="@+id/action_fragment_to_second_graph"
app:destination="@id/second_graph" />
</fragment>
...
</navigation>
<!-- included_graph.xml -->
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/second_graph"
app:startDestination="@id/includedStart">
<fragment
android:id="@+id/includedStart"
android:name="com.example.myapplication.IncludedStart"
android:label="fragment_included_start"
tools:layout="@layout/fragment_included_start" />
</navigation>