NavigationUI ব্যবহার করে NavController-এর সাথে UI কম্পোনেন্ট কানেক্ট করা

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

স্ক্রিনের উপরের দিকে থাকা অ্যাপ বার

সবচেয়ে উপরে থাকা অ্যাপ বার আপনার অ্যাপের সবচেয়ে উপরে একটি নির্দিষ্ট জায়গা প্রদান করে যেখানে বর্তমান স্ক্রিনের তথ্য ও অ্যাকশন দেখানো হয়।

স্ক্রিনে একেবারে উপরে অ্যাপ বার দেখানো হচ্ছে
ছবি ১. স্ক্রিনে একেবারে উপরে থাকা অ্যাপ বার দেখা যাচ্ছে।

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

<navigation>
    <fragment ...
              android:label="Page title">
      ...
    </fragment>
</navigation>

নিচে আলোচনা করা উপরের অ্যাপ বার ইমপ্লিমেন্টেশনের সাথে NavigationUI ব্যবহার করার সময়, আপনার লেবেলে {argName} ফর্ম্যাট ব্যবহার করে গন্তব্যে প্রদান করা আর্গুমেন্ট থেকে গন্তব্যে আপনার অ্যাটাচ করা লেবেল অটোমেটিক পপুলেট করা যেতে পারে।

NavigationUI নিম্নলিখিত সেরা অ্যাপ বার ধরনের জন্য সহায়তা প্রদান করে:

অ্যাপ বার সম্পর্কে আরও জানতে, অ্যাপ বার সেট-আপ করুন নিবন্ধটি দেখুন।

AppBarConfiguration

আপনার অ্যাপের ডিসপ্লে এরিয়ার উপরের বাঁদিকের কোণে নেভিগেশন বোতামের আচরণ ম্যানেজ করতে NavigationUI একটি AppBarConfiguration অবজেক্ট ব্যবহার করে। ব্যবহারকারী টপ-লেভেল গন্তব্যে আছেন কিনা তার উপর নির্ভর করে নেভিগেশন বোতামের আচরণ পরিবর্তিত হয়।

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

ব্যবহারকারী টপ-লেভেল ডেস্টিনেশনে থাকলে, নেভিগেশন বোতামটি ড্রয়ার আইকন হয়ে যায় যদি ডেস্টিনেশনটি DrawerLayout ব্যবহার করে। গন্তব্য যদি DrawerLayout ব্যবহার না করে, তাহলে নেভিগেশন বোতাম লুকানো থাকে। ব্যবহারকারী অন্য কোনও গন্তব্যে থাকলে, নেভিগেশন বোতামটি 'উপরের দিকে' বোতাম হিসেবে দেখা যায় । শুধুমাত্র শুরু করার গন্তব্যকে টপ-লেভেল গন্তব্য হিসেবে ব্যবহার করে নেভিগেশন বোতাম কনফিগার করতে, একটি AppBarConfiguration অবজেক্ট তৈরি করুন এবং নিচে দেখানো অনুযায়ী সংশ্লিষ্ট নেভিগেশন গ্রাফে পাস করুন:

Kotlin

val appBarConfiguration = AppBarConfiguration(navController.graph)

জাভা

AppBarConfiguration appBarConfiguration =
        new AppBarConfiguration.Builder(navController.getGraph()).build();

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

Kotlin

val appBarConfiguration = AppBarConfiguration(setOf(R.id.main, R.id.profile))

জাভা

AppBarConfiguration appBarConfiguration =
        new AppBarConfiguration.Builder(R.id.main, R.id.profile).build();

টুলবার তৈরি করুন

NavigationUI-এর সাহায্যে টুলবার তৈরি করতে, প্রথমে আপনার প্রধান অ্যাক্টিভিটিতে বারটি সংজ্ঞায়িত করুন, যেমন দেখানো হয়েছে:

<LinearLayout>
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar" />
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        ... />
    ...
</LinearLayout>

