在使用 Material Design 开发 Android 应用时，BottomNavigationView 是一个常用的控件，它可以用来实现底部导航栏的功能。但是，BottomNavigationView 默认提供的图标可能不够满足我们的需求。那么，如何为 BottomNavigationView 添加自定义图标呢？下面就为大家介绍一下。
为 BottomNavigationView 添加自定义图标
在 Material Design 中，我们可以使用 app:itemIconTint 属性来设置 BottomNavigationView 的图标颜色。因此，我们可以通过修改该属性为 null，然后使用自定义的 ImageView 来替代原有的图标。具体实现步骤如下：
在布局文件中添加 BottomNavigationView
<com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/bottom_navigation_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/white" app:menu="@menu/bottom_navigation_menu" app:itemIconTint="@null" />注意，这里我们将
app:itemIconTint属性设置为了@null，这样 BottomNavigationView 中的图标颜色就会变成默认颜色。创建自定义的 ImageView
在项目中创建一个名为
BottomNavigationViewIcon的类，继承自ImageView，并重写onMeasure方法：-- -------------------- ---- ------- ------ ----- ------------------------ ------- --------- - ------ -------------------------------- -------- - --------------- - ------ -------------------------------- -------- ------------ ------ - -------------- ------- - ------ -------------------------------- -------- ------------ ------ --- ------------- - -------------- ------ -------------- - --------- --------- ---- ------------- ----------------- --- ------------------ - --- ----- - -------------------------------------- --- ------ - --------------------------------------- --- ---- - --------------- -------- -------------------------- ------ - -此时，我们的自定义 ImageView 就创建好了，它会自适应大小，保证宽高相等。
在菜单中添加自定义图标
在
res/menu目录下创建一个名为bottom_navigation_menu.xml的文件，用于定义 BottomNavigationView 中的菜单。在菜单中添加自定义的图标：-- -------------------- ---- ------- ----- ------------- ------------------ ----- ---------------------------------------------------------- ---------------------------------------------------- ----- ---------------------- --------------------------------------- ------------------------- ------------------------------------------------- -- ----- -------------------------- ------------------------------------------- ------------------------- ------------------------------------------------- -- ----- ------------------------- ------------------------------------------ ------------------------- ------------------------------------------------- -- -------在每个菜单项中，我们将
app:actionLayout属性设置为自定义的 ImageView 布局。创建自定义的 ImageView 布局
在
res/layout目录下创建一个名为bottom_navigation_icon.xml的布局文件，用于定义自定义 ImageView 布局。这里我们使用一个FrameLayout将自定义 ImageView 包裹起来，以确保它的大小符合我们的要求：-- -------------------- ---- ------- ----- ------------- ------------------ ------------ ---------------------------------------------------------- ----------------------------------- ------------------------------------ -------------------------------- ------------------------------------- ---------------------------------------- ----------------------------------- ------------------------------------ -- --------------在代码中设置自定义的图标
最后，在代码中为自定义的 ImageView 设置图标即可：
-- -------------------- ---- ------- -------------------- -------------------- - ------------------------------------------ ---- ---- - ------------------------------- -------- -------- - ------------------------- ------------------------ -------- - -------------------------- ------------------------------------------------------------------- ---------------------------------------------- -------- ------------ - ----------------------------- ------------------------ ------------ - -------------------------- ----------------------------------------------------------------------- ------------------------------------------------------ -------- ----------- - ---------------------------- ------------------------ ----------- - -------------------------- ---------------------------------------------------------------------- ----------------------------------------------------
在上面的代码中，我们先获取到菜单，然后分别为每个菜单项的自定义 ImageView 设置图标。
至此，我们已经成功地为 BottomNavigationView 添加了自定义图标。下面提供一个完整的示例代码供大家参考：
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
app:menu="@menu/bottom_navigation_menu"
app:itemIconTint="@null" />-- -------------------- ---- -------
------ ----- ------------------------ ------- --------- -
------ -------------------------------- -------- -
---------------
-
------ -------------------------------- -------- ------------ ------ -
-------------- -------
-
------ -------------------------------- -------- ------------ ------ --- ------------- -
-------------- ------ --------------
-
---------
--------- ---- ------------- ----------------- --- ------------------ -
--- ----- - --------------------------------------
--- ------ - ---------------------------------------
--- ---- - --------------- --------
-------------------------- ------
-
--- -------------------- ---- -------
----- ------------- ------------------
----- ----------------------------------------------------------
----------------------------------------------------
-----
----------------------
---------------------------------------
-------------------------
------------------------------------------------- --
-----
--------------------------
-------------------------------------------
-------------------------
------------------------------------------------- --
-----
-------------------------
------------------------------------------
-------------------------
------------------------------------------------- --
--------- -------------------- ---- -------
----- ------------- ------------------
------------ ----------------------------------------------------------
-----------------------------------
------------------------------------
--------------------------------
-------------------------------------
----------------------------------------
-----------------------------------
------------------------------------ --
---------------- -------------------- ---- ------- -------------------- -------------------- - ------------------------------------------ ---- ---- - ------------------------------- -------- -------- - ------------------------- ------------------------ -------- - -------------------------- ------------------------------------------------------------------- ---------------------------------------------- -------- ------------ - ----------------------------- ------------------------ ------------ - -------------------------- ----------------------------------------------------------------------- ------------------------------------------------------ -------- ----------- - ---------------------------- ------------------------ ----------- - -------------------------- ---------------------------------------------------------------------- ----------------------------------------------------
总结
本文介绍了如何为 Material Design 中的 BottomNavigationView 添加自定义图标。通过修改 app:itemIconTint 属性为 null，然后使用自定义的 ImageView 来替代原有的图标，我们可以轻松地为 BottomNavigationView 添加自己喜欢的图标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cc92b95ad90b6d042990a3