使用 AppCompat 22.1.0 设置 AppCompat SearchView 样式不起作用
Styling AppCompat SearchView with AppCompat 22.1.0 is not working
我为建议行定义了布局,但将 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,它也不起作用。
知道为什么吗?
查看最新的库源代码后,它看起来是为了让 SearchView
符合 material 设计指南,因此默认样式没有下划线和提示图标。
要首先应用您自己的样式,您必须像这样在 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>
最后一步是将您的 Toolbar 设置为像 ActionBar 一样工作:
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
如果您不使用 Toolbar
,要覆盖的样式是 actionBarTheme
下的 searchViewStyle
:
<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>
您可以编写代码来更改它的外观。
我在这个 post 中用图片解释了。你可以为你的项目
参考这个post
您可以更改搜索视图的背景、图标,甚至清除按钮(取消按钮)
我为建议行定义了布局,但将 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,它也不起作用。
知道为什么吗?
查看最新的库源代码后,它看起来是为了让 SearchView
符合 material 设计指南,因此默认样式没有下划线和提示图标。
要首先应用您自己的样式,您必须像这样在 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>
最后一步是将您的 Toolbar 设置为像 ActionBar 一样工作:
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
如果您不使用 Toolbar
,要覆盖的样式是 actionBarTheme
下的 searchViewStyle
:
<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>
您可以编写代码来更改它的外观。 我在这个 post 中用图片解释了。你可以为你的项目
参考这个post您可以更改搜索视图的背景、图标,甚至清除按钮(取消按钮)