এরপর, আপনার মূল অ্যাক্টিভিটির onCreate() পদ্ধতি থেকে setupWithNavController() কল করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    setContentView(R.layout.activity_main)

    ...

    val navController = findNavController(R.id.nav_host_fragment)
    val appBarConfiguration = AppBarConfiguration(navController.graph)
    findViewById<Toolbar>(R.id.toolbar)
        .setupWithNavController(navController, appBarConfiguration)
}

জাভা

@Override
protected void onCreate(Bundle savedInstanceState) {
    setContentView(R.layout.activity_main);

    ...

    NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
    AppBarConfiguration appBarConfiguration =
            new AppBarConfiguration.Builder(navController.getGraph()).build();
    Toolbar toolbar = findViewById(R.id.toolbar);
    NavigationUI.setupWithNavController(
            toolbar, navController, appBarConfiguration);
}

সব গন্তব্যের জন্য নেভিগেশন বোতামটি আপ বোতাম হিসেবে কনফিগার করতে, আপনার AppBarConfiguration তৈরি করার সময় আপনার টপ-লেভেল গন্তব্যের জন্য গন্তব্য আইডির একটি খালি সেট পাস করুন। এটি উপযোগী হতে পারে যদি, উদাহরণস্বরূপ, আপনার একটি দ্বিতীয় অ্যাক্টিভিটি থাকে যা সমস্ত গন্তব্যে Toolbar-এ একটি আপ বোতাম প্রদর্শন করা উচিত। ব্যাক স্ট্যাকে অন্য কোনও গন্তব্য না থাকলে, এটি ব্যবহারকারীকে পেরেন্ট অ্যাক্টিভিটিতে ফিরে যেতে দেয়। আপনি setFallbackOnNavigateUpListener() ব্যবহার করে ফলব্যাক আচরণ কন্ট্রোল করতে পারেন, যখন navigateUp() অন্যথায় কিছুই করবে না, যেমন নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    ...

    val navHostFragment =
        supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
    val navController = navHostFragment.navController
    val appBarConfiguration = AppBarConfiguration(
        topLevelDestinationIds = setOf(),
        fallbackOnNavigateUpListener = ::onSupportNavigateUp
    )
    findViewById<Toolbar>(R.id.toolbar)
        .setupWithNavController(navController, appBarConfiguration)
}

জাভা

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...

    NavHostFragment navHostFragment = (NavHostFragment) supportFragmentManager.findFragmentById(R.id.nav_host_fragment);
    NavController navController = navHostFragment.getNavController();
    AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder()
        .setFallbackOnNavigateUpListener(::onSupportNavigateUp)
        .build();
    Toolbar toolbar = findViewById(R.id.toolbar);
    NavigationUI.setupWithNavController(
            toolbar, navController, appBarConfiguration);
}

CollapsingToolbarLayout অন্তর্ভুক্ত করুন

আপনার টুলবারের সাথে CollapsingToolbarLayout অন্তর্ভুক্ত করতে, প্রথমে আপনার অ্যাক্টিভিটিতে টুলবার এবং আশেপাশের লেআউট সংজ্ঞায়িত করুন, যেমন নিচে দেখানো হয়েছে:

<LinearLayout>
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/tall_toolbar_height">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleGravity="top"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        ... />
    ...
</LinearLayout>

এরপর, নিচে দেখানো পদ্ধতি অনুযায়ী আপনার প্রধান অ্যাক্টিভিটির onCreate পদ্ধতি থেকে setupWithNavController() কল করুন:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    setContentView(R.layout.activity_main)

    ...

    val layout = findViewById<CollapsingToolbarLayout>(R.id.collapsing_toolbar_layout)
    val toolbar = findViewById<Toolbar>(R.id.toolbar)
    val navHostFragment =
        supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
    val navController = navHostFragment.navController
    val appBarConfiguration = AppBarConfiguration(navController.graph)
    layout.setupWithNavController(toolbar, navController, appBarConfiguration)
}

জাভা

