Material Design 中的 Toolbar 使用指南-JavaScript中文网-JavaScript教程资源分享门户

Toolbar 作为 Material Design 中的重要组件之一，可用于显示应用的标题、菜单、操作按钮等，为用户提供更好的用户体验。本文将介绍如何使用 Toolbar，并提供示例代码及相关学习指导。

1. 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"
    android:title="Toolbar Title" />

为了实现 Toolbar 的常见功能，我们往往需要先在 Activity 中获取该控件，并设置相关属性：

val toolbar = findViewById<Toolbar>(R.id.toolbar)
setSupportActionBar(toolbar)

其中，setSupportActionBar(toolbar) 方法是为了将该 Toolbar 对象绑定到 Activity/Fragment 中，并将该 Toolbar 作为应用的 ActionBar 显示出来。此时，我们还需要在布局文件中添加一个空白的 FrameLayout 作为内容视图容器：

<FrameLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

如果我们需要在 Toolbar 中添加操作按钮，只需要在布局文件中添加 app:menu 属性即可：

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

此时，在 menu_toolbar.xml 文件中可以定义操作按钮的样式和动作：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="@string/action_search"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_settings"
        android:icon="@drawable/ic_settings"
        android:title="@string/action_settings"
        app:showAsAction="never" />
</menu>

2. Toolbar 的高级使用

除了基本使用方式，Toolbar 还提供了许多高级功能，如自定义视图、折叠模式、搜索栏、滑动隐藏等。下面就简要介绍一下这些用法。

2.1 自定义视图

除了基本的标题和操作按钮，Toolbar 还可以显示自定义视图，如搜索框、用户头像等。实现方式也很简单，只需要在布局文件中添加一个自定义的 View，再调用 setSupportActionBar(toolbar) 方法即可：

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        android:textColor="@android:color/white"
        android:textSize="20sp" />

</androidx.appcompat.widget.Toolbar>

val toolbar = findViewById<Toolbar>(R.id.toolbar)
setSupportActionBar(toolbar)

2.2 折叠模式

Toolbar 的折叠模式可以将 Toolbar 收起，仅显示一个标题栏。虽然是隐藏了操作按钮，但是整个界面显得更加简洁明了。

实现方式为，在布局文件中设置 app:layout_scrollFlags="scroll|enterAlways|snap" 属性，将 Toolbar 的滚动标志设置为 “scroll|enterAlways|snap”：

<com.google.android.material.appbar.CollapsingToolbarLayout
    android:layout_width="match_parent"
    android:layout_height="256dp"
    app:layout_scrollFlags="scroll|enterAlways|snap"
    app:title="Toolbar Title"
    app:expandedTitleGravity="bottom">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

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

注意，CollapsingToolbarLayout 是需要和 Toolbar 一起使用的，而且该布局中必须包含一个可折叠的控件，如 ImageView 或 TextView。

2.3 搜索栏

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:popupTheme="@style/AppTheme.PopupOverlay">

    <ImageView
        android:id="@+id/iv_search"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:src="@drawable/ic_search" />

    <EditText
        android:id="@+id/et_search"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Search"
        android:inputType="text"
        android:maxLines="1"
        android:textSize="16sp" />

</androidx.appcompat.widget.Toolbar>

注意，此时还需要在 Activity 中设置搜索框相关的监听器。例如，当用户输入内容时，我们往往需要改变搜索框的图标来显示搜索进度：

val ivSearch = findViewById<ImageView>(R.id.iv_search)
val etSearch = findViewById<EditText>(R.id.et_search)
etSearch.setOnEditorActionListener { v, actionId, _ ->
    if (actionId == EditorInfo.IME_ACTION_SEARCH) {
        ivSearch.visibility = View.GONE
        //TODO: 执行搜索操作
        true
    } else {
        false
    }
}

2.4 滑动隐藏

最后，我们还可以为 Toolbar 添加滑动隐藏的功能，从而为用户提供更大屏幕空间。实现方式是，在布局文件中添加 app:layout_scrollFlags="scroll|enterAlways|snap" 属性，将 Toolbar 的滚动标志设置为 “scroll|enterAlways|snap”：

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:id="@+id/ctl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|enterAlways|snap">

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

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

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

val appBarLayout = findViewById<AppBarLayout>(R.id.appbar)
appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->
    if (abs(verticalOffset) >= appBarLayout.totalScrollRange) {
        toolbar.visibility = View.GONE
    } else {
        toolbar.visibility = View.VISIBLE
    }
})

此时，当用户向下滑动时，Toolbar 会从屏幕上方消失，向上滑动时则会重新出现。不过需要注意的是，Toolbar 的滑动隐藏仅适用于 CoordinatorLayout 中的子视图。

3. 总结

以上就是本文介绍的关于 Material Design 中 Toolbar 的使用指南。除了基本的标题和操作按钮外，Toolbar 还可以实现自定义视图、折叠模式、搜索栏和滑动隐藏等高级功能，优化用户体验。读者可以通过本文提供的示例代码及相关学习指导，快速掌握这些功能，并在实际开发中灵活运用。

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

Material Design 中的 Toolbar 使用指南