नेविगेशन यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करके NavController से यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट कनेक्ट करना

नेविगेशन कॉम्पोनेंट में एक NavigationUI शामिल होता है क्लास. इस क्लास में ऐसे स्टैटिक तरीके हैं जो सबसे ऊपर वाले नेविगेशन को मैनेज करते हैं ऐप्लिकेशन बार, नेविगेशन पैनल, और बॉटम नेविगेशन.

सबसे ऊपर मौजूद ऐप्लिकेशन बार

सबसे ऊपर मौजूद ऐप्लिकेशन बार जानकारी दिखाने के लिए, आपके ऐप्लिकेशन के सबसे ऊपर एक ही जगह दिखती हो और कार्रवाइयां.

स्क्रीन पर सबसे ऊपर मौजूद ऐप्लिकेशन बार दिख रहा है
पहली इमेज. स्क्रीन पर सबसे ऊपर मौजूद ऐप्लिकेशन बार दिख रहा है.

NavigationUI में ऐसे तरीके मौजूद हैं जिनसे आपके सबसे ऊपर मौजूद वीडियो का कॉन्टेंट अपने-आप अपडेट हो जाता है के ज़रिए, उपयोगकर्ता आपके ऐप्लिकेशन को नेविगेट करेंगे. उदाहरण के लिए, NavigationUI टॉप ऐप्लिकेशन का टाइटल रखने के लिए, नेविगेशन ग्राफ़ पर मौजूद डेस्टिनेशन लेबल बार को अप-टू-डेट रखें.

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

जब ऊपर बताए गए ऐप्लिकेशन बार को लागू करने के तरीके के साथ NavigationUI का इस्तेमाल किया जा रहा हो, तो: जो लेबल आप डेस्टिनेशन के साथ जोड़ते हैं वह {argName} के फ़ॉर्मैट का इस्तेमाल करके डेस्टिनेशन को दिए गए आर्ग्युमेंट लेबल.

NavigationUI, इन मुख्य ऐप्लिकेशन बार टाइप के साथ काम करता है:

ऐप्लिकेशन बार के बारे में ज़्यादा जानकारी के लिए, ऐप्लिकेशन बार सेट अप करना लेख पढ़ें.

ऐप्लिकेशन बार कॉन्फ़िगरेशन

NavigationUI, AppBarConfiguration का इस्तेमाल करता है ऑब्जेक्ट का पता लगाने के लिए, ऊपर बाएं कोने में मौजूद नेविगेशन बटन के काम करने का तरीका मैनेज करें. डिसप्ले एरिया का साइज़ नेविगेशन बटन अलग-अलग तरह से काम करता है. उपयोगकर्ता टॉप-लेवल डेस्टिनेशन पर है या नहीं.

टॉप-लेवल डेस्टिनेशन, रूट या सबसे ऊपर के लेवल का डेस्टिनेशन होता है. यह डेस्टिनेशन हैरारकी के हिसाब से मिलते-जुलते डेस्टिनेशन. शीर्ष-स्तरीय गंतव्य ऐप्लिकेशन बार में सबसे ऊपर मौजूद 'अप ऐरो' बटन, क्योंकि ऊपर के लेवल का कोई डेस्टिनेशन मौजूद नहीं है. इन्होंने बदलाव किया है डिफ़ॉल्ट के तौर पर, आपके ऐप्लिकेशन का शुरुआती डेस्टिनेशन ही वह टॉप-लेवल डेस्टिनेशन है.

जब उपयोगकर्ता किसी टॉप-लेवल डेस्टिनेशन पर होता है, तो नेविगेशन बटन ड्रॉर का आइकॉन अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है अगर डेस्टिनेशन में DrawerLayout का इस्तेमाल किया जाता है. अगर गंतव्य DrawerLayout, नेविगेशन बटन छिपा हुआ है. जब उपयोगकर्ता किसी अन्य गंतव्य पर होता है, तो नेविगेशन बटन एक अप बटन के रूप में दिखाई देता है . नेविगेशन बटन को कॉन्फ़िगर करने के लिए टॉप-लेवल डेस्टिनेशन पर जाने के लिए, AppBarConfiguration ऑब्जेक्ट बनाएं और संबंधित नेविगेशन ग्राफ़ में पास करें, जैसा कि नीचे दिखाया गया है:

Kotlin

val appBarConfiguration = AppBarConfiguration(navController.graph)

Java

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

कुछ मामलों में, आपको इसके बजाय कई टॉप लेवल डेस्टिनेशन तय करने पड़ सकते हैं डिफ़ॉल्ट गंतव्य गंतव्य का उपयोग कर रहा है. BottomNavigationView का इस्तेमाल करने पर इसके लिए सामान्य उपयोग का उदाहरण, जहां आपके पास ऐसी सिबलिंग स्क्रीन हो सकती हैं जो वे एक-दूसरे से जुड़ी अलग-अलग तरह की हो सकती हैं गंतव्य. इस तरह के मामलों में, इसके बजाय आप डेस्टिनेशन का एक सेट पास कर सकते हैं कंस्ट्रक्टर के आईडी, जैसा कि नीचे दिखाया गया है:

