web-dev-qa-db-fra.com

Comment styler Android SearchView comme dans l'application Google Play Store?

J'essaie de styler une SearchView dans une toolbar pour ressembler/se comporter comme la SearchView dans le Google Play Store app. Il semble envelopper la recherche dans une vue carte, mais il semble également intégrer le comportement de la bascule bouton/tiroir.

C’est l’activité principale searchView, elle a un tiroir à bascule intégré

 MainActivity SearchView

lorsque vous cliquez dessus, la bascule du tiroir se change en flèche (lorsque vous cliquez dessus, le focus sera supprimé de la vue de recherche)

 enter image description here

Lorsque vous cliquez sur une application dans le magasin, vous accédez à la page de détail de l'application et vous obtenez une version qui ressemble à une icône de la vue de recherche en tant qu'élément d'action réduit avec le bouton haut:

 enter image description here

Enfin, si vous cliquez sur l’icône de recherche, elle se développe en tant qu’objet d’action (avec une sorte d’animation ondulée) et s’affiche tout au long de l’écran et intègre le bouton haut:

 enter image description here

Quand j'essaie de le faire moi-même, j'ai beaucoup de problèmes. J'ai essayé d'envelopper le searchview dans un cardview et le mettre dans une barre d'outils. Cela fonctionne mais il y a toujours du bourrage sur le côté gauche que je ne peux pas supprimer (j'ai essayé contentInsetStart, ça ne marche pas):

<Android.support.v7.widget.Toolbar
    Android:id="@+id/activityCatalogToolbar"
    Android:layout_width="match_parent"
    Android:layout_height="?attr/actionBarSize"
    Android:background="?attr/colorPrimary"
    app:popupTheme="@style/AppTheme.PopupOverlay"
    Android:theme="@style/AppTheme.AppBarOverlay"
    app:contentInsetStart="0dp"
    app:contentInsetLeft="0dp">

    <Android.support.v7.widget.CardView
        Android:id="@+id/activityCatalogSearchContainer"
        Android:layout_height="match_parent"
        Android:layout_width="wrap_content"
        Android:layout_gravity="end"
        Android:layout_marginTop="4dp"
        Android:layout_marginBottom="4dp"
        Android:layout_marginRight="8dp"
        Android:layout_marginLeft="8dp"
        app:cardCornerRadius="4dp"
        app:cardElevation="8dp">

        <Android.support.v7.widget.SearchView
            Android:id="@+id/activityCatalogSearch"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:queryHint=""
            Android:iconifiedByDefault="false"/>

    </Android.support.v7.widget.CardView>

</Android.support.v7.widget.Toolbar>

 enter image description here

J'ai également essayé de supprimer la barre d'outils et de la remplacer par juste un FrameLayout. Cela me permet de contrôler le remplissage, mais évidemment, je perds les fonctionnalités de la barre d’outils (bouton haut, etc.) et introduit également des problèmes de thème (icônes et texte disparaissent).

Quelqu'un a-t-il une idée de la façon dont il procède? Je ne veux pas ajouter une autre bibliothèque uniquement pour styler des widgets qui existent déjà dans le framework. Merci!

androidgoogle-playthemesappcompatsearchview
7
d370urn3ur

Vous pourriez essayer de plonger profondément dans ce projet:

https://Android.googlesource.com/platform/packages/apps/Dialer/

Pour Lollipop ou Guimauve, ou N, il a une SearchEditTextLayout qui correspond à vos besoins:

Avantage

  • un code créé par Google et non par une tierce partie.
8
R. Zagórski

Vous devez utiliser cette implémentation personnalisée de SearchView.

https://github.com/Quinny898/PersistentSearch

Android Studio:

Ajoutez le référentiel Sonatype si vous n'avez pas déjà:

maven {
        url "https://oss.sonatype.org/content/repositories/snapshots"
    }

Importez-le en tant que dépendance:

compile 'com.quinny898.library.persistentsearch:library:1.1.0-SNAPSHOT'

Dans votre mise en page:

<com.quinny898.library.persistentsearch.SearchBox
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:id="@+id/searchbox"
        />

Sortie:

 enter image description here

2
Ironman

J'essayais moi-même de construire cela. Nous avons fini par transformer le bouton de recherche en un bouton Image. un clic dessus déclencherait un fragment qui contiendrait un Edittext dans une mise en page ressemblant à ceci. et ce fragment consistait en une liste de consultation en dessous de cette zone de recherche pour afficher des suggestions.

Astuce: conservez la racine du fragment sans arrière-plan et définissez-la sur true pour obtenir les meilleurs résultats avec un volet transparent.

0
Kushan