使用 AppCompat 22.1.0 设置 AppCompat SearchView 的样式不起作用

Question

我为建议行定义了一个布局，但是在将 AppCompat 库更新到 22.1 后，styles.xml 中定义的布局被忽略了。

这是我的 styles.xml 文件（简化）：

<style name="Theme.Upp" parent="@style/MyApp">
    <item name="searchViewStyle">@style/SearchViewStyleMyApp</item>
</style>

<style name="SearchViewStyleMyApp" parent="Widget.AppCompat.SearchView">
    <!-- Background for the search query section (e.g. EditText) -->
    <!-- <item name="queryBackground">@android:color/black</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">@layout/layout_suggestion_entry</item>
</style>

即使我尝试更改 queryBackground 也无法正常工作。

有什么想法吗？

Answer 1

在查看了最新的库源代码后，它看起来像是为了使 SearchView 符合材料设计准则，因此默认样式没有下划线和提示图标。

要首先应用您自己的样式，您必须在styles.xml 中定义您的SearchView 样式，如下所示：

<style name="SearchViewStyleMyApp" parent="Widget.AppCompat.SearchView">
    <!-- Background for the search query section (e.g. EditText) -->
    <!-- <item name="queryBackground">@android:color/black</item> -->
    ...
    <!-- note that this is how you stye your hint icon -->
    <item name="searchHintIcon">@drawable/ab_icon_search</item>
</style>

然后你定义你的 ActionBar/Toolbar 主题覆盖：

<style name="MyThemeOverlay.ActionBar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="searchViewStyle">@style/SearchViewStyleMyApp</item>
</style>

下一步是将 ToolBar 添加到您的布局文件中，如下所示：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:theme="@style/MyThemeOverlay.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:elevation="4dp" />

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

最后一步是将您的工具栏设置为操作栏：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

    }
}

另请注意，您的主题必须扩展 Theme.AppCompat.NoActionBar

Answer 2

如果你没有使用Toolbar，要覆盖的样式是searchViewStyle下actionBarTheme：

<style name="AppTheme" parent="Theme.AppCompat.Light">
    ...
    <item name="actionBarTheme">@style/AppActionBarTheme</item>
</style>

<style name="AppActionBarTheme" parent="ThemeOverlay.AppCompat.ActionBar">
    <item name="searchViewStyle">@style/AppActionBarSearchView</item>
</style>

<style name="AppActionBarSearchView" parent="Widget.AppCompat.SearchView.ActionBar">
    <item name="queryBackground">@drawable/your_query_background</item>
    <item name="submitBackground">@drawable/your_submit_background</item>
    <item name="searchHintIcon">@drawable/your_search_hint_icon</item>
    <item name="queryHint">your query hint</item>
</style>

Answer 3

您可以编写代码来更改它的外观。 我在这篇文章中用图片进行了解释。你可以为你的项目参考这篇文章

您可以更改搜索视图的背景、图标，甚至是清除按钮（取消按钮）

How to change searchbar cancel button image in xamarin forms