@Override
protected void onCreate(Bundle savedInstanceState) {
    setContentView(R.layout.activity_main);

    ...

    CollapsingToolbarLayout layout = findViewById(R.id.collapsing_toolbar_layout);
    Toolbar toolbar = findViewById(R.id.toolbar);
    NavHostFragment navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment);
    NavController navController = navHostFragment.getNavController();
    AppBarConfiguration appBarConfiguration =
            new AppBarConfiguration.Builder(navController.getGraph()).build();
    NavigationUI.setupWithNavController(layout, toolbar, navController, appBarConfiguration);
}

অ্যাকশন বার

ডিফল্ট অ্যাকশন বারে নেভিগেশন সাপোর্ট যোগ করতে, নিচে দেখানো অনুযায়ী আপনার প্রধান অ্যাক্টিভিটির onCreate() পদ্ধতি থেকে setupActionBarWithNavController() কল করুন। মনে রাখবেন যে আপনাকে onCreate()-এর বাইরে AppBarConfiguration ঘোষণা করতে হবে, কারণ আপনি onSupportNavigateUp() ওভাররাইড করার সময়ও এটি ব্যবহার করেন:

Kotlin

private lateinit var appBarConfiguration: AppBarConfiguration

...

override fun onCreate(savedInstanceState: Bundle?) {
    ...

    val navHostFragment =
        supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
    val navController = navHostFragment.navController
    appBarConfiguration = AppBarConfiguration(navController.graph)
    setupActionBarWithNavController(navController, appBarConfiguration)
}

জাভা

AppBarConfiguration appBarConfiguration;

...

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...

    NavHostFragment navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment);
    NavController navController = navHostFragment.getNavController();
    appBarConfiguration = new AppBarConfiguration.Builder(navController.getGraph()).build();
    NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
}

এরপর, উপরের দিকে নেভিগেশন ম্যানেজ করতে onSupportNavigateUp() ওভাররাইড করুন:

Kotlin

override fun onSupportNavigateUp(): Boolean {
    val navController = findNavController(R.id.nav_host_fragment)
    return navController.navigateUp(appBarConfiguration)
            || super.onSupportNavigateUp()
}

জাভা

@Override
public boolean onSupportNavigateUp() {
    NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
    return NavigationUI.navigateUp(navController, appBarConfiguration)
            || super.onSupportNavigateUp();
}

অ্যাপ বার ভেরিয়েশন সাপোর্ট করে

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

উদাহরণস্বরূপ, আপনার একটি গন্তব্য স্ট্যান্ডার্ড Toolbar ব্যবহার করতে পারে, যখন অন্যটি ট্যাব সহ আরও জটিল অ্যাপ বার তৈরি করতে AppBarLayout ব্যবহার করে, যেমন চিত্র ২-এ দেখানো হয়েছে।

দুটি সেরা অ্যাপ বার ভেরিয়েশন; বাঁদিকে একটি স্ট্যান্ডার্ড টুলবার এবং ডানদিকে টুলবার ও ট্যাব সহ একটি appbarlayout
ছবি ২. দুটি অ্যাপ বার ভেরিয়েশন। বাঁদিকে, একটি স্ট্যান্ডার্ড Toolbar. ডানদিকে, AppBarLayout-এর সাথে Toolbar ও ট্যাব।

NavigationUI ব্যবহার করে আপনার ডেস্টিনেশন ফ্র্যাগমেন্টের মধ্যে এই উদাহরণ প্রয়োগ করতে, প্রথমে আপনার প্রতিটি ফ্র্যাগমেন্ট লেআউটে অ্যাপ বার ডিফাইন করুন, স্ট্যান্ডার্ড টুলবার ব্যবহার করে এমন ডেস্টিনেশন ফ্র্যাগমেন্ট দিয়ে শুরু করুন:

<LinearLayout>
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        ... />
    ...
</LinearLayout>

এরপর, ট্যাব সহ অ্যাপ বার ব্যবহার করে এমন ডেস্টিনেশন ফ্র্যাগমেন্ট ডিফাইন করুন:

