wake-up-neo.net

Wie gestalte ich Android SearchView wie in der Google Play Store App?

Ich versuche, eine SearchView in einer toolbar so zu formatieren, dass sie wie die SearchView im Google Play Store app aussieht/sich verhält. Es scheint die Suchansicht in eine Kartenansicht zu verwandeln, aber es scheint auch das Schaltflächen-/Schubladen-Umschaltverhalten zu integrieren.

Dies ist die Hauptaktivität searchView, sie hat eine integrierte Schubladenumschaltung

 MainActivity SearchView

wenn Sie darauf klicken, ändert sich das Umschalten der Schublade in Pfeil (wenn Sie darauf klicken, wird der Fokus aus der Suchansicht entfernt).

 enter image description here

Wenn Sie im Store auf eine App klicken, rufen Sie die App-Detailseite auf und es wird eine symbolisierte Version der Suchansicht als ausgeblendetes Aktionselement mit Aufwärtsschaltfläche angezeigt:

 enter image description here

Wenn Sie schließlich auf das Suchsymbol klicken, wird es als Aktionselement (mit einer Art Ripple-Animation) erweitert und auf dem gesamten Bildschirm angezeigt.

 enter image description here

Wenn ich es selbst versuche, habe ich viele Probleme. Ich habe versucht, die Suchansicht in eine Kartenansicht zu packen und diese in eine Symbolleiste zu packen. Es funktioniert, aber es gibt immer Auffüllungen auf der linken Seite, die ich nicht entfernen kann (ich habe versucht, contentInsetStart, funktioniert nicht):

<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

Ich habe auch versucht, die Symbolleiste zu entfernen und durch ein FrameLayout zu ersetzen. Dadurch kann ich das Auffüllen steuern, aber offensichtlich verliere ich die Funktionen der Symbolleiste (Aufwärtsschaltfläche usw.) und führe auch Probleme mit den Themen ein (Symbole und Text verschwinden).

Hat jemand eine Idee, wie sie das machen? Ich möchte keine weitere Bibliothek hinzufügen, um Widgets zu formatieren, die bereits im Framework vorhanden sind. Vielen Dank!

androidgoogle-playthemesappcompatsearchview
7
d370urn3ur

Sie könnten versuchen, tief in dieses Projekt einzutauchen:

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

Für Lollipop oder Marshmallow oder N gibt es eine SearchEditTextLayout , die Sie benötigen:

Vorteil

  • ein von Google erstellter Code, nicht ein Dritter.
8
R. Zagórski

Sie müssen diese benutzerdefinierte Implementierung von SearchView verwenden.

https://github.com/Quinny898/PersistentSearch

Android Studio:

Fügen Sie das Sonatype-Repository hinzu, wenn Sie noch nicht

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

Importiere es als Abhängigkeit:

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

In Ihrem Layout:

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

Ausgabe :

 enter image description here

2
Ironman

Ich habe selbst versucht, das zu bauen. Am Ende wurde die Suchschaltfläche zum ImageButton. Ein Klick darauf würde ein Fragment auslösen, das oben hinzugefügt wird und ein Edittext innerhalb eines Layouts enthält, das so aussehen sollte. Dieses Fragment bestand aus einer Listenansicht unter diesem Suchfeld, um Vorschläge anzuzeigen.

Tipp: Lassen Sie das Grundlayout des Fragments ohne Hintergrund und klicken Sie auf true, um die besten Ergebnisse mit einem transparenten Fensterbereich zu erzielen

0
Kushan