Material Design 是一种由 Google 设计的视觉语言，旨在提供一种更加自然、一致和美观的设计风格。在 Android 应用程序中，ToolBar 是一个重要的 UI 元素，通常用于显示应用程序的标题、导航按钮和其他操作。在本文中，我们将详细介绍如何修改 ToolBar 的样式，以实现更加个性化的设计效果。
ToolBar 的基本结构
ToolBar 是一个 ViewGroup，由多个子组件组成，可以通过 XML 或代码创建。下面是 ToolBar 的基本结构：
// javascriptcn.com 代码示例
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="My App"
app:titleTextColor="@color/white"
app:subtitle="Welcome to my app"
app:subtitleTextColor="@color/white"
app:popupTheme="@style/AppTheme.PopupOverlay" />其中，android:background 属性用于设置 ToolBar 的背景色，app:title 和 app:subtitle 属性用于设置标题和副标题，app:titleTextColor 和 app:subtitleTextColor 属性用于设置标题和副标题的颜色，app:popupTheme 属性用于设置 ToolBar 弹出菜单的样式。
修改 ToolBar 的背景色
要修改 ToolBar 的背景色，可以通过 android:background 属性设置一个颜色值或者一个 Drawable。例如，以下代码将 ToolBar 的背景色设置为红色：
// javascriptcn.com 代码示例
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/red"
app:title="My App"
app:titleTextColor="@color/white"
app:subtitle="Welcome to my app"
app:subtitleTextColor="@color/white"
app:popupTheme="@style/AppTheme.PopupOverlay" />修改 ToolBar 的标题样式
要修改 ToolBar 的标题样式，可以通过 app:titleTextAppearance 属性设置一个样式资源。例如，以下代码将 ToolBar 的标题字体大小设置为 24sp：
// javascriptcn.com 代码示例
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="My App"
app:titleTextColor="@color/white"
app:titleTextAppearance="@style/Toolbar.TitleText"
app:subtitle="Welcome to my app"
app:subtitleTextColor="@color/white"
app:popupTheme="@style/AppTheme.PopupOverlay" />
<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">24sp</item>
</style>修改 ToolBar 的导航按钮样式
要修改 ToolBar 的导航按钮样式，可以通过 app:navigationIcon 属性设置一个 Drawable。例如，以下代码将 ToolBar 的导航按钮设置为一个白色的箭头图标：
// javascriptcn.com 代码示例
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="My App"
app:titleTextColor="@color/white"
app:navigationIcon="@drawable/ic_arrow_back_white_24dp"
app:subtitle="Welcome to my app"
app:subtitleTextColor="@color/white"
app:popupTheme="@style/AppTheme.PopupOverlay" />修改 ToolBar 的菜单样式
要修改 ToolBar 的菜单样式，可以通过 app:popupTheme 属性设置一个样式资源。例如，以下代码将 ToolBar 的菜单样式设置为白色：
// javascriptcn.com 代码示例
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="My App"
app:titleTextColor="@color/white"
app:subtitle="Welcome to my app"
app:subtitleTextColor="@color/white"
app:popupTheme="@style/Toolbar.PopupMenu"
app:menu="@menu/toolbar_menu" />
<style name="Toolbar.PopupMenu" parent="@style/ThemeOverlay.AppCompat.Light">
<item name="android:textColor">@color/white</item>
</style>总结
在本文中，我们介绍了如何修改 ToolBar 的样式，包括背景色、标题样式、导航按钮样式和菜单样式。通过对 ToolBar 的样式进行个性化的修改，可以帮助我们实现更加出色的设计效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6583c30cd2f5e1655de91653