web-dev-qa-db-fra.com

Comment styliser SearchView lors de l'utilisation d'une barre d'outils en tant que barre d'actions?

J'utilise Toolbar comme barre d'action dans mon application à l'aide de la bibliothèque AppCompat v21, comme décrit dans ce message sur le blog des développeurs Android. J'ai stylé la barre d'action en utilisant le thème ThemeOverlay.AppCompat.Dark.ActionBar pour que le texte soit clair. Cependant, j'aimerais que la barre de suggestion de recherche de la barre d'action SearchView affiche du texte sombre sur un fond clair, et je n'ai pas pu obtenir cet effet.

Voici le code XML pour ma barre d’action 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"/>

J'ai essayé d'étendre la superposition de thèmes de la barre d'action au style SearchView:

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

J'ai ajouté ce même élément à mon thème principal pour faire bonne mesure:

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

Mais les éléments searchViewStyle ne semblent pas avoir d'effet. Comment puis-je appeler la SearchView ici?

androidandroid-actionbarandroid-5.0-lollipopsearchviewandroid-toolbar
25
Ben

Après avoir fouillé dans le code source et expérimenté un peu, j'ai trouvé une solution et élucidé quelques sources de confusion. Tout d'abord, le style SearchView doit être défini dans le thème de l'application:

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

Ensuite, nous devons définir la suggestionRowLayout dans la searchViewStyle:

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

Dans ma question, j'ai supposé que nous pourrions utiliser @style/Widget.AppCompat.Light.SearchView pour obtenir un menu de suggestion clair, mais il s'avère que ce n'est pas le cas; nous devons définir notre propre mise en page. J'ai basé le mien sur abc_search_dropdown_item_icons_2line.xml de la bibliothèque AppCompat v21.

10
Ben

Selon le billet de blog d’annonce AppCompat v21 :

AppCompat offre la nouvelle version de l’API SearchView de Lollipop, qui est beaucoup plus personnalisable et stylable (placez les applaudissements en file d’attente). Nous utilisons maintenant la structure de style Lollipop au lieu des anciens attributs de thème searchView *.

Voici comment vous appelez SearchView (dans 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>

Comme plus de recherches dans cet article de blog .

43
ianhanniballake

Voici un exemple de 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 -->
1
awsleiman

Si cela ne fonctionne pas, vous pouvez coder pour cela. J'explique dans ce post. C’est pour les formes xamarin, mais j’espère que vous pourrez l’appliquer au natif d’andoird. Vous pouvez changer son fond, son icône, son icône vide ainsi que sa couleur

Comment changer la barre de recherche annuler une image de bouton dans les formulaires xamarin

0
vu ledang