android - 更改 searchview 小部件的背景可绘制

Question

我正在尝试更改位于 Android 操作栏搜索 View 小部件中的可绘制对象。

目前它看起来像这样:


但我需要将可绘制的蓝色背景更改为红色。

除了滚动我自己的搜索小部件之外，我已经尝试了很多东西，但似乎没有任何效果。

有人可以指出我改变这一点的正确方向吗？

Answer 1

介绍

不幸的是，无法设置 SearchView使用 XML 中的主题、样式和继承的文本字段样式 can do with background of items in ActionBar dropdown .这是因为 selectableItemBackground is listed as styleable在 R.stylable , 而 searchViewTextField (我们感兴趣的主题属性)不是。因此，我们无法从 XML 资源中轻松访问它(您将收到 No resource found that matches the given name: attr 'android:searchViewTextField' 错误)。

从代码设置 SearchView 文本字段背景

所以，正确替换SearchView背景的唯一方法文本字段是进入它的内部，获取对基于 searchViewTextField 背景设置的 View 的访问权限并设置我们自己的。

注意:下面的解决方案仅取决于 android:id/search_plate 中元素的 id ( SearchView ) ，所以它比 child 遍历更独立于 SDK 版本(例如，使用 searchView.getChildAt(0) 在 SearchView 内获得正确的 View )，但它不是防弹的。特别是如果某些制造商决定重新实现 SearchView 的内部结构并且不存在具有上述 id 的元素 - 代码将不起作用。

SDK中SearchView中的文本框背景通过 nine-patches 声明，所以我们会这样做。您可以在 drawable-mdpi 中找到原始 png 图像Android git repository的目录.我们对两张图片感兴趣。一种用于选择文本字段时的状态(名为 textfield_search_selected_holo_light.9.png )，另一种用于未选择的状态(名为 textfield_search_default_holo_light.9.png )。

不幸的是，即使您只想自定义聚焦状态，您也必须创建两个图像的本地副本。这是因为 textfield_search_default_holo_light不存在于 R.drawable .因此它不容易通过 @android:drawable/textfield_search_default_holo_light 访问。 ，可以在下面显示的选择器中使用，而不是引用本地可绘制对象。

注意:我使用 Holo Light 主题作为基础，但你可以用 Holo Dark 做同样的事情。似乎 Light 之间的选定状态 9-patch 没有真正的区别。和 Dark主题。但是，默认状态的 9 个补丁存在差异(请参阅 Light 与 Dark )。因此，对于深色和浅色主题，可能没有必要为选定状态制作 9 个补丁的本地副本(假设您想同时处理两者，并使它们看起来与 Holo 主题中的相同)。只需制作一份本地副本并在两个主题的可绘制选择器中使用它。

现在，您需要根据需要编辑下载的 9-patch (即将蓝色更改为红色)。您可以使用 draw 9-patch tool 查看文件在编辑后检查它是否正确定义。

我使用 GIMP 编辑过文件使用一像素铅笔工具(非常简单)，但您可能会使用自己的工具。这是我为聚焦状态定制的 9-patch:



注意:为简单起见，我仅使用了 mdpi 密度的图像。如果您想在任何设备上获得最佳效果，您就必须为多个屏幕密度创建 9 个补丁。全息图像 SearchView可以在 mdpi 中找到, hdpi和 xhdpi可绘制。

现在，我们需要创建可绘制的选择器，以便根据 View 状态显示正确的图像。创建文件 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>

我们将使用上面创建的 drawable 为 LinearLayout 设置背景包含文本字段的 View 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);
    }

}

最终效果

这是最终结果的屏幕截图:



我是怎么做到的

我认为值得一提的是我是如何做到这一点的，以便在自定义其他 View 时可以使用这种方法。

检查 View 布局

我已经查过了 SearchView布局看起来像。在 SearchView contructor人们可以找到一条使布局膨胀的行:

inflater.inflate(R.layout.search_view, this, true);

现在我们知道 SearchView布局在名为 res/layout/search_view.xml 的文件中.调查 search_view.xml我们可以找到一个内部 LinearLayout具有 search_plate 的元素(id android.widget.SearchView$SearchAutoComplete)在它里面(看起来像我们的搜索 View 文本字段):

    <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 .有一组与 SearchView 相关的属性默认 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值(value) is also set in that file .

现在，如果可以通过 R.styleable 访问此属性，那就太好了。 ，但不幸的是，事实并非如此。为了进行比较，请参阅 themes.xml 中都存在的其他主题属性。和 R.attr喜欢 textAppearance或 selectableItemBackground .如 searchViewTextField出现在 R.attr (和 R.stylable )我们可以在用 XML 为整个应用程序定义主题时简单地使用我们的可绘制选择器。例如:

<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根据 View 状态引用其他两个可绘制对象(稍后出现 9 个补丁)。您可以在 androiddrawables.com 上找到(几乎)所有 Android 版本的聚合 9-patch drawable。

定制

我们认出了 one of the 9-patches 中的蓝线，因此我们创建它的本地副本并根据需要更改颜色。