Kotlin

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

Java

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>

इसके बाद, setupWithNavController() पर कॉल करें मुख्य गतिविधि के onCreate() तरीके से, जैसा कि यहां दिखाया गया है उदाहरण:

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)
}

Java

@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 में. इससे उपयोगकर्ता पिछले पेज पर वापस जा सकता है पैरंट गतिविधि में बदल सकते हैं, जब पेज के पीछे की ओर कोई और डेस्टिनेशन न हो स्टैक. Google Analytics 4 पर माइग्रेट करने के लिए, 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)
}

Java

@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);
}

ColcapsingToolbarLayout शामिल करें

अपने टूलबार में 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>

इसके बाद, setupWithNavController() पर कॉल करें मुख्य गतिविधि के onCreate तरीके से, जैसा कि यहां दिखाया गया है:

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)
}

Java

@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);
}

कार्रवाई बार

डिफ़ॉल्ट कार्रवाई बार में नेविगेशन सहायता जोड़ने के लिए, कॉल करें setupActionBarWithNavController() मुख्य गतिविधि वाले onCreate() तरीके से. ध्यान दें कि आपको 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)
}

Java

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()
}

Java

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

ऐप्लिकेशन बार के अलग-अलग वर्शन के साथ काम करता है

अपनी गतिविधि में ऐप्लिकेशन बार को जोड़ने के लिए, ऐप्लिकेशन बार का लेआउट तब बेहतर तरीके से काम करता है, जब ऐप्लिकेशन बार का लेआउट आपके ऐप्लिकेशन में हर डेस्टिनेशन के लिए एक जैसी है. हालांकि, अगर आपका सबसे ऊपर वाला ऐप्लिकेशन बार बदल जाता है काफ़ी हद तक अलग-अलग डेस्टिनेशन पर काम करता है. इसके बाद, यहां से टॉप ऐप्लिकेशन बार को हटाया जा सकता है परिभाषित करने की ज़रूरत नहीं है.

उदाहरण के लिए, आपका कोई डेस्टिनेशन, स्टैंडर्ड Toolbar का इस्तेमाल कर सकता है, जबकि कोई अन्य ऐप्लिकेशन 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>

इन दोनों फ़्रैगमेंट के लिए, नेविगेशन कॉन्फ़िगरेशन का लॉजिक एक जैसा होता है, लेकिन आपको कॉल setupWithNavController() हर फ़्रैगमेंट के onViewCreated() मेथड से गतिविधि से उन्हें हटाएं:

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)
}

Java

@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, डेस्टिनेशन को मेन्यू-ड्रिवन यूज़र इंटरफ़ेस (यूआई) से जोड़ने के लिए हेल्पर भी उपलब्ध कराता है कॉम्पोनेंट. NavigationUI में एक हेल्पर तरीका है, onNavDestinationSelected(), जो MenuItem को NavController संबंधित गंतव्य. अगर MenuItem का id, इसके id से मेल खाता है तो NavController उस गंतव्य पर नेविगेट कर सकता है.

उदाहरण के लिए, नीचे दिए गए एक्सएमएल स्निपेट, मेन्यू आइटम और डेस्टिनेशन के साथ एक सामान्य 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() के ज़रिए जोड़ा गया था, उदाहरण के लिए, आप गतिविधि की स्थिति को ओवरराइड करके onNavDestinationSelected() को कॉल करने के लिए onOptionsItemSelected(), जैसा कि इसमें दिखाया गया है नीचे दिया गया उदाहरण:

Kotlin

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

Java

@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 से संबंधित डेस्टिनेशन पर ले जाता है.

नेविगेशन पैनल जोड़ें

नेविगेशन पैनल एक यूज़र इंटरफ़ेस (यूआई) पैनल होता है, जो आपके ऐप्लिकेशन का मुख्य नेविगेशन मेन्यू दिखाता है. जब उपयोगकर्ता ड्रॉर आइकॉन को छूता है, तब यह पैनल दिखता है अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है या जब उपयोगकर्ता स्क्रीन के बाएं किनारे से एक उंगली स्वाइप करता है स्क्रीन.

एक खुला पैनल, जिसमें नेविगेशन मेन्यू दिख रहा है
तीसरी इमेज. एक खुला पैनल, जिसमें नेविगेशन दिख रहा है मेन्यू चुनें.

ड्रॉर आइकॉन सभी पर दिखता है DrawerLayout का इस्तेमाल करने वाले टॉप लेवल डेस्टिनेशन.

नेविगेशन पैनल जोड़ने के लिए, पहले रूट के रूप में DrawerLayout व्यू. DrawerLayout के अंदर, मुख्य यूज़र इंटरफ़ेस (यूआई) कॉन्टेंट के लिए एक लेआउट जोड़ें और नेविगेशन पैनल के कॉन्टेंट वाला कोई दूसरा व्यू.

