将工具栏用作操作栏时如何设置 SearchView 的样式？
How can I style the SearchView when using a Toolbar as an Action Bar?
我在使用 AppCompat v21 库的应用程序中使用 Toolbar 作为操作栏，如 Android 开发者博客上的 this post 所述。我使用 ThemeOverlay.AppCompat.Dark.ActionBar 主题设计了操作栏的样式，以便文本变亮。但是，我想把Action Bar SearchView的搜索建议弹窗做成浅色背景的深色文本，我一直无法实现这个效果。
这是我的操作栏 XML Toolbar:
<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 的样式？
根据 AppCompat v21 announcement blog post:
AppCompat 提供了 Lollipop 的更新版 SearchView 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 中的进一步研究。
在深入研究源代码并进行一些试验后，我提出了一个解决方案并消除了一些混淆来源。首先需要在应用主题中设置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。
下面是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 -->
如果它不起作用，您可以为其编写代码。我在这解释post。它适用于 xamarin 表单，但我希望您可以将其应用于 andoird native。您可以更改它的背景、图标、清除图标以及颜色
我在使用 AppCompat v21 库的应用程序中使用 Toolbar 作为操作栏，如 Android 开发者博客上的 this post 所述。我使用 ThemeOverlay.AppCompat.Dark.ActionBar 主题设计了操作栏的样式，以便文本变亮。但是，我想把Action Bar SearchView的搜索建议弹窗做成浅色背景的深色文本，我一直无法实现这个效果。
这是我的操作栏 XML Toolbar:
<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 的样式？
根据 AppCompat v21 announcement blog post:
AppCompat 提供了 Lollipop 的更新版 SearchView 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 中的进一步研究。
在深入研究源代码并进行一些试验后，我提出了一个解决方案并消除了一些混淆来源。首先需要在应用主题中设置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。
下面是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 -->
如果它不起作用，您可以为其编写代码。我在这解释post。它适用于 xamarin 表单，但我希望您可以将其应用于 andoird native。您可以更改它的背景、图标、清除图标以及颜色