我正在尝试更改位于 Android 操作栏 searchview 小部件中的可绘制对象。
目前它看起来像这样：
但我需要将可绘制的蓝色背景更改为红色。
除了滚动自己的搜索小部件之外，我已经尝试了很多方法，但似乎没有任何效果。
有人可以指出我改变这一点的正确方向吗？
问问题
79315 次
12 回答
259
介绍
不幸的是，没有办法SearchView使用 XML 中的主题、样式和继承来设置文本字段样式，就像在 ActionBar 下拉菜单中使用项目的背景一样。这是因为selectableItemBackground 在 中列为可样式化，R.stylable而searchViewTextField(我们感兴趣的主题属性) 不是。因此，我们无法从 XML 资源中轻松访问它（您会得到一个No resource found that matches the given name: attr 'android:searchViewTextField'错误）。
从代码设置 SearchView 文本字段背景
因此，正确替换SearchView文本字段背景的唯一方法是进入它的内部，获取对具有背景设置的视图的访问权限searchViewTextField并设置我们自己的。
注意：下面的解决方案仅取决于 id ( android:id/search_plate) 中的元素SearchView，因此它比子遍历更独立于 SDK 版本（例如，searchView.getChildAt(0)用于到达 中的正确视图SearchView），但它不是防弹的。特别是如果某些制造商决定重新实现内部结构SearchView并且具有上述 id 的元素不存在 - 代码将不起作用。
在 SDK 中，文本字段的背景SearchView是通过九个补丁声明的，所以我们会这样做。您可以在Android git 存储库的drawable-mdpi目录中找到原始png图像。我们对两个图像感兴趣。一种用于选择文本字段时的状态（名为textfield_search_selected_holo_light.9.png），另一种用于未选择文本字段的状态（名为textfield_search_default_holo_light.9.png）。
不幸的是，即使您只想自定义焦点状态，您也必须创建两个图像的本地副本。这是因为R.drawabletextfield_search_default_holo_light中不存在。因此它不容易通过 来访问，它可以在下面显示的选择器中使用，而不是引用本地可绘制对象。@android:drawable/textfield_search_default_holo_light
注意：我使用Holo Light主题作为基础，但您可以使用Holo Dark做同样的事情。浅色和深色主题之间的选定状态9 补丁似乎没有真正的区别。但是，默认状态的 9 个补丁存在差异（请参阅Light vs Dark）。因此，对于Dark和Light主题，可能不需要为selected state制作 9-patches 的本地副本（假设您想要同时处理这两个主题，并使它们看起来与Holo Theme中的相同）。只需制作一份本地副本并在两个主题都可以绘制选择器。
现在，您需要根据需要编辑下载的九个补丁（即将蓝色更改为红色）。您可以使用draw 9-patch 工具查看文件，以检查其在编辑后是否正确定义。
我已经使用GIMP和单像素铅笔工具（非常简单）编辑了文件，但您可能会使用自己的工具。这是我为专注状态定制的 9 补丁：
注意：为简单起见，我只使用图像来表示mdpi密度。如果您想在任何设备上获得最佳效果，您必须为多种屏幕密度创建9 个补丁。Holo 的图像SearchView可以在mdpi、hdpi和xhdpi drawable 中找到。
现在，我们需要创建可绘制选择器，以便根据视图状态显示正确的图像。创建res/drawable/texfield_searchview_holo_light.xml具有以下内容的文件：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true"
android:drawable="@drawable/textfield_search_selected_holo_light" />
<item android:drawable="@drawable/textfield_search_default_holo_light" />
</selector>
我们将使用上面创建的可绘制对象为LinearLayout包含文本字段的视图设置背景SearchView- 它的 id 是android:id/search_plate. 因此，在创建选项菜单时，以下是如何在代码中快速执行此操作：
public class MainActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
// Getting SearchView from XML layout by id defined there - my_search_view in this case
SearchView searchView = (SearchView) menu.findItem(R.id.my_search_view).getActionView();
// Getting id for 'search_plate' - the id is part of generate R file,
// so we have to get id on runtime.
int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
// Getting the 'search_plate' LinearLayout.
View searchPlate = searchView.findViewById(searchPlateId);
// Setting background of 'search_plate' to earlier defined drawable.
searchPlate.setBackgroundResource(R.drawable.textfield_searchview_holo_light);
return super.onCreateOptionsMenu(menu);
}
}
最终效果
这是最终结果的屏幕截图：
我是怎么做到的
我认为值得一提的是我是如何做到这一点的，以便在自定义其他视图时可以使用这种方法。
检查视图布局
我检查了SearchView布局的样子。在SearchView 构造函数中，可以找到使布局膨胀的一行：
inflater.inflate(R.layout.search_view, this, true);
现在我们知道SearchView布局在名为res/layout/search_view.xml. 查看search_view.xml我们可以找到一个内部LinearLayout元素（带有 id search_plate），其中包含android.widget.SearchView$SearchAutoComplete（看起来像我们的搜索视图文本字段）：
<LinearLayout
android:id="@+id/search_plate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center_vertical"
android:orientation="horizontal"
android:background="?android:attr/searchViewTextField">
现在，我们现在根据当前主题的searchViewTextField属性设置背景。
调查属性（是否容易设置？）
为了检查searchViewTextField属性是如何设置的，我们调查res/values/themes.xml。有一组与SearchViewdefault相关的属性Theme：
<style name="Theme">
<!-- (...other attributes present here...) -->
<!-- SearchView attributes -->
<item name="searchDropdownBackground">@android:drawable/spinner_dropdown_background</item>
<item name="searchViewTextField">@drawable/textfield_searchview_holo_dark</item>
<item name="searchViewTextFieldRight">@drawable/textfield_searchview_right_holo_dark</item>
<item name="searchViewCloseIcon">@android:drawable/ic_clear</item>
<item name="searchViewSearchIcon">@android:drawable/ic_search</item>
<item name="searchViewGoIcon">@android:drawable/ic_go</item>
<item name="searchViewVoiceIcon">@android:drawable/ic_voice_search</item>
<item name="searchViewEditQuery">@android:drawable/ic_commit_search_api_holo_dark</item>
<item name="searchViewEditQueryBackground">?attr/selectableItemBackground</item>
我们看到默认主题的值为@drawable/textfield_searchview_holo_dark. 在该文件中也设置了Theme.Light值。
现在，如果可以通过R.styleable访问此属性，那就太好了，但不幸的是，事实并非如此。为了进行比较，请参阅themes.xml和R.attr中都存在的其他主题属性，例如textAppearance或selectableItemBackground。如果出现在(and ) 中，我们可以在用 XML 为整个应用程序定义主题时简单地使用我们的可绘制选择器。例如：searchViewTextFieldR.attrR.stylable
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="android:Theme.Light">
<item name="android:searchViewTextField">@drawable/textfield_searchview_holo_light</item>
</style>
</resources>
应该修改什么？
现在我们知道，我们必须search_plate通过代码访问。但是，我们仍然不知道它应该是什么样子。简而言之，我们搜索在默认主题中用作值的可绘制对象：textfield_searchview_holo_dark.xml和textfield_searchview_holo_light.xml。查看内容，我们看到可绘制对象selector基于视图状态引用了另外两个可绘制对象（稍后会出现 9 个补丁）。您可以在androiddrawables.com上找到来自（几乎）所有 Android 版本的聚合 9-patch drawables
定制
我们识别出 9 个补丁之一中的蓝线，因此我们创建它的本地副本并根据需要更改颜色。
于 2012-07-26T12:56:37.710 回答
33
如果您使用的是 appcompat 库，上述解决方案可能不起作用。您可能必须修改代码以使其适用于 appcompat 库。
这是 appcompat 库的工作解决方案。
@Override
public boolean onCreateOptionsMenu(Menu menu)
{
getMenuInflater().inflate(R.menu.main_menu, menu);
SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
MenuItem searchMenuItem = menu.findItem(R.id.action_search);
SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchMenuItem);
searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
SearchView.SearchAutoComplete searchAutoComplete = (SearchView.SearchAutoComplete)searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
searchAutoComplete.setHintTextColor(Color.WHITE);
searchAutoComplete.setTextColor(Color.WHITE);
View searchplate = (View)searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);
searchplate.setBackgroundResource(R.drawable.texfield_searchview_holo_light);
ImageView searchCloseIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_close_btn);
searchCloseIcon.setImageResource(R.drawable.abc_ic_clear_normal);
ImageView voiceIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_voice_btn);
voiceIcon.setImageResource(R.drawable.abc_ic_voice_search);
ImageView searchIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_mag_icon);
searchIcon.setImageResource(R.drawable.abc_ic_search);
return super.onCreateOptionsMenu(menu);
}
于 2014-01-22T18:32:17.817 回答
14
您的onCreateOptionsMenu方法必须是：
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.option, menu);
SearchView searchView = (SearchView) menu.findItem(R.id.menu_search).getActionView();
int linlayId = getResources().getIdentifier("android:id/search_plate", null, null);
ViewGroup v = (ViewGroup) searchView.findViewById(linlayId);
v.setBackgroundResource(R.drawable.searchviewredversion);
return super.onCreateOptionsMenu(menu);
}
您的搜索项目menu_search偏离路线的位置
这是searchviewredversion（这是xhdpi版本）：http: //img836.imageshack.us/img836/5964/searchviewredversion.png
于 2012-07-26T13:25:54.033 回答
13
上面的解决方案不适用于 ActionBarSherlock 4.2，因此它不能向后兼容 Android 2.x。这是在 ActionBarSherlock 4.2 上设置 SearchView 背景和提示文本的工作代码：
public static void styleSearchView(SearchView searchView, Context context) {
View searchPlate = searchView.findViewById(R.id.abs__search_plate);
searchPlate.setBackgroundResource(R.drawable.your_custom_drawable);
AutoCompleteTextView searchText = (AutoCompleteTextView) searchView.findViewById(R.id.abs__search_src_text);
searchText.setHintTextColor(context.getResources().getColor(R.color.your_custom_color));
}
于 2012-11-20T15:53:46.140 回答
5
我也厌倦了这样做，我正在使用 v7。当我尝试通过 抓取时，应用程序崩溃了searchPlate，getIdentifier()所以我这样做了：
View searchPlate = searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);
于 2015-04-03T22:05:47.790 回答
4
更新
如果您使用的是 AndroidX，那么您可以这样做
View searchPlate = svSearch. findViewById(androidx.appcompat.R.id.search_plate);
if (searchPlate != null) {
AutoCompleteTextView searchText = searchPlate.findViewById(androidx.appcompat.R.id.search_src_text);
if (searchText != null){
searchText.setTextSize(TypedValue.COMPLEX_UNIT_PX, getResources().getDimension(R.dimen.edittext_text_size));
searchText.setMaxLines(1);
searchText.setSingleLine(true);
searchText.setTextColor(getResources().getColor(R.color.etTextColor));
searchText.setHintTextColor(getResources().getColor(R.color.etHintColor));
searchText.setBackground(null);
}
}
于 2019-02-28T11:10:34.410 回答
3
我也遇到了同样的问题。我使用了 appcompat v7 库并为其定义了自定义样式。在drawable文件夹中放置bottom_border.xml文件，如下所示：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape >
<solid android:color="@color/blue_color" />
</shape>
</item>
<item android:bottom="0.8dp"
android:left="0.8dp"
android:right="0.8dp">
<shape >
<solid android:color="@color/background_color" />
</shape>
</item>
<!-- draw another block to cut-off the left and right bars -->
<item android:bottom="2.0dp">
<shape >
<solid android:color="@color/main_accent" />
</shape>
</item>
</layer-list>
在值文件夹 styles_myactionbartheme.xml 中：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppnewTheme" parent="Theme.AppCompat.Light">
<item name="android:windowBackground">@color/background</item>
<item name="android:actionBarStyle">@style/ActionBar</item>
<item name="android:actionBarWidgetTheme">@style/ActionBarWidget</item>
</style>
<!-- Actionbar Theme -->
<style name="ActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">@color/main_accent</item>
<!-- <item name="android:icon">@drawable/abc_ic_ab_back_holo_light</item> -->
</style>
<style name="ActionBarWidget" parent="Theme.AppCompat.Light">
<!-- SearchView customization-->
<!-- Changing the small search icon when the view is expanded -->
<!-- <item name="searchViewSearchIcon">@drawable/ic_action_search</item> -->
<!-- Changing the cross icon to erase typed text -->
<!-- <item name="searchViewCloseIcon">@drawable/ic_action_remove</item> -->
<!-- Styling the background of the text field, i.e. blue bracket -->
<item name="searchViewTextField">@drawable/bottom_border</item>
<!-- Styling the text view that displays the typed text query -->
<item name="searchViewAutoCompleteTextView">@style/AutoCompleteTextView</item>
</style>
<style name="AutoCompleteTextView" parent="Widget.AppCompat.Light.AutoCompleteTextView">
<item name="android:textColor">@color/text_color</item>
<!-- <item name="android:textCursorDrawable">@null</item> -->
<!-- <item name="android:textColorHighlight">@color/search_view_selected_text</item> -->
</style>
</resources>
我定义了用于显示菜单的 custommenu.xml 文件：
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:com.example.actionbartheme="http://schemas.android.com/apk/res-auto" >
<item android:id="@+id/search"
android:title="@string/search_title"
android:icon="@drawable/search_buttonn"
com.example.actionbartheme:showAsAction="ifRoom|collapseActionView"
com.example.actionbartheme:actionViewClass="android.support.v7.widget.SearchView"/>
您的活动应该扩展 ActionBarActivity 而不是 Activity。
@Override
public boolean onCreateOptionsMenu(Menu menu)
{
// Inflate the menu; this adds items to the action bar if it is present.
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.custommenu, menu);
}
在清单文件中：
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppnewTheme" >
有关更多信息，请参见此处：
这里http://www.jayway.com/2014/06/02/android-theming-the-actionbar/
于 2014-09-17T09:11:05.070 回答
2
首先，让我们创建一个名为search_widget_background.xml 的XML 文件，用作drawable，即在drawable 目录下。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="@color/red" />
</shape>
这个drawable将用作我们搜索小部件的背景。我将颜色设置为红色，因为这是您要求的，但您可以将其设置为 @color 标签定义的任何颜色。您甚至可以使用为形状标签定义的属性（制作圆角、制作椭圆背景等）进一步修改它。
下一步是将我们的搜索小部件的背景设置为此。这可以通过以下方式完成：
public boolean onCreateOptionsMenu(Menu menu) {
SearchView searchView = (SearchView)menu.findItem(R.id.my_search_view).getActionView();
Drawable d = getResources().getDrawable(R.drawable.search_widget_background);
searchView.setBackground(d);
...
}
于 2012-07-26T07:16:11.993 回答
1
public boolean onCreateOptionsMenu(Menu menu) {
........
// Set the search plate color
int linlayId = getResources().getIdentifier("android:id/search_plate", null, null);
View view = searchView.findViewById(linlayId);
Drawable drawColor = getResources().getDrawable(R.drawable.searchcolor);
view.setBackground( drawColor );
........
}
这是 searchablecolor.xml 文件
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape >
<solid android:color="#ffffff" />
</shape>
</item>
<!-- main color -->
<item android:bottom="1.5dp"
android:left="1.5dp"
android:right="1.5dp">
<shape >
<solid android:color="#2c4d8e" />
</shape>
</item>
<!-- draw another block to cut-off the left and right bars -->
<item android:bottom="18.0dp">
<shape >
<solid android:color="#2c4d8e" />
</shape>
</item>
</layer-list>
于 2014-12-30T14:37:20.767 回答
1
我对此进行了很多研究，最后我找到了这个解决方案，它对我有用！
你可以用这个
如果你使用 appcompat 试试这个：
ImageView searchIconView = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_button);
searchIconView.setImageResource(R.drawable.yourIcon);
如果你使用 androidx 试试这个：
ImageView searchIconView = (ImageView) searchView.findViewById(androidx.appcompat.R.id.search_button);
searchIconView.setImageResource(R.drawable.yourIcon);
它将更改默认的 serchview 图标。
希望能帮助到你！
于 2020-06-28T12:03:04.823 回答
0
我在这篇文章的最后用图片解释了这适用于 xamarin 表单。不过我想你可以理解，因为它是基于android的searchview的源码
于 2018-07-12T03:58:27.603 回答
0
如果您像这样“getMenuInflater().inflate(R.menu.search_menu, menu);”膨胀 Searchview。然后您可以通过 style.xml 自定义此搜索视图，如下所示。
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="searchViewStyle">@style/SearchView.ActionBar</item>
</style>
<style name="SearchView.ActionBar" parent="Widget.AppCompat.SearchView.ActionBar">
<item name="queryBackground">@drawable/drw_search_view_bg</item>
<item name="searchHintIcon">@null</item>
<item name="submitBackground">@null</item>
<item name="closeIcon">@drawable/vd_cancel</item>
<item name="searchIcon">@drawable/vd_search</item>
</style>
于 2019-03-15T17:10:27.420 回答