Compose应用中PreferenceFragment页面Toolbar返回按钮优化问题

针对你遇到的两个问题，这里给出具体的解决步骤：

1. 限制点击范围为左箭头导航图标 #

你之前应该是给整个Toolbar设置了点击事件，导致整个栏都可响应点击。正确的做法是使用Toolbar自带的setNavigationOnClickListener方法，专门给导航图标区域绑定点击逻辑：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_settings)

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

    // 启用返回箭头显示
    supportActionBar?.setDisplayHomeAsUpEnabled(true)

    // 仅给导航图标设置点击事件，点击后关闭当前Activity返回上一页
    toolbar.setNavigationOnClickListener {
        finish()
    }
}

这样处理后，只有左箭头所在的区域会响应点击，整个Toolbar的其他部分不会触发返回逻辑。

2. 给导航图标添加涟漪效果 #

可以通过自定义带涟漪的Drawable来实现，有两种方式可选：

方式一：直接使用带涟漪的导航图标 #

在res/drawable目录下创建ic_nav_back_ripple.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight"> <!-- 继承主题的涟漪高亮颜色 -->
    <item>
        <!-- 这里使用系统返回箭头的vector图标，你也可以替换成自己的图标 -->
        <vector android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24"
            android:tint="?attr/colorOnSurface">
            <path android:fillColor="@android:color/white"
                android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
        </vector>
    </item>
</ripple>

然后在Toolbar的布局文件中指定这个图标：

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

方式二：给导航图标区域单独设置涟漪背景 #

如果不想替换原有图标，可通过代码给导航图标对应的View设置涟漪背景：
先创建一个圆形涟漪的Drawable文件ripple_circle.xml：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item>
        <shape android:shape="oval">
            <size android:width="48dp" android:height="48dp"/> <!-- 符合Material Design的标准点击区域大小 -->
        </shape>
    </item>
</ripple>

然后在Activity中设置：

// 找到Toolbar中的导航图标View
val navigationView = toolbar.getChildAt(0) as? View
// 设置涟漪背景
navigationView?.background = ContextCompat.getDrawable(this, R.drawable.ripple_circle)

这样处理后，点击左箭头时就会显示符合系统风格的涟漪交互效果了。

内容的提问来源于stack exchange，提问作者perissf