如何在 Android 的操作栏中自定义扩展的 SearchView？

Question

在 ActionBar 中展开时的默认 SearchView 如下图所示：

我想自定义类似这张图片的扩展SearchView：

我是 Android 开发的新手。如果有人可以帮助我，我将不胜感激。

Answer 1

SearchView for Androidx 包由 EditText 和一些 AppCompatImageView 组成，例如关闭图标和搜索图标

要自定义它，您必须访问我已经讨论过的这些视图

例如，要像您展示的图像一样更改背景，您需要创建如下形状：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">


    <solid android:color="#02B15D" />
    <corners android:radius="15dp" />
    <stroke
        android:width="2dp"
        android:color="#1A40FF" />
</shape>

这就是它的形状：

你必须将上面的形状添加到EditText

的背景中

要获得这个 EditText 很简单，只需在你身上使用这个 onCreateOptionMenu ：

  @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar_menu, menu);

        SearchView searchView = (SearchView) menu.findItem(R.id.search).getActionView();
        EditText editText = (searchView.findViewById(androidx.appcompat.R.id.search_src_text)); // get the EditText from it

        editText.setBackgroundResource(R.drawable.round_search); // set the background to searchView
        
        // you can do more with the editText like textColor hint color ..... 
        return super.onCreateOptionsMenu(menu);
    }

要自定义搜索图标，请使用此

AppCompatImageView searchIcon = searchView.findViewById(androidx.appcompat.R.id.search_mag_icon);

对于显示在工具栏上的搜索按钮，请使用：

AppCompatImageView search_button = searchView.findViewById(androidx.appcompat.R.id.search_button);

最后，关闭按钮使用这个：

AppCompatImageView search_close_btn = searchView.findViewById(androidx.appcompat.R.id.search_close_btn);

结果是这样的：

更新

要使搜索图标在 SearchView 的左侧可见，您可以使用以下方法将图标添加到 EditText：

editText.setCompoundDrawablesWithIntrinsicBounds(android.R.drawable.ic_menu_search,0,0,0);

如果你使用：

AppCompatImageView searchIcon =  searchView.findViewById(androidx.appcompat.R.id.search_mag_icon); searchIcon.setImageResource(android.R.drawable.ic_menu_search);

您必须添加searchView.setIconifiedByDefault(false);，但图标在形状之外可见，请参见下图：

所以如果你想要形状内的图标使用第一种方法