如何实现Material 3中Search View的Docked模式（MDC-Android）

由于MDC-Android稳定版暂未提供官方的Docked模式SearchView组件，你可以通过以下方式模拟Material 3官方示例及Google Messages的交互效果：

1. 基础布局搭建 #

将SearchView与MaterialToolbar组合，通过AppBarLayout实现停靠在标题栏下方的布局结构：

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/Theme.Material3.Light.NoActionBar">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="Messages" />

    <com.google.android.material.search.SearchView
        android:id="@+id/search_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|enterAlways"
        app:queryHint="Search messages"
        app:searchMode="expanded"
        style="@style/Widget.MyApp.SearchView.Docked" />

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

2. 自定义SearchView样式 #

在styles.xml中定义符合Docked模式的样式，匹配Material 3设计规范：

<style name="Widget.MyApp.SearchView.Docked" parent="Widget.Material3.SearchView.Expanded">
    <item name="backgroundTint">@color/surface_container_low</item>
    <item name="shapeAppearance">@style/ShapeAppearance.Material3.SmallComponent</item>
    <item name="queryBackground">@null</item>
    <item name="iconifiedByDefault">false</item>
    <item name="hintIcon">@drawable/ic_search</item>
</style>

3. 状态控制与交互实现 #

在Activity或Fragment中处理SearchView的展开/折叠状态，模拟Google Messages的交互逻辑：

val searchView = findViewById<SearchView>(R.id.search_view)
val toolbar = findViewById<MaterialToolbar>(R.id.toolbar)
val defaultSearchHeight = resources.getDimensionPixelSize(R.dimen.search_docked_height)
val expandedSearchHeight = resources.getDimensionPixelSize(R.dimen.search_expanded_height)

// 设置初始停靠高度
searchView.layoutParams.height = defaultSearchHeight

searchView.setOnSearchClickListener {
    // 展开搜索栏，隐藏Toolbar标题
    toolbar.title = ""
    searchView.setQuery("", true)
    // 添加平滑展开动画
    searchView.animate()
        .height(expandedSearchHeight)
        .setDuration(200)
        .start()
}

searchView.setOnCloseListener {
    // 折叠回停靠状态，恢复Toolbar标题
    toolbar.title = "Messages"
    searchView.animate()
        .height(defaultSearchHeight)
        .setDuration(200)
        .start()
    false
}

searchView.setOnQueryTextFocusChangeListener { _, hasFocus ->
    if (!hasFocus) {
        // 失去焦点时自动折叠
        toolbar.title = "Messages"
        searchView.animate()
            .height(defaultSearchHeight)
            .setDuration(200)
            .start()
    }
}

在dimens.xml中添加高度定义：

<dimen name="search_docked_height">56dp</dimen>
<dimen name="search_expanded_height">200dp</dimen>

补充说明 #

目前MDC-Android稳定版尚未提供与Compose中DockedSearchBar完全对应的组件，上述方案通过组合现有组件并自定义交互，可实现与官方示例一致的Docked模式效果。你也可以关注MDC-Android的后续版本更新，等待官方组件的推出。

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