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.BottomNavigationViewandroid: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.BottomNavigationViewandroid: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.BottomNavigationViewandroid: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 中切换页面。