Material Design 中使用 Toolbar 实现标题栏的方法大全！-JavaScript中文网-JavaScript教程资源分享门户

在 Material Design 中，Toolbar 是一个非常常见的元素，它通常出现在顶部，用于展示标题、图标和菜单等内容，具有非常重要的作用。在本篇文章中，我将详细介绍 Material Design 中使用 Toolbar 实现标题栏的方法，包括创建 Toolbar、设置标题、添加图标和菜单等。

创建 Toolbar

要创建一个 Toolbar，需要先在布局文件中添加一个 Toolbar 组件，下面是一个简单的示例：

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    app:titleTextColor="@color/white" />

在布局文件中添加 Toolbar 组件之后，还需要在 Activity 或 Fragment 中将其设置为 ActionBar。在 Activity 中，可以通过在 onCreate() 方法中调用 setSupportActionBar() 方法来实现：

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

在 Fragment 中，可以通过在 onCreateView() 方法中调用 setHasOptionsMenu(true) 方法来启用 Toolbar，并在 onCreateOptionsMenu() 方法中调用 getMenuInflater().inflate() 方法来加载菜单项：

// javascriptcn.com 代码示例
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setHasOptionsMenu(true);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_main, container, false);

    Toolbar toolbar = view.findViewById(R.id.toolbar);
    AppCompatActivity activity = (AppCompatActivity) getActivity();
    activity.setSupportActionBar(toolbar);

    return view;
}

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    inflater.inflate(R.menu.toolbar_menu, menu);
}

通过以上步骤，就可以成功创建 Toolbar，并在应用中使用它了。

设置标题

Toolbar 的一个重要作用就是用来显示应用的标题。要设置标题，可以在布局文件中将属性 android:title 设置为标题文字：

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:title="@string/app_name"
    app:titleTextColor="@color/white" />

同时，还可以在后续代码中通过 setTitle() 方法来动态设置 Toolbar 的标题：

Toolbar toolbar = findViewById(R.id.toolbar);
toolbar.setTitle(R.string.app_name);

添加图标

在 Toolbar 中添加图标也是一种常见的做法。要添加图标，可以在布局文件中使用 android:icon 属性来设置 Icon，如下所示：

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:title="@string/app_name"
    android:icon="@drawable/ic_launcher"
    app:titleTextColor="@color/white" />

同时，还可以在 onCreateOptionsMenu() 方法中使用 MenuItem.setIcon() 方法来动态设置图标：

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    inflater.inflate(R.menu.toolbar_menu, menu);

    MenuItem menuItem = menu.findItem(R.id.action_settings);
    menuItem.setIcon(R.drawable.ic_settings);
}

添加菜单

在 Toolbar 中添加菜单也是非常常见的操作，这在之前的代码中也可以看到。要添加菜单，只需要在 res/menu 目录下创建一个 XML 文件，然后在 onCreateOptionsMenu() 方法中使用 getMenuInflater().inflate() 方法来加载它，如下所示：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_settings"
        android:title="@string/settings"
        android:icon="@drawable/ic_settings"
        android:orderInCategory="100"
        android:showAsAction="ifRoom" />
</menu>

同时，还可以在 onOptionsItemSelected() 方法中处理菜单项的点击事件：

// javascriptcn.com 代码示例
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.action_settings:
            // 处理菜单项的点击事件
            return true;
        ...
    }
    return super.onOptionsItemSelected(item);
}

通过以上步骤，就可以成功为 Toolbar 添加菜单了。

总结

本篇文章详细介绍了在 Material Design 中使用 Toolbar 实现标题栏的方法，包括创建 Toolbar、设置标题、添加图标和菜单等。通过这些方法，我们可以轻松地在应用中使用 Toolbar，并为其添加各种功能，提高用户体验。如果你对 Material Design 中的 Toolbar 还有更深入的了解，欢迎在评论区分享。

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