BottomNavigationView的实现以及一些问题

安卓的底部导航栏组件BottomNavigationView：代码实现以及实现过程中的一些坑。

1.最外层使用drwaerable作为根布局。

2.使用relativelayout作为界面布局（包含一个viewpager，bottomnavigationview）

3.bottomnavigationview的内容menu菜单

4.菜单item的图标样式selector文件，实现点击切换

5.导航点击事件的实现

1.xml布局
 

1.为什么使用drawerlayout作为根布局？

        因为如果使用传统的relativelayout或者linearlayoout会出现bottomnavigation对虚拟按键自动留白的情况，会高出一截空白区域。

2.使用drawerlayout作为根布局不会对导航栏和虚拟按键预留高度，视图会被遮挡，怎么解决？

        使用relativelayout包裹界面布局，并设置属性：fitsSystemWindows="true"，此时relativelayout会自动适应布局

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity3">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">


        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewpager2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/bottomMenu">

        </androidx.viewpager2.widget.ViewPager2>


        
        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomMenu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/design_default_color_error"
            android:layout_alignParentBottom="true"
            app:itemBackground="@color/WhiteSmoke"
            app:itemIconTint="@color/red"
            app:itemTextColor="@color/black"
            app:menu="@menu/bottommenu">

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

    </RelativeLayout>


    
</androidx.drawerlayout.widget.DrawerLayout>

2.menu菜单

bottomnavigationview的菜单项内容，在res目录下建menu目录。

icon使用selector布局文件，在选中时可以自动切换图标样式

1.showAsAction是菜单显示的原始样式，在这里会被xml文件引用，这个属性的设置不会产生影响，可以随便写（菜单文件的预设和实际组件效果不同）

<?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/message_menu"
        android:icon="@drawable/message_selector"
        android:title="message"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/person_menu"
        android:icon="@drawable/person_selector"
        android:title="person"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/person_menu2"
        android:icon="@drawable/person_selector"
        android:title="person"
        app:showAsAction="ifRoom"/>

</menu>

3.selector文件

selector图标样式的其中一个，复制后改drawable图标引用路径，然后在上面的代码中设置icon引用的selector文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/baseline_sms_24" android:state_checked="false" />
    <item android:drawable="@drawable/baseline_message_24" android:state_checked="true" />
</selector>

4.activity初始化以及点击实现

 viewPager2=findViewById(R.id.viewpager2);
        bottomMenu=findViewById(R.id.bottomMenu);

        ArrayList<Fragment> fragments = new ArrayList<>();
        fragments.add(new BlankFragment1());
        fragments.add(new BlankFragment2());
        viewPager2.setAdapter(new ViewpagerAdapter(this,fragments));


        bottomMenu.setOnNavigationItemSelectedListener(item -> {

            if (item.getItemId()==R.id.message_menu){
                viewPager2.setCurrentItem(0);
            }else if (item.getItemId()==R.id.person_menu) {
                viewPager2.setCurrentItem(1);
            }else if (item.getItemId()==R.id.person_menu2) {
                viewPager2.setCurrentItem(1);
            }

            return true;
        });