如何使用同一个应用制作抽屉式导航和底部导航？

Posted 2023-04-15

技术标签:

【中文标题】如何使用同一个应用制作抽屉式导航和底部导航？【英文标题】：How to make navigation drawer and bottom navigation with the same app? 【发布时间】：2019-05-25 06:02:15 【问题描述】：

我正在尝试在我的应用程序中使用导航抽屉和底栏导航。因此我首先创建了导航活动。然后我尝试将底栏导航添加到同一活动中。我想开发这样的应用：

Activity.xml 中没有BottomNavigationView，应用程序正在运行。但是当我在Activity.xml 中添加BottomNavigationView 时，应用程序崩溃了。logcat 中没有显示任何内容。如何在同一个活动中同时使用底栏导航和导航抽屉，请给我一个简单的例子？谢谢

【问题讨论】：

分享你的抽屉布局 【参考方案1】：

我正在使用导航架构组件以下版本：

def nav_version = "2.0.0"
implementation "androidx.navigation:navigation-fragment:$nav_version"
implementation "androidx.navigation:navigation-ui:$nav_version"

下面是使用BottomNavigation和Navigation Drawer的简单代码

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener 

    private static final String TAG = "debinf MainActivity";

    //public static final String FRAGMENT_KEY = "fragment";

    private BottomNavigationView bottomNavigationView;
    private NavigationView navigationView;
    private DrawerLayout drawerLayout;
    private NavController navController;

    private AppBarConfiguration appBarConfiguration;

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

        Log.i(TAG, "onCreate: ");

        bottomNavigationView = (BottomNavigationView) findViewById(R.id.main_bottomnav);
        navigationView = (NavigationView) findViewById(R.id.main_sidebar);
        drawerLayout = (DrawerLayout) findViewById(R.id.main_drawer);

        setupNavigation();

    

    private void setupNavigation() 
        Log.i(TAG, "setupNavigation: ");
        navController = Navigation.findNavController(this, R.id.main_fragment);

        appBarConfiguration =
                new AppBarConfiguration.Builder(navController.getGraph()) //Pass the ids of fragments from nav_graph which you dont want to show back button in toolbar
                        .setDrawerLayout(drawerLayout)
                        .build();

        NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration); //Setup toolbar with back button and drawer icon according to appBarConfiguration
        NavigationUI.setupWithNavController(navigationView, navController);
        NavigationUI.setupWithNavController(bottomNavigationView, navController);
        /*
        ** Listener for bottomNavigation must be called after been setupWithNavController
        ** This command will override NavigationUI.setupWithNavController(bottomNavigationView, navController)
        ** and the automatic transaction between fragments is lost
        * */
        //bottomNavigationView.setOnNavigationItemSelectedListener(this);
        navigationView.setNavigationItemSelectedListener(this);

    


    @Override
    public void onBackPressed() 
        Log.i(TAG, "onBackPressed: ");
        if (drawerLayout.isDrawerOpen(GravityCompat.START)) 
            Log.i(TAG, "onBackPressed: DRAWER IS OPEN -  CLOSING IT");
            drawerLayout.closeDrawer(GravityCompat.START);
         else 
            super.onBackPressed();
        

    

    @Override
    public boolean onSupportNavigateUp() 
        Log.i(TAG, "onSupportNavigateUp: ");
        // replace navigation up button with nav drawer button when on start destination
        return NavigationUI.navigateUp(navController, appBarConfiguration) || super.onSupportNavigateUp();
    


    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) 
        Log.i(TAG, "onNavigationItemSelected: SIDE BAR");
        if (drawerLayout.isDrawerOpen(GravityCompat.START)) 
            drawerLayout.closeDrawer(GravityCompat.START);
        

        // https://***.com/questions/55990820/how-to-use-navigation-drawer-and-bottom-navigation-simultaneously-navigation-a
        // https://***.com/questions/58345696/how-to-use-android-navigation-component-bottomnavigationview-navigationview
        // https://***.com/questions/55667686/how-to-coordinate-a-navigation-drawer-with-a-buttom-navigation-view
        // https://ux.stackexchange.com/questions/125627/is-it-okay-to-use-both-nav-drawer-and-bottom-nav-in-home-screen-of-an-android-ap?newreg=da5d1cea03db496982a00b256647728d
        if (menuItem.getItemId() == R.id.main_menusidehome) 
            Intent intent = new Intent(MainActivity.this, NotificationActivity.class);
            startActivity(intent);
            Log.i(TAG, "onNavigationItemSelected: conta");
        
        if (menuItem.getItemId() == R.id.main_menusideshop) 
            Log.i(TAG, "onNavigationItemSelected: compra");
        
        if (menuItem.getItemId() == R.id.main_menusidesearch) 
            Log.i(TAG, "onNavigationItemSelected: estatistica");
        

        return true;

下面是acitivity_main.xml：

