前言
Material Design 是由 Google 推出的一种视觉设计语言，主要用于 Android 设备上的应用程序。它提供了一种一致的设计语言，使得应用程序更易于使用和理解。Material Design 具有极强的视觉效果，因此在开发应用程序时使用 Material Design 可以提高用户的体验。
在 Material Design 中，Toolbar 是一种非常重要的组件，是从 Android 5.0（API 21）版本开始引入的。ToolBar 组件可以作为 ActionBar 替代品，通常用于应用程序的顶部导航，可以放置应用程序的 Logo 和操作按钮等元素。
本文将主要讲解如何自定义 Toolbar 中的图标，使得布局更加灵活，满足特定的需求。
什么是 Toolbar
Toolbar （工具栏）是 Material Design 中的一个组件，用于替代传统的 ActionBar 。它通常放置在应用程序的顶部，可包含 Logo 图片、以及操作按钮等元素。
Toolbar 中的图标在 Material Design 中非常重要，可以帮助用户快速了解当前显示的内容以及可以进行的操作。
如何自定义 Toolbar 中的图标
使用 Material Design 提供的 Toolbar 组件非常方便，但是默认情况下，Toolbar 中的图标都是标准的模式，如果我们需要根据特定需求自定义图标，该怎么办呢？
本文将提供两种方法来自定义 Toolbar 中的图标：一种是使用自定义布局（ Custom Layout ），另一种是使用 Menu Item 。
方法一：使用自定义布局
在 Toolbar 中使用自定义布局是一种非常常见的方式，因为使用自定义布局可以让 Toolbar 的布局更加灵活，可以自由定制 Toolbar 上的图标、文字、按钮等元素。
以下是一个简单的自定义布局，在布局中包含了一个 ImageView 和一个 TextView：
----------------------------------
--------------------------------
-----------------------------------
-------------------------------------------
---------------------------------------
---------------------------------------------
----------------------------------
-------------
-----------------------------------
------------------------------------
--------------------------------
----------------------------------
----------
------------------------------
-----------------------------------
------------------------------------
-----------------------------------
-----------------------------------------------
---------
-------------------------------
-----------------------------------
------------------------------------
-------------------------------
-----------------------
------------------------
----------------------------------
---------------
------------------------------------通过上面的布局代码可以看到，我们在 Toolbar 中定义了一个 LinearLayout ，并在该布局中包含了一个 ImageView 和一个 TextView 。这两个元素分别用于显示应用程序的 Logo 和标题。
接下来，在代码中使用该布局即可：
------------------------------
方法二：使用 Menu Item
Toolbar 组件支持使用 Menu Item 来显示图标。在 Menu Item 中配置图标的方法和在普通的菜单中一样，只需要使用 MenuInflater 类来加载菜单即可。以下是一个简单的示例：
----------------------------------
------------------------------
-----------------------------------
-------------------------------------------
-----------------------------------------
--------------------------------------
-------------
-----------------------------------
------------------------------------
--------------------------------
-------------------------
----------
---------------------------
---------------------------
----------------------------
-------------------------------
------------------------------------------------
---------------
------------------------------------在上面的布局中，我们使用了 LinearLayout 来包含一个 ImageView ，ImageView 显示应用程序的 Logo 图标。
接下来，我们需要创建一个 menu.xml 文件，把我们需要的 Action Item 和图标加入进去：
----- ------------- ------------------
----- ----------------------------------------------------------
----------------------------------------------------
-----
-------------------------------
----------------------------------
-------------------------------------
------------------------- --
-----
-----------------------------
--------------------------------
-----------------------------------
------------------------- --
-------在上面的 menu.xml 文件中，我们定义了两个 Action Item ：一个是 Search ，另一个是 Cart 。在 Action Item 的定义中，我们设置了它们的图标和显示方式（如果有足够的空间，则将其显示在 Toolbar 上）。
当用户点击 Action Item 时，我们可以使用 onOptionsItemSelected() 方法来处理操作：
---------
------ ------- ------------------------ ----- -
--------------------------------------------
------ -----
-
---------
------ ------- ------------------------------ -------- ----- -
-- ------ ---- ---------
------ ------------------ -
---- -------------------
-- -- ---------
------ -----
---- -----------------
-- -- ---------
------ -----
--------
------ ----------------------------------
-
-在 onOptionsItemSelected() 方法中，我们使用 Switch 语句来处理不同的 MenuItem ，并根据需要进行相应的操作。
总结
本文主要介绍了如何自定义 Toolbar 中的图标。通过使用自定义布局和 Menu Item ，我们可以自由定制 Toolbar 上的元素，满足特定的需求。
同时，我也建议开发者在应用程序中尽量使用 Material Design 的组件，以提高用户体验。Material Design 的组件在视觉上非常出色，而且使用起来也非常方便，开发者可以省去很多工作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647059fc968c7c53b0e7ad6c