Ich bin gerade dabei zu lernen, wie ich meine App in Materialdesign konvertiere, und ich bin gerade ein bisschen festgefahren. Ich habe die Symbolleiste hinzugefügt und meine Navigationsschublade über den gesamten Inhalt gelegt.
Ich versuche jetzt, eine erweiterbare Suche zu erstellen, die der in den Materialrichtlinien entspricht :
Dies ist, was ich gerade habe, und ich kann nicht herausfinden, wie ich es wie oben machen kann:
Dies ist mein Menü xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_search"
android:icon="@android:drawable/ic_menu_search"
android:title="Search"
app:showAsAction="always"
app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>
Das funktioniert, ich bekomme einen Menüpunkt, der in die Suchansicht erweitert wird, und ich kann meine Liste gut filtern. Es sieht allerdings nicht wie das erste Bild aus.
Ich habe versucht , zu verwenden , MenuItemCompat.setOnActionExpandListener()
auf , R.id.action_search
damit ich die Home - Symbol auf einen Zurück - Pfeil ändern könnte, aber das scheint nicht zu funktionieren. Im Hörer wird nichts abgefeuert. Selbst wenn das funktionieren würde, wäre es dem ersten Bild nicht sehr nahe.
Wie erstelle ich eine Suchansicht in der neuen Appcompat-Symbolleiste, die den Materialrichtlinien entspricht?
Antworten:
Dies ist eigentlich recht einfach, wenn Sie eine
android.support.v7
Bibliothek verwenden.Schritt 1
Deklarieren Sie einen Menüpunkt
Schritt 2
Erweitern
AppCompatActivity
und imonCreateOptionsMenu
Setup die SearchView.Ergebnis
quelle
navigate-back
Schaltfläche, sondern ein Suchsymbol, und der Abstand vom linken Bildschirmrand entspricht nicht dem zwischen demX
Symbol und dem rechten Bildschirmrand (habe ich nicht) Aktionsüberlauf). Habe die Frage hier gepostet , kannst du sie dir ansehen?searchView.setIconifiedByDefault(false);
deronCreateOptionsMenu
Funktion die Zeile hinzu .app:showAsAction="always"
und NICHTapp:showAsAction="ifRoom|collapseActionView"
Nach einer Woche voller Rätsel. Ich glaube, ich habe es herausgefunden.
Ich verwende jetzt nur einen EditText in der Symbolleiste. Dies wurde mir von oj88 auf reddit vorgeschlagen.
Ich habe jetzt
Folgendes : Zuerst habe ich in onCreate () meiner Aktivität den EditText mit einer Bildansicht auf der rechten Seite zur Symbolleiste wie folgt hinzugefügt:
Dies funktionierte, aber dann stieß ich auf ein Problem, bei dem onOptionsItemSelected () nicht aufgerufen wurde, als ich auf die Home-Schaltfläche tippte. Daher konnte ich die Suche nicht durch Drücken der Home-Taste abbrechen. Ich habe verschiedene Möglichkeiten ausprobiert, um den Klick-Listener auf der Home-Schaltfläche zu registrieren, aber sie haben nicht funktioniert.
Schließlich fand ich heraus, dass der ActionBarDrawerToggle, den ich hatte, die Dinge störte, also entfernte ich ihn. Dieser Listener begann dann zu arbeiten:
So kann ich die Suche jetzt mit der Home-Taste abbrechen, aber ich kann die Zurück-Taste noch nicht drücken, um sie abzubrechen. Also habe ich dies zu onBackPressed () hinzugefügt:
Ich habe diese Methode erstellt, um die Sichtbarkeit des EditText- und Menüelements umzuschalten:
Ich brauchte eine Möglichkeit, die Home-Schaltfläche in der Symbolleiste zwischen dem Schubladen-Symbol und der Zurück-Schaltfläche umzuschalten. Ich fand schließlich die Methode unten in dieser SO-Antwort . Obwohl ich es leicht modifiziert habe, um für mich sinnvoller zu sein:
Dies funktioniert, ich habe es geschafft, ein paar Fehler herauszufinden, die ich auf dem Weg gefunden habe. Ich denke nicht, dass es 100% ist, aber es funktioniert gut genug für mich.
BEARBEITEN: Wenn Sie die Suchansicht in XML anstelle von Java hinzufügen möchten, gehen Sie folgendermaßen vor:
toolbar.xml:
onCreate () Ihrer Aktivität:
quelle
Ich weiß, dass es ein alter Thread ist, aber ich poste immer noch die Bibliothek, die ich gerade erstellt habe. Hoffe das könnte jemandem helfen.
https://github.com/Shahroz16/material-searchview
quelle
Der erste Screenshot in Ihrer Frage ist kein öffentliches Widget. Die Unterstützung von SearchView (
android.support.v7.widget.SearchView
) ahmt SearchView ( ) von Android 5.0 Lollipop nachandroid.widget.SearchView
. Ihr zweiter Screenshot wird von anderen materiell gestalteten Apps wie Google Play verwendet.Die Suchansicht in Ihrem ersten Screenshot wird in Drive, YouTube und anderen Closed-Source-Google Apps verwendet. Glücklicherweise wird es auch im Android 5.0 Dialer verwendet . Sie können versuchen, die Ansicht zurück zu portieren, sie verwendet jedoch einige 5.0-APIs.
Die Klassen, die Sie sich ansehen möchten, sind:
SearchEditTextLayout , AnimUtils und DialtactsActivity, um zu verstehen, wie die Ansicht verwendet wird. Sie benötigen außerdem Ressourcen von ContactsCommon .
Viel Glück.
quelle
Hier ist mein Versuch, dies zu tun:
Schritt 1: Erstellen Sie einen Stil mit dem Namen
SearchViewStyle
Schritt 2: Erstellen Sie ein Layout mit dem Namen
simple_search_view_item.xml
Schritt 3: Erstellen Sie einen Menüpunkt für diese Suchansicht
Schritt 4: Blasen Sie das Menü auf
Ergebnis:
Das einzige, was ich nicht konnte, war, es die gesamte Breite des zu füllen
Toolbar
. Wenn mir jemand dabei helfen könnte, wäre das golden.quelle
I wasn't able to do was to make it fill the entire width
, welche Support-Bibliotheksversion verwenden Sie? Versuchen Sie, Einstellungenapp:contentInsetStartWithNavigation="0dp"
für Ihre Symbolleiste vorzunehmen.Um das gewünschte Aussehen von SearchView zu erzielen, können Sie Stile verwenden.
Zuerst müssen Sie
style
für Ihre SearchView erstellen, die ungefähr so aussehen sollte:Eine vollständige Liste der Attribute finden Sie in diesem Artikel im Abschnitt "SearchView".
Zweitens müssen Sie eine
style
für Ihre erstellenToolbar
, die als ActionBar verwendet wird:Und schließlich müssen Sie Ihr Toolbar-Designattribut folgendermaßen aktualisieren:
Ergebnis:
HINWEIS: Sie müssen Ihr
Toolbar
Designattribut direkt ändern . Wenn Sie nur Ihr Hauptthemaattribut aktualisierensearchViewStyle
, hat dies keine Auswirkungen auf IhrToolbar
.quelle
navigate-back
(Pfeil nach hinten) undcancel
(die x) Symbole selbst hinzugefügt oder sie wurden automatisch hinzugefügt?navigate-back
wird immer angezeigt,clear
wird erst angezeigt, nachdem Sie eine Suchabfrage geschrieben haben.Eine andere Möglichkeit, den gewünschten Effekt zu erzielen, ist die Verwendung dieser Bibliothek für die Materialsuchansicht . Der Suchverlauf wird automatisch verarbeitet, und es können auch Suchvorschläge für die Ansicht bereitgestellt werden.
Beispiel: (Es wird auf Portugiesisch gezeigt, funktioniert aber auch auf Englisch und Italienisch).
Konfiguration
Bevor Sie diese Bibliothek verwenden können, müssen Sie eine Klasse mit dem Namen
MsvAuthority
innerhalb desbr.com.mauker
Pakets in Ihrem App-Modul implementieren , und es sollte eine öffentliche statische String-Variable namens aufgerufen werdenCONTENT_AUTHORITY
. Geben Sie ihm den gewünschten Wert und vergessen Sie nicht, Ihrer Manifestdatei denselben Namen hinzuzufügen. Die Bibliothek verwendet diese Datei, um die Berechtigung des Inhaltsanbieters festzulegen.Beispiel:
MsvAuthority.java
AndroidManifest.xml
Verwendung
Fügen Sie zur Verwendung die Abhängigkeit hinzu:
Fügen Sie dann in Ihrer
Activity
Layoutdatei Folgendes hinzu:Danach müssen Sie nur das bekommen
MaterialSearchView
Referenz unter VerwendunggetViewById()
, und öffnen Sie es oder schließen Sie es mitMaterialSearchView#openSearch()
undMaterialSearchView#closeSearch()
.PS: Es ist möglich, die Ansicht nicht nur von der zu öffnen und zu schließen
Toolbar
. Sie können dieopenSearch()
Methode grundsätzlich von jedem beliebigen verwendenButton
, z. B. einer schwebenden Aktionsschaltfläche.Sie können die Ansicht auch über die Schaltfläche Zurück schließen, indem Sie folgende Schritte ausführen:
Weitere Informationen zur Verwendung der Bibliothek finden Sie auf der Github-Seite .
quelle
Im Folgenden wird eine Suchansicht erstellt, die mit der in Google Mail identisch ist, und zur angegebenen Symbolleiste hinzugefügt. Sie müssen nur Ihre eigene "ViewUtil.convertDpToPixel" -Methode implementieren.
quelle