<androidx.drawerlayout.widget.DrawerLayout
    android:id="@+id/main_drawer"
    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:layout_
    android:layout_
    tools:context=".MainActivity">


    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_
        android:layout_>

        <fragment
            android:id="@+id/main_fragment"
            android:layout_
            android:layout_
            android:name="androidx.navigation.fragment.NavHostFragment"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@id/main_bottomnav"
            app:defaultNavHost="true"
            app:navGraph="@navigation/mainnav_graph"/>

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/main_bottomnav"
            android:layout_
            android:layout_
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:menu="@menu/main_navmenu"
            android:background="@color/colorAccent"
            app:itemIconTint="@drawable/botton_item_color"
            app:itemTextColor="@drawable/botton_item_color">

        </com.google.android.material.bottomnavigation.BottomNavigationView>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/main_sidebar"
        android:layout_
        android:layout_
        android:layout_gravity="start"
        app:menu="@menu/main_sidebarmenu"/>

</androidx.drawerlayout.widget.DrawerLayout>

希望对你有帮助！

【讨论】：

【参考方案2】：

将父级添加到<include ..../>，然后添加BottomNavigationView

<RelativeLayout
    android:layout_
    android:layout_
    android:orientation="vertical"
    >
     <include
        layout="@layout/app_bar_main"
        android:layout_
        android:layout_ />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_
        android:layout_
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimary"
        app:itemTextColor="@color/colorAccent"
        app:menu="@menu/bottom_navigation_menu"/>

</RelativeLayout>

【讨论】：

任何人都可以顺利运行这个项目，因为我在运行它时收到错误“发生意外错误”。注意：重建此项目链接时没有发现错误：github.com/CopyAndPasteHub/Android/tree/master/Templates/…【参考方案3】：

使用 TabLayout 代替底部导航 TabLayout 更好更简单

创建根.xml

 <?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:id="@+id/drawerlayout"
    android:layout_>
    <include layout="@layout/activity_main"/>
    <include layout="@layout/navi_drawer"/>    
</android.support.v4.widget.DrawerLayout>

创建导航抽屉

   <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_
        android:layout_
        android:layout_gravity="right"
        android:background="?attr/navigationBackground"
        android:orientation="vertical">
    </LinearLayout>

和activity_main.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_
    android:background="?attr/backgroundActivity"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_
        android:layout_
        android:layout_weight="1"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v4.view.ViewPager>


    <LinearLayout
        android:id="@+id/lnrTab"
        android:layout_
        android:layout_
        android:layoutDirection="rtl"
        android:orientation="vertical"
        app:layout_anchor="@+id/viewpager"
        app:layout_anchorGravity="bottom|center">

        <View
            android:layout_
            android:layout_
            android:background="@color/dividers_color_dark"
            app:layout_anchor="@+id/viewpager"
            app:layout_anchorGravity="bottom|center" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_
            android:layout_
            android:clipToPadding="false"
            app:tabBackground="?attr/backgroundTab"
            app:tabContentStart="9dp"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="1dp"
            app:tabMode="scrollable" />
    </LinearLayout>


</LinearLayout>

然后是 MainActivity

     @Override
        protected void onCreate(Bundle savedInstanceState) 
            super.onCreate(savedInstanceState);
            setContentView(R.layout.root);

            //config your TabLayout

【讨论】：

【参考方案4】：

如果您使用包含。只需 wrap 应用栏在某些布局中包含底部导航。例如，我大部分时间都在使用 ConstraintLayout。

content_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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:layout_
    android:layout_
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/app_bar_main">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager_main"
        android:layout_
        android:layout_ />

</androidx.constraintlayout.widget.ConstraintLayout>

app_bar_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout         
    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:layout_
    android:layout_>

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar_layout_main"
        android:layout_
        android:layout_
        android:background="@drawable/gradient_main"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/material_toolbar"
            android:layout_
            android:layout_
            app:titleTextColor="@color/white" />

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

    <include
        android:id="@+id/content_main_include"
        layout="@layout/content_main" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

activity_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 
    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:layout_
    android:layout_
    tools:context="com.android.tool.ui.activty.main.MainActivity"
    tools:openDrawer="start">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_
        android:layout_>

        <include
            android:id="@+id/app_bar_include"
            layout="@layout/app_bar_main"
            android:layout_
            android:layout_ />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_
            android:layout_
            app:layout_constraintBottom_toBottomOf="parent"
            app:menu="@menu/menu_main" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_
        android:layout_
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header_example"
        app:menu="@menu/activity_main_drawer" />

</androidx.drawerlayout.widget.DrawerLayout>

就是这样。

【讨论】：

以上是关于如何使用同一个应用制作抽屉式导航和底部导航？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用标题 Scroll 使 android 导航抽屉可滚动

如何使用导航抽屉和viewpager/viewpager2在java中制作android应用程序

如何使导航抽屉应用程序的标题居中？

如何在底部导航片段（或导航抽屉）之间传递数据？

如何在颤动的底部导航栏中添加抽屉？

如何向现有应用程序添加导航抽屉？