如何在Android中配置带左侧导航按钮的Material SearchBar

一、修正现有代码的基础错误 #

现有代码存在两个关键错误：

• MainActivity.kt中searchView的类型错误，应为com.google.android.material.search.SearchView而非SearchBar
• activity_main.xml未声明SearchView组件，需补充该组件才能实现搜索展开功能

二、实现左侧导航按钮打开抽屉 #

无需依赖菜单，直接配置SearchBar的导航属性即可添加左侧抽屉按钮：

修改activity_main.xml #

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.search.SearchBar
        android:id="@+id/search_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="搜索邮件"
        <!-- 设置左侧导航图标为汉堡按钮 -->
        app:navigationIcon="@drawable/ic_menu"
        <!-- 启用自定义导航点击事件 -->
        app:forceDefaultNavigationOnClickListener="false"
        <!-- 配置Material3风格圆角 -->
        app:shapeAppearance="@style/ShapeAppearance.Material3.SmallComponent" />

    <!-- 添加SearchView，默认隐藏，点击SearchBar展开 -->
    <com.google.android.material.search.SearchView
        android:id="@+id/search_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_collapseMode="pin" />

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

配置导航按钮点击事件（MainActivity.kt） #

lateinit var searchBar: SearchBar
lateinit var searchView: SearchView
lateinit var drawerLayout: DrawerLayout // 绑定你已实现的导航抽屉

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    
    searchBar = findViewById(R.id.search_bar)
    searchView = findViewById(R.id.search_view)
    drawerLayout = findViewById(R.id.drawer_layout) // 替换为你的抽屉ID

    // 绑定SearchView与SearchBar
    searchView.setupWithSearchBar(searchBar)

    // 设置左侧导航按钮点击事件，打开抽屉
    searchBar.setNavigationOnClickListener {
        drawerLayout.openDrawer(GravityCompat.START)
    }
}

三、实现搜索文本变化监听（过滤功能） #

通过SearchView的文本监听实现实时过滤：

在MainActivity.kt中添加监听逻辑 #

override fun onCreate(savedInstanceState: Bundle?) {
    // ... 上述初始化代码 ...

    // 监听搜索文本实时变化
    searchView.editText.addTextChangedListener(object : TextWatcher {
        override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}

        override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
            // 在这里处理实时过滤逻辑，比如根据输入文本过滤列表数据
            filterData(s.toString())
        }

        override fun afterTextChanged(s: Editable?) {}
    })

    // 可选：监听搜索提交事件
    searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
        override fun onQueryTextSubmit(query: String?): Boolean {
            searchBar.setText(query)
            searchView.hide()
            return true
        }

        override fun onQueryTextChange(newText: String?): Boolean {
            // 也可在此处处理过滤，二选一即可
            return true
        }
    })
}

// 示例过滤方法，替换为你的业务逻辑
private fun filterData(query: String) {
    // 示例：过滤RecyclerView数据源
    // filteredList = originalList.filter { it.contains(query, ignoreCase = true) }
    // adapter.submitList(filteredList)
}

四、优化样式贴近Gmail/Material3示例 #

1. 定义SearchBar样式（styles.xml） #

<style name="SearchBarStyle" parent="Widget.Material3.SearchBar">
    <item name="backgroundTint">@color/surface_container_low</item>
    <item name="hintTextColor">@color/on_surface_variant</item>
    <item name="textColor">@color/on_surface</item>
    <!-- 调整内边距让搜索框更紧凑 -->
    <item name="contentInsetStart">16dp</item>
    <item name="contentInsetEnd">16dp</item>
</style>

2. 引用样式到SearchBar #

<com.google.android.material.search.SearchBar
    ...
    style="@style/SearchBarStyle" />

3. （可选）添加右侧头像按钮 #

如果需要像Material3示例那样添加右侧头像，创建search_bar_menu.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_profile"
        android:icon="@drawable/ic_profile"
        android:title="个人资料"
        app:showAsAction="always" />
</menu>

然后在MainActivity中加载菜单：

searchBar.inflateMenu(R.menu.search_bar_menu)
searchBar.setOnMenuItemClickListener { item ->
    if (item.itemId == R.id.action_profile) {
        // 处理头像点击事件
        true
    } else {
        false
    }
}

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