<LinearLayout>
    <com.google.android.material.appbar.AppBarLayout
        ... />

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            ... />

        <com.google.android.material.tabs.TabLayout
            ... />

    </com.google.android.material.appbar.AppBarLayout>
    ...
</LinearLayout>

এই দুটি ফ্র্যাগমেন্টের জন্য নেভিগেশন কনফিগারেশন লজিক একই, তবে আপনাকে প্রতিটি ফ্র্যাগমেন্টের onViewCreated() মেথডের মধ্যে থেকে setupWithNavController() কল করতে হবে, অ্যাক্টিভিটি থেকে সেগুলি শুরু করার পরিবর্তে:

Kotlin

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    val navController = findNavController()
    val appBarConfiguration = AppBarConfiguration(navController.graph)

    view.findViewById<Toolbar>(R.id.toolbar)
            .setupWithNavController(navController, appBarConfiguration)
}

জাভা

@Override
public void onViewCreated(@NonNull View view,
                          @Nullable Bundle savedInstanceState) {
    NavController navController = Navigation.findNavController(view);
    AppBarConfiguration appBarConfiguration =
            new AppBarConfiguration.Builder(navController.getGraph()).build();
    Toolbar toolbar = view.findViewById(R.id.toolbar);

    NavigationUI.setupWithNavController(
            toolbar, navController, appBarConfiguration);
}

মেনু আইটেমের সাথে গন্তব্য লিঙ্ক করুন

এছাড়াও, NavigationUI মেনু-চালিত UI কম্পোনেন্টে ডেস্টিনেশন টাই করার জন্য হেল্পার প্রদান করে। NavigationUI-এ একটি হেল্পার পদ্ধতি আছে, onNavDestinationSelected(), যা NavController-এর সাথে MenuItem নেয়, যেটি সংশ্লিষ্ট গন্তব্য হোস্ট করে। MenuItem-এর id গন্তব্যের id-এর সাথে মিলে গেলে, NavController সেই গন্তব্যে নেভিগেট করতে পারবে।

উদাহরণ হিসেবে, নিচের XML স্নিপেটগুলি একটি মেনু আইটেম এবং একটি গন্তব্যকে একটি সাধারণ id, details_page_fragment দিয়ে সংজ্ঞায়িত করে:

<?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"
    ... >

    ...

    <fragment android:id="@+id/details_page_fragment"
         android:label="@string/details"
         android:name="com.example.android.myapp.DetailsFragment" />
</navigation>
 
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    ...

    <item
        android:id="@+id/details_page_fragment"
        android:icon="@drawable/ic_details"
        android:title="@string/details" />
</menu>

আপনার মেনু যদি অ্যাক্টিভিটির onCreateOptionsMenu()-এর মাধ্যমে যোগ করা হয়ে থাকে, যেমন, আপনি অ্যাক্টিভিটির onOptionsItemSelected() ওভাররাইড করে মেনু আইটেমকে গন্তব্যের সাথে যুক্ত করতে পারেন যাতে onNavDestinationSelected() কল করা যায়, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

Kotlin

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    val navController = findNavController(R.id.nav_host_fragment)
    return item.onNavDestinationSelected(navController) || super.onOptionsItemSelected(item)
}

জাভা

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
    return NavigationUI.onNavDestinationSelected(item, navController)
            || super.onOptionsItemSelected(item);
}

এখন, কোনও ব্যবহারকারী details_page_fragment মেনু আইটেমে ক্লিক করলে, অ্যাপটি অটোমেটিক একই id সহ সংশ্লিষ্ট গন্তব্যে নেভিগেট করে।

নেভিগেশন ড্রয়ার যোগ করুন

নেভিগেশন ড্রয়ার হল একটি UI প্যানেল যা আপনার অ্যাপের প্রধান নেভিগেশন মেনু দেখায়। ব্যবহারকারী অ্যাপ বারে ড্রয়ার আইকন টাচ করলে অথবা স্ক্রিনের বাঁদিকের প্রান্ত থেকে আঙুল দিয়ে সোয়াইপ করলে ড্রয়ার দেখা যায়।

