Toolbar 中的返回箭头：从 ActionBar 到 Toolbar 的平滑过渡

2024-03-11 07:23:38

Toolbar 中实现返回箭头的终极指南：从 ActionBar 到 Toolbar 的平滑过渡

导言：

迁移到 Toolbar 时，一个常见的难题就是如何显示返回箭头。在 ActionBar 中，我们可以使用 setDisplayHomeAsUpEnabled(true) 方法轻松实现此功能。但是，在 Toolbar 中，此方法已弃用，这给我们带来了一个独特的挑战。本文将深入探讨 Toolbar 中返回箭头的机制，并提供一步步的指南，教你如何在你的应用程序中轻松实现它。

了解 Toolbar 的返回箭头机制

与 ActionBar 不同，Toolbar 本身不包含返回箭头。相反，它提供了一种灵活的方法，让我们可以将返回箭头作为：

导航图标： 当用户点击它时，触发返回操作。
Up 按钮： 执行与 ActionBar 中 setDisplayHomeAsUpEnabled(true) 相同的功能。

显示导航图标

步骤 1：在布局文件中定义 Toolbar

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:navigationIcon="@drawable/ic_arrow_back">

将 navigationIcon 属性设置为返回箭头的 Drawable 资源。

步骤 2：设置导航图标的点击事件

toolbar.setNavigationOnClickListener {
    // 返回操作
}

设置 Up 按钮

步骤 1：在布局文件中定义 Toolbar

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:homeAsUpEnabled="true">

将 homeAsUpEnabled 属性设置为 true。

步骤 2：设置 Up 按钮的点击事件

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    menuInflater.inflate(R.menu.main, menu)
    return true
}

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        android.R.id.home -> {
            // 返回操作
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}