随着 Android 设备的大量普及和用户需求的日益增加，谷歌推出了 Android Material Design 设计语言，提供了更加现代化和更加符合人们习惯的用户界面设计。其中 Toolbar 组件是 Material Design 中的一个重要组件，本文将对其进行详细的介绍和讲解。
一、Toolbar 的概念及作用
Toolbar 是一种替代传统 Action Bar 的供给普通应用程序使用的视觉和结构模式，第一次推出是在 Android 5.0 中。它位于应用程序顶部，用于显示应用程序标题、常用操作、搜索框、菜单等等。Toolbar 是一个可定制的、可以完全替代 Action Bar 的组件。
Toolbar 旨在实现独立于特定 Activity 的 UI 组件，这使得开发者可以在一个应用程序中复用它们。因此，Toolbar 实现了一个应用由多个 Activity 可以使用相同的 Toolbar 来代替每个 Activity 都有一个Action Bar。
二、Toolbar 的布局和使用
1、在 XML 中定义 Toolbar
在 XML 中定义 Toolbar 可以使用 android.support.v7.widget.Toolbar，其中 app:theme 属性是设置 Toolbar 所使用的样式。下面是 Toolbar 的基本定义：
<android.support.v7.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:title="Toolbar Title"
app:navigationIcon="@mipmap/ic_launcher"
app:menu="@menu/menu_main"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />其中常用的属性如下：
app:title：Toolbar 的标题app:logo：Toolbar 左边 Logo 图片，一般和 NavigationIcon 互斥app:navigationIcon：Toolbar 左边返回按钮，一般和 logo 图片互斥app:menu：Toolbar 右边的自定义菜单，可以通过代码动态修改app:theme：Toolbar 使用的主题
2、在 Activity 中使用 Toolbar
默认情况下，Activity 不会直接使用 Toolbar，需要对其进行初始化。在 Activity 中使用如下代码：
Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar); setSupportActionBar(toolbar);
其中 setSupportActionBar() 可以接受子类或父类对象作为参数，而不是只能接受 ActionBar 对象。这个方法的主要作用是设置 Toolbar 代替原先的 ActionBar，并将 Toolbar 的标题、菜单等信息传递给 Activity。
3、添加 Toolbar 的事件
为了响应 Toolbar 的事件，比如点击菜单项的事件，需要在 Activity 中重载相应的方法。Toolbar 相关的回调方法为：
// javascriptcn.com 代码示例
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.action_share:
Toast.makeText(this, "Share Clicked", Toast.LENGTH_SHORT).show();
return true;
case R.id.action_settings:
Toast.makeText(this, "Settings Clicked", Toast.LENGTH_SHORT).show();
return true;
default:
return super.onOptionsItemSelected(item);
}
}以上代码通过重写 onCreateOptionsMenu() 方法添加 Toolbar 右侧的菜单项，并通过重写 onOptionsItemSelected() 方法响应菜单项的点击事件。
三、Toolbar 的样式与主题
Toolbar 可以通过设置主题，来修改整体的样式，从而符合应用的设计风格。具体实现方式是在应用主题中指定 toolbarStyle 属性，然后创建自定义样式文件，覆盖 toolbarStyle 属性所指向的样式文件中的设置。例如：
// javascriptcn.com 代码示例
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="toolbarStyle">@style/AppTheme.ToolbarStyle</item>
</style>
<style name="AppTheme.ToolbarStyle" parent="Widget.AppCompat.Toolbar">
<item name="android:background">@color/colorPrimary</item>
<item name="android:titleTextColor">@android:color/white</item>
</style>以上代码将 toolbarStyle 属性设置为 AppTheme.ToolbarStyle，并在 AppTheme.ToolbarStyle 中修改了 Toolbar 的背景色和标题字体颜色。
四、Toolbar 的完整示例代码
// javascriptcn.com 代码示例
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:title="Toolbar Title"
app:navigationIcon="@mipmap/ic_launcher"
app:menu="@menu/menu_main"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<TextView
android:layout_below="@id/toolBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Hello Toolbar"/>
</RelativeLayout>Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar); setSupportActionBar(toolbar);
// javascriptcn.com 代码示例
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.action_share:
Toast.makeText(this, "Share Clicked", Toast.LENGTH_SHORT).show();
return true;
case R.id.action_settings:
Toast.makeText(this, "Settings Clicked", Toast.LENGTH_SHORT).show();
return true;
default:
return super.onOptionsItemSelected(item);
}
}五、总结
本文对 Android Material Design 中的重要组件 Toolbar 进行了详细的介绍和讲解，并提供了相应的示例代码。开发者可以通过学习本文，更好地掌握 Toolbar 组件的使用方法和实现原理，在开发 Android 应用时可以更快速地设计和实现符合 Material Design 风格的用户界面效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654f146e7d4982a6eb81a4a5