Android 设置 bottomnavigation 底部导航栏的样式

学习笔记

1. 设置 BottomNavigationView 样式

你可以通过定义一个自定义的样式来调整 BottomNavigationView 的外观。可以在 res/values/styles.xml 文件中创建样式，或者直接使用默认样式并进行修改。

例子：设置 BottomNavigationView 的背景色和图标颜色

首先，确保你有一个 styles.xml 文件，然后创建一个新的样式文件来定制 BottomNavigationView。

<resources>
    <!-- 自定义 BottomNavigationView 样式 -->
    <style name="CustomBottomNavStyle" parent="Widget.MaterialComponents.BottomNavigationView">
        <!-- 设置背景色 -->
        <item name="android:background">@color/bottom_nav_background</item>
        
        <!-- 设置选中项的颜色 -->
        <item name="itemIconTint">@color/bottom_nav_item_icon</item>
        <item name="itemTextColor">@color/bottom_nav_item_text</item>

        <!-- 设置选中项的高亮色 -->
        <item name="itemActiveIndicatorStyle">@style/BottomNavActiveIndicator</item>
    </style>

    <!-- 选中项的颜色（例如，蓝色） -->
    <color name="bottom_nav_item_icon">#2196F3</color>
    <color name="bottom_nav_item_text">#2196F3</color>
    <color name="bottom_nav_background">#ffffff</color>
</resources>

然后，在你的布局文件 activity_main.xml 中使用这个样式：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomnavigation_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom"
    style="@style/CustomBottomNavStyle" />

2. 设置 BottomNavigationView 的显示方式

• 固定 (Fixed)：当 BottomNavigationView 需要显示所有菜单项时，可以将 android:menu 属性设置为你的菜单文件，然后直接显示菜单项。

  <com.google.android.material.bottomnavigation.BottomNavigationView
      android:id="@+id/bottomnavigation_main"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:menu="@menu/bottom" />
  

• 滚动模式 (Shifted)：如果菜单项太多时，可以启用滚动模式。滚动模式允许显示的项目根据容器的宽度变化。这通常是默认的行为，不需要做特别的设置。

3. 设置 BottomNavigationView 的 item 动画（例如，添加高亮效果）

可以通过 itemIconTint 和 itemTextColor 属性来自定义未选中和选中状态下图标和文本的颜色。

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomnavigation_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom"
    app:itemIconTint="@drawable/nav_item_icon_tint"
    app:itemTextColor="@drawable/nav_item_text_color"
    app:itemRippleColor="@android:color/transparent" />

在 res/drawable/ 文件夹下，可以创建一个 nav_item_icon_tint.xml 来指定颜色选择器。

<!-- res/drawable/nav_item_icon_tint.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorPrimary" android:state_checked="true"/>
    <item android:color="@android:color/darker_gray"/>
</selector>

4. 设置 BottomNavigationView 的布局行为

你还可以通过 ViewPager2 和 BottomNavigationView 来协调视图。通过监听 BottomNavigationView 的选择事件，切换 ViewPager2 的页面。

BottomNavigationView bottomNavigationView = findViewById(R.id.bottomnavigation_main);
ViewPager2 viewPager2 = findViewById(R.id.viewpager2_main);

// 设置 ViewPager2 的适配器
viewPager2.setAdapter(new YourPagerAdapter());

bottomNavigationView.setOnNavigationItemSelectedListener(item -> {
    switch (item.getItemId()) {
        case R.id.menu_home:
            viewPager2.setCurrentItem(0);
            return true;
        case R.id.menu_search:
            viewPager2.setCurrentItem(1);
            return true;
        case R.id.menu_profile:
            viewPager2.setCurrentItem(2);
            return true;
        default:
            return false;
    }
});

总结

1. 样式自定义：通过 styles.xml 文件自定义 BottomNavigationView 的外观，包括背景色、图标颜色、选中文本颜色等。
2. 显示方式：可以使用固定（显示所有菜单项）或滚动模式来显示 BottomNavigationView 的菜单项。
3. 与 ViewPager2 结合：通过 OnNavigationItemSelectedListener 来监听菜单项选择，并在 ViewPager2 中切换页面。