Material Design 规范下的 Toolbar 实现与使用技巧详解

随着移动互联网的发展，用户对于应用的体验要求越来越高，Material Design 成为了现代应用设计的主流。在 Material Design 中，Toolbar 是一个非常重要的组件，它可以提供应用的导航、搜索、操作等功能，因此在实现和使用 Toolbar 时需要注意一些细节。

实现 Toolbar

在实现 Toolbar 时，需要注意以下几个方面：

1. 添加依赖

首先需要在项目的 build.gradle 文件中添加以下依赖：

implementation 'com.google.android.material:material:1.3.0'

2. 布局文件

在布局文件中添加 Toolbar 组件：

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:titleTextColor="@color/white"
    app:menu="@menu/menu_main" />

其中，app:titleTextColor 用于设置标题的颜色，app:menu 用于设置菜单项。

3. 设置标题和菜单项

在代码中设置 Toolbar 的标题和菜单项：

MaterialToolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("主页");

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_search"
        android:icon="@drawable/ic_search"
        android:title="搜索"
        app:showAsAction="always" />
    <item
        android:id="@+id/menu_settings"
        android:icon="@drawable/ic_settings"
        android:title="设置"
        app:showAsAction="always" />
</menu>

4. 处理菜单项点击事件

处理 Toolbar 中菜单项的点击事件：

@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.menu_search:
            // 处理搜索菜单项点击事件
            return true;
        case R.id.menu_settings:
            // 处理设置菜单项点击事件
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

使用技巧

在使用 Toolbar 时，需要注意以下几个技巧：

1. 固定 Toolbar

如果需要在应用中固定 Toolbar，可以使用 app:layout_scrollFlags="scroll|enterAlways"：

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:titleTextColor="@color/white"
    app:menu="@menu/menu_main"
    app:layout_scrollFlags="scroll|enterAlways" />

2. 支持 CollapsingToolbarLayout

如果需要在应用中使用 CollapsingToolbarLayout，可以使用 app:layout_scrollFlags="scroll|exitUntilCollapsed"：

<com.google.android.material.appbar.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:titleTextColor="@color/white"
        app:menu="@menu/menu_main"
        app:layout_collapseMode="pin" />

    <!-- 其他布局组件 -->

</com.google.android.material.appbar.CollapsingToolbarLayout>

3. 自定义 Toolbar 样式

如果需要自定义 Toolbar 的样式，可以在 styles.xml 文件中添加以下代码：

<style name="AppTheme.Toolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
    <item name="android:background">@color/white</item>
    <item name="titleTextColor">@color/black</item>
    <item name="subtitleTextColor">@color/grey</item>
</style>

然后在布局文件中使用自定义的样式：

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    style="@style/AppTheme.Toolbar"
    app:menu="@menu/menu_main" />

示例代码

完整的示例代码如下：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        MaterialToolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setTitle("主页");
    }

    @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.menu_search:
                // 处理搜索菜单项点击事件
                return true;
            case R.id.menu_settings:
                // 处理设置菜单项点击事件
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
}

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:titleTextColor="@color/white"
    app:menu="@menu/menu_main" />

<com.google.android.material.appbar.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:titleTextColor="@color/white"
        app:menu="@menu/menu_main"
        app:layout_collapseMode="pin" />

    <!-- 其他布局组件 -->

</com.google.android.material.appbar.CollapsingToolbarLayout>

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_search"
        android:icon="@drawable/ic_search"
        android:title="搜索"
        app:showAsAction="always" />
    <item
        android:id="@+id/menu_settings"
        android:icon="@drawable/ic_settings"
        android:title="设置"
        app:showAsAction="always" />
</menu>

<style name="AppTheme.Toolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
    <item name="android:background">@color/white</item>
    <item name="titleTextColor">@color/black</item>
    <item name="subtitleTextColor">@color/grey</item>
</style>

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    style="@style/AppTheme.Toolbar"
    app:menu="@menu/menu_main" />

总结

Material Design 规范下的 Toolbar 是一个非常重要的组件，它可以提供应用的导航、搜索、操作等功能。在实现和使用 Toolbar 时，需要注意一些细节和技巧，以提高应用的用户体验。希望本文能够对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c036adadd4f0e0ff9f5062