将工具栏用作操作栏时如何设置 SearchView 的样式？

Question

我使用 AppCompat v21 库在我的应用中使用 Toolbar 作为操作栏，如 Android 开发者博客上的 this post 中所述。我使用ThemeOverlay.AppCompat.Dark.ActionBar 主题对操作栏进行了样式设置，以便文本很轻。但是，我想让操作栏SearchView 的搜索建议弹出窗口在浅色背景上显示深色文本，我一直无法实现此效果。

这是我的操作栏Toolbar 的 XML：

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar_actionbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="@dimen/action_bar_elevation"
    app:theme="@style/ActionBarThemeOverlay"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> 

我已尝试扩展操作栏主题覆盖以设置SearchView 的样式：

<style name="ActionBarThemeOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="searchViewStyle">@style/Widget.AppCompat.Light.SearchView</item>
</style>

我已将相同的元素添加到我的主题中以进行良好的衡量：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="searchViewStyle">@style/Widget.AppCompat.Light.SearchView</item>
</style>

但是searchViewStyle 元素似乎没有任何效果。如何在此处设置SearchView 的样式？

Answer 1

根据AppCompat v21 announcement blog post：

AppCompat 提供 Lollipop 更新后的 SearchView API，该 API 更加可定制和可样式化（让掌声排队）。我们现在使用 Lollipop 样式结构，而不是旧的 searchView* 主题属性。

以下是您对 SearchView 的样式（values/themes.xml）：

<style name="Theme.MyTheme" parent="Theme.AppCompat">
   <item name="searchViewStyle">@style/MySearchViewStyle</item>
</style>
<style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
   <!-- Background for the search query section (e.g. EditText) -->
   <item name="queryBackground">...</item>
   <!-- Background for the actions section (e.g. voice, submit) -->
   <item name="submitBackground">...</item>
   <!-- Close button icon -->
   <item name="closeIcon">...</item>
   <!-- Search button icon -->
   <item name="searchIcon">...</item>
   <!-- Go/commit button icon -->
   <item name="goIcon">...</item>
   <!-- Voice search button icon -->
   <item name="voiceIcon">...</item>
   <!-- Commit icon shown in the query suggestion row -->
   <item name="commitIcon">...</item>
   <!-- Layout for query suggestion rows -->
   <item name="suggestionRowLayout">...</item>
</style>

在this blog post 中进一步研究。

Answer 2

在深入研究了源代码并进行了一些试验后，我想出了一个解决方案，并消除了一些混乱的根源。首先，需要在应用主题中设置SearchView样式：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="searchViewStyle">@style/MySearchViewStyle</item>
</style>

那么我们需要在searchViewStyle中设置suggestionRowLayout：

<style name="MySearchViewStyle" parent="Widget.AppCompat.Light.SearchView">
    <item name="suggestionRowLayout">@layout/search_suggestion_row</item>
</style>

在我的问题中，我假设我们可以使用@style/Widget.AppCompat.Light.SearchView 来获得简单的建议菜单，但事实证明并非如此；我们需要定义自己的布局。我基于 AppCompat v21 库中的 abc_search_dropdown_item_icons_2line.xml。

Answer 3

这是 search_suggestion_row.xml 的示例

    <?xml version="1.0" encoding="utf-8"?>
<!--
/*
 * Copyright (C) 2014 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="58dip"
                style="@style/RtlOverlay.Widget.AppCompat.Search.DropDown">

    <!-- Icons come first in the layout, since their placement doesn't depend on
         the placement of the text views. -->
    <android.support.v7.internal.widget.TintImageView
               android:id="@android:id/icon1"
               android:layout_width="@dimen/abc_dropdownitem_icon_width"
               android:layout_height="48dip"
               android:scaleType="centerInside"
               android:layout_alignParentTop="true"
               android:layout_alignParentBottom="true"
               android:visibility="invisible"
               style="@style/RtlOverlay.Widget.AppCompat.Search.DropDown.Icon1" />

    <android.support.v7.internal.widget.TintImageView
               android:id="@+id/edit_query"
               android:layout_width="48dip"
               android:layout_height="48dip"
               android:scaleType="centerInside"
               android:layout_alignParentTop="true"
               android:layout_alignParentBottom="true"
               android:background="?attr/selectableItemBackground"
               android:visibility="gone"
               style="@style/RtlOverlay.Widget.AppCompat.Search.DropDown.Query" />

    <android.support.v7.internal.widget.TintImageView
               android:id="@id/android:icon2"
               android:layout_width="48dip"
               android:layout_height="48dip"
               android:scaleType="centerInside"
               android:layout_alignWithParentIfMissing="true"
               android:layout_alignParentTop="true"
               android:layout_alignParentBottom="true"
               android:visibility="gone"
               style="@style/RtlOverlay.Widget.AppCompat.Search.DropDown.Icon2" />


    <!-- The subtitle comes before the title, since the height of the title depends on whether the
         subtitle is visible or gone. -->
    <TextView android:id="@android:id/text2"
              style="?android:attr/dropDownItemStyle"
              android:textAppearance="?attr/textAppearanceSearchResultSubtitle"
              android:singleLine="true"
              android:layout_width="match_parent"
              android:layout_height="29dip"
              android:paddingBottom="4dip"
              android:gravity="top"
              android:layout_alignWithParentIfMissing="true"
              android:layout_alignParentBottom="true"
              android:visibility="gone" />

    <!-- The title is placed above the subtitle, if there is one. If there is no
         subtitle, it fills the parent. -->
    <TextView android:id="@android:id/text1"
              style="?android:attr/dropDownItemStyle"
              android:textAppearance="?attr/textAppearanceSearchResultTitle"
              android:singleLine="true"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_centerVertical="true"
              android:layout_above="@android:id/text2" />

</RelativeLayout>
<!-- From: file:/usr/local/google/buildbot/repo_clients/https___googleplex-android.googlesource.com_a_platform_manifest.git/lmp-mr1-supportlib-release/frameworks/support/v7/appcompat/res/layout/abc_search_dropdown_item_icons_2line.xml -->

Answer 4

如果它不起作用；你可以为它编写代码。我在这篇文章中解释。它适用于 xamarin 形式，但我希望您可以将其应用于andoird native。您可以更改它的背景、图标、清除图标以及颜色

How to change searchbar cancel button image in xamarin forms