简介
BottomNavigationView 是一个常见的导航栏控件,在 Android Material Design 中经常被使用。虽然默认样式就已经很好看了,但在实际项目中我们经常需要对其进行个性化的定制。因此,本文将向大家介绍如何修改 BottomNavigationView 的样式,包括颜色、图标、字体等。
修改颜色
在 Android Material Design 中,颜色是其中一个最基础的元素。BottomNavigationView 同样支持在 XML 文件中直接定义颜色并进行应用。
------------------------------------------------------------------ --------------------------------- ----------------------------------- ---------------------------- ------------------------------- ------------------------------------------ ------------------------------------------- --------------------------------------- --
在上面的代码中,我们使用了 app:itemIconTint
和 app:itemTextColor
来分别修改 BottomNavigationView 的图标和文字颜色。
具体的颜色定义在 bottom_nav_color.xml
文件中:
--------- ----------------------------------------------------------- ----- ----------------------- ---------------------------- -- ----- ----------------------- -- -----------
在其中,定义了两个状态:选中和未选中。如果 BottomNavigationView 中某个条目被选中,那么它的颜色就会显示为 #1E1E1E
,否则就会显示为 #9E9E9E
。
修改图标
在 BottomNavigationView 中,图标通常是非常重要的元素,因为它们会直接影响用户的视觉体验。如果默认的 Material Design 图标不能满足我们的需求,那么我们就需要手动修改。
------------------------------------------------------------------ --------------------------------- ----------------------------------- ---------------------------- ------------------------------- ------------------------------------------ ------------------------------------------- --------------------------------------- -- ---- ---------- -------------------- --- ------------------------------------------------------------------ -------------------------------------------------- ----------------------------------- ---------------------------- ------------------------------- ------------------------------------------ ------------------------------------------- -------------------------------------------------------- --
上面代码中,menu_bottom_navigation
和 menu_bottom_navigation_with_custom_icon
都是 BottomNavigationView 中所使用的菜单文件。
----- ----------------------------------------------------------- ----- -------------------------- ------------------------------------------- --------------------------------------- -- ----- ------------------------------- ------------------------------------------------ -------------------------------------------- -- ----- ----------------------------------- ---------------------------------------------------- ------------------------------------------------ -- ------- ----- ----------------------------------------------------------- ----- -------------------------- -------------------------------------------------- --------------------------------------- -- ----- ------------------------------- ------------------------------------------------------- -------------------------------------------- -- ----- ----------------------------------- ----------------------------------------------------------- ------------------------------------------------ -- -------
这里,我们在 menu_bottom_navigation_with_custom_icon
菜单文件中引入了自定义的图标(例如: ic_bottom_nav_home_custom
),然后设置给了 BottomNavigationView。这样,就可以达到自定义图标的目的了。
修改字体
在一些特殊情况下,我们需要设置 BottomNavigationView 中字体的样式。如果我们希望修改字体、大小、颜色等,是可以通过自定义样式来达到目的的。
首先,在 styles.xml
文件中定义字体样式:
------ ------------------------- ---------------------------------------------------- ----- ---------------------------------------------------- ----- ----------------------------------- ----- --------------------------------------- --------
在这里,我们使用了 parent="TextAppearance.Design.BottomNavigationView"
,以便继承默认的文本样式。
然后,在 BottomNavigationView
中,使用 app:itemTextAppearanceActive
或 app:itemTextAppearanceInactive
属性来引用上面定义好的样式。
------------------------------------------------------------------ -------------------------------------------------- ----------------------------------- ---------------------------- ------------------------------- ------------------------------------------ ------------------------------------------- --------------------------------------- -------------------------------------------------------- ---------------------------------------------------------- --
在上面代码中,我们给 app:itemTextAppearanceActive
和 app:itemTextAppearanceInactive
属性都设置了 @style/BottomNavTextStyle
样式,这样 BottomNavigationView 的字体样式就被修改了。
总结
在本文中,我们向大家介绍了如何通过 XML 修改 BottomNavigationView 的样式。快速、简单地修改 BottomNavigationView 的样式可以让项目更富有个性,也能让用户更舒适地使用网站。
其实,Material Design 中的所有控件都支持自定义样式,并且也都采用类似的实现方式。学习了这个技巧之后,我们将能够使用这个技巧来改进我们的 UI 设计,从而让我们的应用更加优秀。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/65838ffad2f5e1655de6e62a