उदाहरण के लिए, नीचे दिया गया लेआउट दो चाइल्ड व्यू वाले DrawerLayout का इस्तेमाल करता है: a 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)

Java

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

इसके बाद, गतिविधि की मुख्य क्लास में, setupWithNavController() मुख्य गतिविधि के onCreate() तरीके से, जैसा कि यहां दिखाया गया है:

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)
}

Java

@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);
}

इतने समय में शुरू होगा नेविगेशन 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>

इसके बाद, गतिविधि की मुख्य क्लास में, setupWithNavController() मुख्य गतिविधि के onCreate() तरीके से, जैसा कि यहां दिखाया गया है:

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)
}

Java

@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);
}

इतने समय में शुरू होगा नेविगेशन 2.4.0-alpha01, जब भी किसी मेन्यू आइटम का इस्तेमाल किया जाता है, तो हर मेन्यू आइटम की स्थिति सेव और वापस लाई जाती है setupWithNavController.

बॉटम नेविगेशन के बारे में ज़्यादा जानने के लिए, Android आर्किटेक्चर कॉम्पोनेंट बेहतर नेविगेशन का सैंपल GitHub पर.

नेविगेशन इवेंट सुनें

NavController के साथ इंटरैक्ट करना एक डेस्टिनेशन से दूसरे डेस्टिनेशन पर जाने के लिए मुख्य तरीका है. NavController NavHost की सामग्री को बदलने के लिए ज़िम्मेदार है पर जाएं. कई मामलों में, यूज़र इंटरफ़ेस (यूआई) एलिमेंट—जैसे कि सबसे ऊपर मौजूद ऐप्लिकेशन बार या BottomNavigationBar जैसे स्थायी नेविगेशन कंट्रोल—बाहर रहते हैं NavHost के बारे में जानकारी देनी होगी. साथ ही, एक डेस्टिनेशन से दूसरे पर जाने पर आपको इसे अपडेट करना होगा.

NavController ऐसा OnDestinationChangedListener इंटरफ़ेस उपलब्ध कराता है जो NavController का मौजूदा डेस्टिनेशन होने पर कॉल किया गया या इसके तर्क बदल जाते हैं. नए लिसनर को addOnDestinationChangedListener() तरीका. ध्यान दें कि addOnDestinationChangedListener() पर कॉल करते समय, अगर अगर आपका मौजूदा डेस्टिनेशन मौजूद है, तो यह तुरंत आपके लिसनर को भेज दिया जाता है.

NavigationUI इन सामान्य यूज़र इंटरफ़ेस (यूआई) को बनाने के लिए OnDestinationChangedListener का इस्तेमाल करता है कॉम्पोनेंट नेविगेशन-अवेयर. ध्यान दें, हालांकि, आपके पास OnDestinationChangedListener का अपने-आप इस्तेमाल किया जा सकता है, ताकि ज़रूरत के मुताबिक यूज़र इंटरफ़ेस (यूआई) या कारोबार बनाया जा सके लॉजिक को नेविगेशन इवेंट के बारे में पता है.

उदाहरण के लिए, आपके पास ऐसे यूज़र इंटरफ़ेस (यूआई) एलिमेंट हो सकते हैं जिन्हें आपको दिखाना है आपके ऐप्लिकेशन की कुछ जगहें और दूसरी चीज़ें छिपाकर. अपने हिसाब से इस्तेमाल किया जा रहा है OnDestinationChangedListener, आपके पास इन यूज़र इंटरफ़ेस (यूआई) को चुनिंदा तरीके से दिखाने या छिपाने का विकल्प है एलिमेंट, जो टारगेट डेस्टिनेशन पर आधारित हों, जैसा कि इस उदाहरण में दिखाया गया है:

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
   }
}

Java

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);
       }
   }
});

आर्ग्युमेंट पर आधारित लिसनर

विकल्प के तौर पर, आप नेविगेशन ग्राफ़, जिसका इस्तेमाल सही यूज़र इंटरफ़ेस (यूआई) कंट्रोलर के ज़रिए किया जा सकता है इसकी स्थिति अपडेट करें. उदाहरण के लिए, डेस्टिनेशन आईडी पर पिछले 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
}

Java

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 अब यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट की स्थिति या 'किसको दिखे' सेटिंग को अपडेट कर सकता है यह कॉलबैक में मिले आर्ग्युमेंट के आधार पर होता है.

इस तरीके का एक फ़ायदा यह है कि Activity को सिर्फ़ नेविगेशन ग्राफ़ में मौजूद आर्ग्युमेंट और अलग-अलग Fragment की जानकारी नहीं है भूमिकाएं और ज़िम्मेदारियां. इसी तरह, अलग-अलग फ़्रैगमेंट को इसके बारे में नहीं पता होता Activity वाले एट्रिब्यूट और इसके मालिकाना हक वाले यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट के बारे में जानकारी.

अन्य संसाधन

नेविगेशन के बारे में ज़्यादा जानने के लिए, नीचे दिए गए अतिरिक्त संसाधन देखें.

सैंपल

कोड लैब

ब्लॉग पोस्ट

वीडियो