Android 使用BottomNavigationView和Novigation组件实现底部导航功能

在单activity多frament布局中，因为RadioGroup加FragmentManager比较灵活，以前我都是使用RadioGroup加FragmentManager实现底部导航栏，最近发现BottomNavigationView和Novigation实现底部导航栏的效果也不错，尤其是这样的写法很简便，就记录一下

话不多说直接上代码

1.activity_main布局

NavHostFragment 要导包哈，应该有提示可以自动导包，没有自己去找好了

app:defaultNavHost="true" 这是拦截系统返回键的

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="all">

    <fragment
        android:id="@+id/fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/mobile_navigation"  />

    <View
        android:layout_width="wrap_content"
        android:layout_height="1dp"
        android:background="@color/gary" /> 

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemBackground="@color/white"
        app:itemIconTint="@drawable/main_bottom_navigation"
        app:itemTextColor="@drawable/main_bottom_navigation"
        app:menu="@menu/menu_navigation" /> 

</LinearLayout>

2.mobile_navigation布局

这里需要注意的是，这里的id要和menu里的id对应

<?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/main_nav"
    app:startDestination="@id/home_page">

    <fragment
        android:id="@+id/home_page"
        android:name="com.sxs.notes.fragment.FragmentHomePage"
        android:label="首页"
        tools:layout="@layout/fragment_home_page" />
    <fragment
        android:id="@+id/calendar"
        android:name="com.sxs.notes.fragment.FragmentCalendar"
        android:label="日历"
        tools:layout="@layout/fragment_calendar" />

    <fragment
        android:id="@+id/grouping"
        android:name="com.sxs.notes.fragment.FragmentGrouping"
        android:label="分组"
        tools:layout="@layout/fragment_grouping" />

    <fragment

        android:id="@+id/personal"
        android:name="com.sxs.notes.fragment.FragmentPersonal"
        android:label="个人中心"
        tools:layout="@layout/fragment_personal" />

</navigation>

3.main_bottom_navigation 

这里我直接用的纯黑，想要什么颜色自己设置就行了

app:itemBackground="@color/white"  背景色
app:itemIconTint="@drawable/main_bottom_navigation" 图标颜色
app:itemTextColor="@drawable/main_bottom_navigation" 文字颜色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#000000" android:state_checked="true" />
    <item android:color="#000000" android:state_checked="false" />
</selector>

4.menu_navigation

看到了吧，要和mobile_navigation里的id对应，要不你点击没效果

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/home_page"
        android:checked="true"
        android:icon="@drawable/bg_home_page"
        android:title="" />
    <item
        android:id="@+id/calendar"
        android:icon="@drawable/bg_calendar"
        android:title="" />
    <item
        android:id="@+id/grouping"
        android:icon="@drawable/bg_grouping"
        android:title="" />
    <item
        android:id="@+id/personal"
        android:icon="@drawable/bg_personal"
        android:title="" />
</menu>

5.MainActivity代码

只需要三句话，这可比RadioGroup简单多了

public class MainActivity extends AppCompatActivity {

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

        //实例化BottomNavigationView
        BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_nav);
        //获取NavController实例
        //NavController:负责操作Navigation框架下的Fragment的跳转与退出、动画、监听当前Fragment信息
        //这个R.id.fragment8就是Activity布局里fragment控件的id
        NavController controller = Navigation.findNavController(this, R.id.fragment);
        //在选择菜单时调用，当目的地更改时，BottomNavigationView中的选定项将自动更新
        NavigationUI.setupWithNavController(bottomNavigationView, controller);

    }
}