একটি খোলা ড্রয়ার যাতে নেভিগেশন মেনু দেখা যাচ্ছে
ছবি ৩. একটি খোলা ড্রয়ারে নেভিগেশন মেনু দেখা যাচ্ছে।

ড্রয়ার আইকন সব টপ-লেভেল ডেস্টিনেশনে দেখানো হয় যা DrawerLayout ব্যবহার করে।

নেভিগেশন ড্রয়ার যোগ করতে, প্রথমে রুট ভিউ হিসেবে DrawerLayout ঘোষণা করুন। DrawerLayout-এর মধ্যে, মূল UI কন্টেন্টের জন্য একটি লেআউট এবং নেভিগেশন ড্রয়ারের কন্টেন্ট সহ আরেকটি ভিউ যোগ করুন।

যেমন, নিম্নলিখিত লেআউট দুটি চাইল্ড ভিউ সহ DrawerLayout ব্যবহার করে: মূল কন্টেন্ট ধারণ করার জন্য একটি NavHostFragment এবং নেভিগেশন ড্রয়ারের কন্টেন্টের জন্য একটি NavigationView।

<?xml version="1.0" encoding="utf-8"?>
<!-- Use DrawerLayout as root container for activity -->
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <!-- Layout to contain contents of main body of screen (drawer will slide over this) -->
    <androidx.fragment.app.FragmentContainerView
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:id="@+id/nav_host_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />

    <!-- Container for contents of drawer - use NavigationView to make configuration easier -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true" />

</androidx.drawerlayout.widget.DrawerLayout>

এরপর, DrawerLayout-কে AppBarConfiguration-এ পাস করে আপনার নেভিগেশন গ্রাফের সাথে কানেক্ট করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

Kotlin

val appBarConfiguration = AppBarConfiguration(navController.graph, drawerLayout)

জাভা

AppBarConfiguration appBarConfiguration =
        new AppBarConfiguration.Builder(navController.getGraph())
            .setDrawerLayout(drawerLayout)
            .build();
ব্যবহার করতে হবে না

এরপর, আপনার প্রধান অ্যাক্টিভিটি ক্লাসে, আপনার প্রধান অ্যাক্টিভিটির onCreate() পদ্ধতি থেকে setupWithNavController() কল করুন, যেমন নিচে দেখানো হয়েছে:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    setContentView(R.layout.activity_main)

    ...

    val navHostFragment =
        supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
    val navController = navHostFragment.navController
    findViewById<NavigationView>(R.id.nav_view)
        .setupWithNavController(navController)
}

জাভা

@Override
protected void onCreate(Bundle savedInstanceState) {
    setContentView(R.layout.activity_main);

    ...

    NavHostFragment navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment);
    NavController navController = navHostFragment.getNavController();
    NavigationView navView = findViewById(R.id.nav_view);
    NavigationUI.setupWithNavController(navView, navController);
}

Navigation 2.4.0-alpha01-এ শুরু করে, setupWithNavController ব্যবহার করার সময় প্রতিটি মেনু আইটেমের স্ট্যাটাস সেভ ও রিস্টোর করা হয়।

নিচের দিকে নেভিগেশন

এছাড়াও, NavigationUI নিচের দিকে নেভিগেশন ম্যানেজ করতে পারে। ব্যবহারকারী কোনও মেনু আইটেম বেছে নিলে, NavController onNavDestinationSelected()-কে কল করে এবং নিচের নেভিগেশন বারে বেছে নেওয়া আইটেম অটোমেটিক আপডেট করে।

নিচের দিকে নেভিগেশন বার
ছবি ৪. নিচের দিকে নেভিগেশন বার।

আপনার অ্যাপে নিচের দিকে নেভিগেশন বার তৈরি করতে, প্রথমে আপনার প্রধান অ্যাক্টিভিটিতে বারটি সংজ্ঞায়িত করুন, যেমন নিচে দেখানো হয়েছে:

