Material Design 是谷歌公司推出的一种设计语言，主要用于移动设备和网络应用的 UI 设计。它的特点是扁平化、卡片化和动画化，让用户在使用应用时可以感受到直观、简单、快速和自然的操作体验。
在 Material Design 中，操作栏是一个很重要的组件。它通常包含应用的主要功能和导航菜单，是用户和应用之间交互的主要入口。默认情况下，操作栏的样式是由谷歌官方提供的，如下图所示。
然而，有时候我们需要根据应用的需要自定义操作栏的样式。比如，改变操作栏的背景色、文本颜色、图标等等。在本文中，我们将介绍 Material Design 操作栏样式自定义的最佳方法，希望能帮助读者更好地掌握这项技术。
在布局文件中定义操作栏
首先，在布局文件中定义操作栏。可以使用 Toolbar 组件来代替默认的操作栏，如下所示。
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/primary_color"
app:titleTextColor="@color/white"
app:popupTheme="@style/AppTheme.PopupOverlay"/>布局文件解释
android:id="@+id/toolbar"：操作栏的 ID，用于在代码中获取该组件对象。android:layout_width="match_parent"：操作栏的宽度为屏幕宽度。android:layout_height="?attr/actionBarSize"：操作栏的高度为主题中定义的高度。android:background="@color/primary_color"：操作栏的背景色为主题中定义的颜色。app:titleTextColor="@color/white"：操作栏标题文本的颜色为主题中定义的白色。app:popupTheme="@style/AppTheme.PopupOverlay"：操作栏弹出菜单的主题为主题中定义的弹出菜单主题。
注意：由于使用了 androidx.appcompat.widget.Toolbar 组件，需要在布局文件的根元素中添加 xmlns:app="http://schemas.android.com/apk/res-auto" 属性。
在主题文件中定义样式
接下来，在主题文件中定义操作栏样式。可以使用 ToolBar 元素来定义样式，如下所示。
-- -------------------- ---- -------
------ --------------- ----------------------------------------------------
---- ------- ----- ------ ---
----- -----------------------------------------------
----- --------------------------------------------------------------
----- -----------------------------------------
---- --------- ----- ------ ---
----- ---------------------------------------------------
----- ------------------------------------------------------------------
----- -------------------------------------------
---- ------ --- ------ ---
----- ----------------------------- -----------------------------------------------------
----- ----------------------------- ----------------------------------------------------
---- ---------- --- ------ ---
----- --------------------------------- -----------------------------------------------
----- ---------------------------------------- -----------------------------------------------------
---- ------- ------ ---
----- -------------------------------------------------------
--------
------ ---------------------------- ---------------------------------------------------
----- -----------------------------------------------------
----- -----------------------------------------
----- -----------------------------------------------
----- -----------------------------------------------------
----- ----------------------------------------------------
--------主题文件解释
parent="Theme.MaterialComponents.Light.NoActionBar"：主题继承自 Material Design 系统主题，并禁用了默认的操作栏。colorPrimary：应用的主要颜色，影响操作栏、状态栏等。colorOnPrimary：在这种颜色上呈现文本和图标的颜色。statusBarColor：状态栏的颜色，使应用与该颜色背景合并。navigationBarColor：导航栏的颜色。toolbarStyle：在主题文件中自定义操作栏样式的入口。parent="Widget.MaterialComponents.Toolbar.Primary"：Toolbar 控件的样式，继承自 Material Design 样式并设置为主要 Toolbar（位于操作栏上）的样式。android:background：操作栏的背景色。titleTextColor：标题文本的颜色。subtitleTextColor：副标题文本的颜色。popupTheme：弹出菜单的主题。navigationIcon：导航按钮的图标。
在代码中设置操作栏样式
最后，在代码中设置操作栏的样式。我们可以使用 setSupportActionBar() 方法来替换默认的操作栏，如下所示。
Toolbar toolbar = findViewById(R.id.toolbar); setSupportActionBar(toolbar);
注意：如果设置 setSupportActionBar() 之前添加菜单项，则可能会导致菜单项不显示。要避免这种情况，可以在 setSupportActionBar() 之后添加菜单项。
综合示例
下面是 Material Design 操作栏样式自定义的综合示例代码。在 Android Studio 中新建一个空白活动，然后复制下面的 XML 和 Java 代码。运行应用程序并观察操作栏的样式。
activity_main.xml
-- -------------------- ---- -------
----- ------------- ------------------
---------------
----------------------------------------------------------
---------------------------------------------------
-----------------------------------
-------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
-----------------------------------------
-----------------
---------------------------------
-----------------------------------------------
---------
--------------------------
----------------------------------
------------------------------------
------------------- -------
-----------------------
--------------------------
-----------------styles.xml
-- -------------------- ---- -------
-----------
---- ---- ----------- ------ ---
------ --------------- ----------------------------------------------------
---- ------- ----- ------ ---
----- -----------------------------------------------
----- --------------------------------------------------------------
----- -----------------------------------------
---- --------- ----- ------ ---
----- ---------------------------------------------------
----- ------------------------------------------------------------------
----- -------------------------------------------
---- ------ --- ------ ---
----- ----------------------------- -----------------------------------------------------
----- ----------------------------- ----------------------------------------------------
---- ---------- --- ------ ---
----- --------------------------------- -----------------------------------------------
----- ---------------------------------------- -----------------------------------------------------
---- ------- ------ ---
----- -------------------------------------------------------
--------
---- ------- ------ ---
------ ---------------------------- ---------------------------------------------------
----- -----------------------------------------------------
----- -----------------------------------------
----- -----------------------------------------------------
----- ----------------------------------------------------
--------
---- ----- ------- ------ ---
------ ---------------------------- ------------------------------------------------
------------MainActivity.java
-- -------------------- ---- -------
------ -----------------------------------------
------ ----------------------------------
------ ------------------
------ ----- ------------ ------- ----------------- -
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
------- ------- - ---------------------------
-----------------------------
-
-总结
通过本文的介绍，读者可以了解 Material Design 操作栏样式自定义的最佳方法，包括在布局文件中定义操作栏、在主题文件中定义样式、在代码中设置操作栏样式等操作。读者可以根据应用的需要自由自在地设计操作栏样式，提高应用的用户体验和美观程度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64abc1cc48841e9894795c97