简介
BottomNavigationView 是一个常见的导航栏控件，在 Android Material Design 中经常被使用。虽然默认样式就已经很好看了，但在实际项目中我们经常需要对其进行个性化的定制。因此，本文将向大家介绍如何修改 BottomNavigationView 的样式，包括颜色、图标、字体等。
修改颜色
在 Android Material Design 中，颜色是其中一个最基础的元素。BottomNavigationView 同样支持在 XML 文件中直接定义颜色并进行应用。
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation_view"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="bottom"
app:itemIconTint="@color/bottom_nav_color"
app:itemTextColor="@color/bottom_nav_color"
app:menu="@menu/menu_bottom_navigation" />在上面的代码中，我们使用了 app:itemIconTint 和 app:itemTextColor 来分别修改 BottomNavigationView 的图标和文字颜色。
具体的颜色定义在 bottom_nav_color.xml 文件中：
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#1E1E1E" android:state_checked="true" />
<item android:color="#9E9E9E" />
</selector>在其中，定义了两个状态：选中和未选中。如果 BottomNavigationView 中某个条目被选中，那么它的颜色就会显示为 #1E1E1E，否则就会显示为 #9E9E9E。
修改图标
在 BottomNavigationView 中，图标通常是非常重要的元素，因为它们会直接影响用户的视觉体验。如果默认的 Material Design 图标不能满足我们的需求，那么我们就需要手动修改。
// javascriptcn.com 代码示例
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation_view"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="bottom"
app:itemIconTint="@color/bottom_nav_color"
app:itemTextColor="@color/bottom_nav_color"
app:menu="@menu/menu_bottom_navigation" />
<!-- 带有用户自定义图标的 BottomNavigationView -->
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation_view_with_custom_icon"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="bottom"
app:itemIconTint="@color/bottom_nav_color"
app:itemTextColor="@color/bottom_nav_color"
app:menu="@menu/menu_bottom_navigation_with_custom_icon" />上面代码中，menu_bottom_navigation 和 menu_bottom_navigation_with_custom_icon 都是 BottomNavigationView 中所使用的菜单文件。
// javascriptcn.com 代码示例
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/nav_home"
android:icon="@drawable/ic_bottom_nav_home"
android:title="@string/bottom_nav_home" />
<item
android:id="@+id/nav_dashboard"
android:icon="@drawable/ic_bottom_nav_dashboard"
android:title="@string/bottom_nav_dashboard" />
<item
android:id="@+id/nav_notifications"
android:icon="@drawable/ic_bottom_nav_notifications"
android:title="@string/bottom_nav_notifications" />
</menu>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/nav_home"
android:icon="@drawable/ic_bottom_nav_home_custom"
android:title="@string/bottom_nav_home" />
<item
android:id="@+id/nav_dashboard"
android:icon="@drawable/ic_bottom_nav_dashboard_custom"
android:title="@string/bottom_nav_dashboard" />
<item
android:id="@+id/nav_notifications"
android:icon="@drawable/ic_bottom_nav_notifications_custom"
android:title="@string/bottom_nav_notifications" />
</menu>这里，我们在 menu_bottom_navigation_with_custom_icon 菜单文件中引入了自定义的图标（例如： ic_bottom_nav_home_custom），然后设置给了 BottomNavigationView。这样，就可以达到自定义图标的目的了。
修改字体
在一些特殊情况下，我们需要设置 BottomNavigationView 中字体的样式。如果我们希望修改字体、大小、颜色等，是可以通过自定义样式来达到目的的。
首先，在 styles.xml 文件中定义字体样式：
<style name="BottomNavTextStyle" parent="TextAppearance.Design.BottomNavigationView">
<item name="android:fontFamily">@font/roboto_medium</item>
<item name="android:textSize">13sp</item>
<item name="android:textColor">#9E9E9E</item>
</style>在这里，我们使用了 parent="TextAppearance.Design.BottomNavigationView"，以便继承默认的文本样式。
然后，在 BottomNavigationView 中，使用 app:itemTextAppearanceActive 或 app:itemTextAppearanceInactive 属性来引用上面定义好的样式。
// javascriptcn.com 代码示例
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation_view_with_custom_font"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="bottom"
app:itemIconTint="@color/bottom_nav_color"
app:itemTextColor="@color/bottom_nav_color"
app:menu="@menu/menu_bottom_navigation"
app:itemTextAppearanceActive="@style/BottomNavTextStyle"
app:itemTextAppearanceInactive="@style/BottomNavTextStyle" />在上面代码中，我们给 app:itemTextAppearanceActive 和 app:itemTextAppearanceInactive 属性都设置了 @style/BottomNavTextStyle 样式，这样 BottomNavigationView 的字体样式就被修改了。
总结
在本文中，我们向大家介绍了如何通过 XML 修改 BottomNavigationView 的样式。快速、简单地修改 BottomNavigationView 的样式可以让项目更富有个性，也能让用户更舒适地使用网站。
其实，Material Design 中的所有控件都支持自定义样式，并且也都采用类似的实现方式。学习了这个技巧之后，我们将能够使用这个技巧来改进我们的 UI 设计，从而让我们的应用更加优秀。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65838ffad2f5e1655de6e62a