<LinearLayout>
    ...
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        ... />
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        app:menu="@menu/menu_bottom_nav" />
</LinearLayout>

এরপর, আপনার প্রধান অ্যাক্টিভিটি ক্লাসে, আপনার প্রধান অ্যাক্টিভিটির onCreate() পদ্ধতি থেকে setupWithNavController() কল করুন, যেমন নিচে দেখানো হয়েছে:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    setContentView(R.layout.activity_main)

    ...

    val navHostFragment =
        supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
    val navController = navHostFragment.navController
    findViewById<BottomNavigationView>(R.id.bottom_nav)
        .setupWithNavController(navController)
}

জাভা

@Override
protected void onCreate(Bundle savedInstanceState) {
    setContentView(R.layout.activity_main);

    ...

    NavHostFragment navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment);
    NavController navController = navHostFragment.getNavController();
    BottomNavigationView bottomNav = findViewById(R.id.bottom_nav);
    NavigationUI.setupWithNavController(bottomNav, navController);
}

Navigation 2.4.0-alpha01-এ শুরু করে, setupWithNavController ব্যবহার করার সময় প্রতিটি মেনু আইটেমের স্ট্যাটাস সেভ ও রিস্টোর করা হয়।

নেভিগেশন ইভেন্ট শুনুন

NavController-এর সাথে ইন্টার‍্যাক্ট করা হল বিভিন্ন গন্তব্যের মধ্যে নেভিগেট করার প্রাথমিক পদ্ধতি। NavController নতুন গন্তব্যের সাথে NavHost -এর কন্টেন্ট প্রতিস্থাপন করার জন্য দায়ী। অনেক ক্ষেত্রে, UI এলিমেন্ট—যেমন, উপরের অ্যাপ বার বা অন্যান্য স্থায়ী নেভিগেশন কন্ট্রোল যেমন BottomNavigationBar—NavHost-এর বাইরে থাকে এবং আপনি এক গন্তব্য থেকে অন্য গন্তব্যে নেভিগেট করার সময় এগুলি আপডেট করতে হয়।

NavController একটি OnDestinationChangedListener ইন্টারফেস অফার করে যা NavController-এর বর্তমান গন্তব্য বা এর আর্গুমেন্ট পরিবর্তন হলে কল করা হয়। addOnDestinationChangedListener() পদ্ধতির মাধ্যমে নতুন লিসেনার রেজিস্টার করা যেতে পারে। মনে রাখবেন যে addOnDestinationChangedListener() কল করার সময়, বর্তমান গন্তব্য থাকলে, সেটি অবিলম্বে আপনার লিসনারকে পাঠানো হয়।

NavigationUI, OnDestinationChangedListener ব্যবহার করে যাতে এইসব সাধারণ UI কম্পোনেন্ট নেভিগেশন-অ্যাওয়ার হয়। তবে মনে রাখবেন, আপনি যেকোনও কাস্টম UI বা নেভিগেশন ইভেন্ট সম্পর্কে সচেতন বিজনেস লজিক তৈরি করতে OnDestinationChangedListener-এর নিজস্ব ফিচারও ব্যবহার করতে পারবেন।

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

Kotlin

navController.addOnDestinationChangedListener { _, destination, _ ->
   if(destination.id == R.id.full_screen_destination) {
       toolbar.visibility = View.GONE
       bottomNavigationView.visibility = View.GONE
   } else {
       toolbar.visibility = View.VISIBLE
       bottomNavigationView.visibility = View.VISIBLE
   }
}

জাভা

navController.addOnDestinationChangedListener(new NavController.OnDestinationChangedListener() {
   @Override
   public void onDestinationChanged(@NonNull NavController controller,
           @NonNull NavDestination destination, @Nullable Bundle arguments) {
       if(destination.getId() == R.id.full_screen_destination) {
           toolbar.setVisibility(View.GONE);
           bottomNavigationView.setVisibility(View.GONE);
       } else {
           toolbar.setVisibility(View.VISIBLE);
           bottomNavigationView.setVisibility(View.VISIBLE);
       }
   }
});

