如何在Xamarin Android原生应用中实现类Google搜索栏？

嘿，我来帮你搞定这个Google风格的搜索栏！在Xamarin Android里实现和Google搜索栏样式、功能相近的控件，其实分几步就能搞定，咱们从UI到功能一步步来：

Google搜索栏的核心视觉特点是圆角白色背景、左侧搜索图标、右侧关闭按钮、无下划线输入框，咱们用AndroidX的SearchView结合自定义布局就能实现：

1. 布局文件配置 #

在你的Activity布局里，把SearchView嵌入Toolbar（也可以单独使用）：

<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/ThemeOverlay.AppCompat.Light">

    <androidx.appcompat.widget.SearchView
        android:id="@+id/searchView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/search_bar_bg"
        android:iconifiedByDefault="false"
        android:queryHint="搜索..."
        app:queryBackground="@android:color/transparent"
        app:searchIcon="@drawable/ic_search"
        app:closeIcon="@drawable/ic_close" />

</androidx.appcompat.widget.Toolbar>

2. 自定义圆角背景 #

在drawable文件夹下创建search_bar_bg.xml，实现Google风格的圆角白色背景：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white" />
    <corners android:radius="24dp" />
    <padding
        android:bottom="8dp"
        android:left="16dp"
        android:right="16dp"
        android:top="8dp" />
</shape>

搞定UI后，咱们给搜索栏加上核心功能：实时搜索建议、提交搜索、关闭清空这些逻辑：

1. 初始化并设置监听 #

在Activity的OnCreate方法里绑定SearchView，添加事件监听：

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    SetContentView(Resource.Layout.Main);

    var searchView = FindViewById<SearchView>(Resource.Id.searchView);
    
    // 监听输入文本变化，实时更新搜索建议
    searchView.QueryTextChange += (s, e) =>
    {
        string currentQuery = e.NewText.ToString();
        UpdateSearchSuggestions(currentQuery);
    };

    // 监听搜索提交事件
    searchView.QueryTextSubmit += (s, e) =>
    {
        string searchQuery = e.Query.ToString();
        PerformSearchOperation(searchQuery);
        e.Handled = true; // 标记事件已处理，避免重复触发
    };

    // 监听关闭按钮点击，清空搜索内容
    searchView.Close += (s, e) =>
    {
        searchView.SetQuery(string.Empty, false);
    };
}

2. 实现搜索建议列表 #

模拟实时加载搜索建议（实际项目中可以替换为本地数据库查询或网络API请求）：

private void UpdateSearchSuggestions(string query)
{
    // 示例：根据输入关键词生成模拟建议
    var suggestions = new List<string>();
    if (!string.IsNullOrEmpty(query))
    {
        suggestions.Add($"{query} 教程");
        suggestions.Add($"{query} 最佳实践");
        suggestions.Add($"{query} 常见问题");
    }

    // 给SearchView的自动补全框设置适配器
    var autoCompleteTv = searchView.FindViewById<AutoCompleteTextView>(Resource.Id.search_src_text);
    autoCompleteTv.Adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleDropDownItem1Line, suggestions);
}

3. 执行搜索操作 #

这里可以根据需求跳转到搜索结果页面，或者直接展示结果：

private void PerformSearchOperation(string query)
{
    // 示例：用Toast提示，实际项目替换为你的搜索逻辑
    Toast.MakeText(this, $"正在搜索：{query}", ToastLength.Short).Show();
    // 比如启动搜索结果Activity：
    // var intent = new Intent(this, typeof(SearchResultActivity));
    // intent.PutExtra("SearchQuery", query);
    // StartActivity(intent);
}

如果想要更还原Google搜索栏的体验，可以加上这些细节：

• 语音搜索：调用系统语音识别功能，实现语音输入搜索

// 找到SearchView的语音按钮并添加点击事件
var voiceBtn = searchView.FindViewById<ImageView>(Resource.Id.search_voice_btn);
voiceBtn.Click += (s, e) =>
{
    var speechIntent = new Intent(RecognizerIntent.ActionRecognizeSpeech);
    speechIntent.PutExtra(RecognizerIntent.ExtraLanguageModel, RecognizerIntent.LanguageModelFreeForm);
    speechIntent.PutExtra(RecognizerIntent.ExtraPrompt, "请说出搜索内容");
    
    try
    {
        StartActivityForResult(speechIntent, 100);
    }
    catch (ActivityNotFoundException)
    {
        Toast.MakeText(this, "设备不支持语音识别", ToastLength.Short).Show();
    }
};

// 处理语音识别结果
protected override void OnActivityResult(int requestCode, Result resultCode, Intent data)
{
    base.OnActivityResult(requestCode, resultCode, data);
    if (requestCode == 100 && resultCode == Result.Ok)
    {
        var matches = data.GetStringArrayListExtra(RecognizerIntent.ExtraResults);
        if (matches != null && matches.Count > 0)
        {
            var searchView = FindViewById<SearchView>(Resource.Id.searchView);
            searchView.SetQuery(matches[0], true); // 设置语音识别结果并提交搜索
        }
    }
}

• 滚动动态隐藏：监听页面滚动事件，让搜索栏随滚动隐藏/显示，和Google搜索页的效果一致
• 深色模式适配：在values-night文件夹下配置对应的背景色和文字颜色，确保深色模式下样式依然美观

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