Navigation学习【三】——BottomNavigationView的简单使用

借助Android Studio新建项目时的Bottom Navigation Activity模板以及官方文档实现BottomNavigationView的简单使用。

简单使用

首先引入Navigation:

dependencies {
     ...
     
     //navigation
     implementation 'androidx.navigation:navigation-fragment:2.2.0'
     implementation 'androidx.navigation:navigation-ui:2.2.0'
 }

创建对应的navigation文件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/homeFragment">

   <fragment
       android:id="@+id/navigation_home"
       android:name="com.example.bottomnavigationtest.ui.HomeFragment"
       android:label="HomeFragment"
       tools:layout="@layout/fragment_test" />
    
   <fragment
       android:id="@+id/navigation_dashboard"
       android:name="com.example.bottomnavigationtest.ui.DashboardFragment"
       android:label="DashboardFragment" />
    
   <fragment
       android:id="@+id/navigation_notifications"
       android:name="com.example.bottomnavigationtest.ui.NotificationFragment"
       android:label="NotificationFragment" />
</navigation>

创建底部导航栏按钮文件bottom_nav_menu.xml，注意这里的id要与 nav_graph.xml中对应的fragment一致。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="Home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="Dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="Notifications" />

</menu>

创建相应MainActivity布局 activity_main.xml

 <?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_width="match_parent"
     android:layout_height="match_parent"
     tools:context=".MainActivity">
 
     <!-- app:navGraph="@navigation/nav_graph" 关联navigation导航 -->
     <fragment
         android:id="@+id/nav_host_fragment"
         android:name="androidx.navigation.fragment.NavHostFragment"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         app:defaultNavHost="true"
         app:layout_constraintBottom_toTopOf="@id/nav_view"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toRightOf="parent"
         app:layout_constraintTop_toTopOf="parent"
         app:navGraph="@navigation/nav_graph" />
 
    <!-- app:menu="@menu/bottom_nav_menu" 关联底部导航item -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />
 
 </androidx.constraintlayout.widget.ConstraintLayout>

将Navigayion与NavController相关联

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //BottomNavigationView
        BottomNavigationView navigationView = findViewById(R.id.nav_view);
        //构建导航id  menu 与 navigation中的id要相对应
        AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
                R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications)
                .build();
        final NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        //设置ActionBar标题与当前所显示的fragment相对应
        NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
        //与navcontroller相关联
        NavigationUI.setupWithNavController(navigationView, navController);

        //设置BottomNavigationView点击事件
        navigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                //跳转相应fragment
                navController.navigate(menuItem.getItemId());
                //返回false会有一个点击悬浮效果，返回true则不会有该效果
                return false;
            }
        });
    }
}

Navigation学习【三】——BottomNavigationView的简单使用

简单使用

参考文章