আর্গুমেন্ট-ভিত্তিক লিসনার

বিকল্প হিসেবে, আপনি নেভিগেশন গ্রাফের মধ্যে ডিফল্ট ভ্যালু সহ আর্গুমেন্টও ব্যবহার করতে পারেন, যা উপযুক্ত UI কন্ট্রোলার তার স্ট্যাটাস আপডেট করার জন্য ব্যবহার করতে পারে। যেমন, আগের উদাহরণের মতো ডেস্টিনেশন আইডির উপর ভিত্তি করে OnDestinationChangedListener-এ লজিক তৈরি করার পরিবর্তে, আমরা NavGraph-এ একটি আর্গুমেন্ট তৈরি করতে পারি:

<?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"
    android:id="@+id/navigation\_graph"
    app:startDestination="@id/fragmentOne">
    <fragment
        android:id="@+id/fragmentOne"
        android:name="com.example.android.navigation.FragmentOne"
        android:label="FragmentOne">
        <action
            android:id="@+id/action\_fragmentOne\_to\_fragmentTwo"
            app:destination="@id/fragmentTwo" />
    </fragment>
    <fragment
        android:id="@+id/fragmentTwo"
        android:name="com.example.android.navigation.FragmentTwo"
        android:label="FragmentTwo">
        <argument
            android:name="ShowAppBar"
            android:defaultValue="true" />
    </fragment>
</navigation>

গন্তব্যে নেভিগেট করার সময় এই আর্গুমেন্ট ব্যবহার করা হয় না, তবে defaultValue ব্যবহার করে গন্তব্যের সাথে অতিরিক্ত তথ্য যোগ করার একটি উপায় হিসেবে এটি ব্যবহার করা হয়। এই ক্ষেত্রে, ভ্যালু থেকে বোঝা যায় যে এই গন্তব্যে থাকাকালীন অ্যাপ বার দেখানো উচিত কিনা।

আমরা এখন Activity-এ OnDestinationChangedListener যোগ করতে পারি:

Kotlin

navController.addOnDestinationChangedListener { _, _, arguments ->
    appBar.isVisible = arguments?.getBoolean("ShowAppBar", false) == true
}

জাভা

navController.addOnDestinationChangedListener(
        new NavController.OnDestinationChangedListener() {
            @Override
            public void onDestinationChanged(
                    @NonNull NavController controller,
                    @NonNull NavDestination destination,
                    @Nullable Bundle arguments
            ) {
                boolean showAppBar = false;
                if (arguments != null) {
                    showAppBar = arguments.getBoolean("ShowAppBar", false);
                }
                if(showAppBar) {
                    appBar.setVisibility(View.VISIBLE);
                } else {
                    appBar.setVisibility(View.GONE);
                }
            }
        }
);

NavController নেভিগেশন ডেস্টিনেশন পরিবর্তন হলেই এই কলব্যাককে ইনভোক করে। Activity এখন কলব্যাকে পাওয়া আর্গুমেন্টের উপর ভিত্তি করে তার মালিকানাধীন UI কম্পোনেন্টের স্ট্যাটাস বা দৃশ্যমানতা আপডেট করতে পারে।

এই পদ্ধতির একটি সুবিধা হল যে Activity শুধুমাত্র নেভিগেশন গ্রাফের আর্গুমেন্টগুলি দেখে এবং স্বতন্ত্র Fragment ভূমিকা এবং দায়িত্বগুলি জানে না। একইভাবে, স্বতন্ত্র ফ্র্যাগমেন্টগুলি ধারণকারী Activity এবং এর মালিকানাধীন UI উপাদানগুলি সম্পর্কে জানে না।

অতিরিক্ত রিসোর্স

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

নমুনা

কোডল্যাবস

ব্লগ পোস্ট

ভিডিও