Obecnie uczę się, jak przekonwertować moją aplikację na Material Design i trochę utknąłem. Dodałem pasek narzędzi, a moja szuflada nawigacyjna nakłada całą zawartość.
Próbuję teraz utworzyć rozwijane wyszukiwanie, które wygląda tak, jak w wytycznych dotyczących materiałów :
Oto, co mam teraz i nie mogę wymyślić, jak to zrobić, jak powyżej:
To jest moje menu 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>
To działa, otrzymuję element menu, który rozwija się do SearchView i mogę dobrze filtrować moją listę. Nie wygląda to jednak w żaden sposób jak na pierwszym zdjęciu.
Próbowałem użyć MenuItemCompat.setOnActionExpandListener()
na R.id.action_search
tak mogę zmienić ikonę domowego do tyłu strzałkę, ale to nie wydają się działać. W słuchaczu nic nie odpala. Nawet gdyby to zadziałało, nadal nie byłoby bardzo zbliżone do pierwszego obrazu.
Jak utworzyć SearchView na nowym pasku narzędziowym appcompat, który wygląda jak wytyczne dotyczące materiałów?
Odpowiedzi:
W rzeczywistości jest to całkiem łatwe, jeśli używasz
android.support.v7
biblioteki.Krok 1
Zadeklaruj element menu
Krok 2
Rozszerz
AppCompatActivity
iwonCreateOptionsMenu
konfiguracji SearchView.Wynik
źródło
navigate-back
przycisku, a raczej ikonę wyszukiwania, a jego odległość od lewej krawędzi ekranu nie jest taka sama jak międzyX
ikoną a prawą krawędzią ekranu (nie mam przepełnienie akcji). Opublikowałem pytanie tutaj , czy możesz się temu przyjrzeć?searchView.setIconifiedByDefault(false);
doonCreateOptionsMenu
funkcji.app:showAsAction="always"
i NIEapp:showAsAction="ifRoom|collapseActionView"
Po tygodniu zastanawiania się nad tym. Myślę, że to rozgryzłem.
Teraz używam tylko EditText na pasku narzędzi. Zasugerował mi to oj88 na reddicie.
Mam teraz to:
Najpierw w onCreate () mojej aktywności dodałem EditText z widokiem obrazu po prawej stronie do paska narzędzi w następujący sposób:
To zadziałało, ale potem natknąłem się na problem polegający na tym, że onOptionsItemSelected () nie był wywoływany po dotknięciu przycisku strony głównej. Nie mogłem więc anulować wyszukiwania, naciskając przycisk strony głównej. Wypróbowałem kilka różnych sposobów rejestrowania odbiornika kliknięć na przycisku strony głównej, ale nie zadziałały.
W końcu dowiedziałem się, że ActionBarDrawerToggle, który miałem, przeszkadza, więc go usunąłem. Ten słuchacz zaczął wtedy pracować:
Mogę więc teraz anulować wyszukiwanie za pomocą przycisku strony głównej, ale nie mogę jeszcze nacisnąć przycisku Wstecz, aby je anulować. Więc dodałem to do onBackPressed ():
Utworzyłem tę metodę, aby przełączać widoczność EditText i pozycji menu:
Potrzebowałem sposobu, aby przełączyć przycisk strony głównej na pasku narzędzi między ikoną szuflady a przyciskiem Wstecz. W końcu znalazłem metodę poniżej w tej odpowiedzi TAK . Chociaż nieco to zmodyfikowałem, aby miało dla mnie więcej sensu:
To działa, udało mi się rozwiązać kilka błędów, które znalazłem po drodze. Nie wydaje mi się, żeby to było w 100%, ale dla mnie działa wystarczająco dobrze.
EDYCJA: Jeśli chcesz dodać widok wyszukiwania w XML zamiast w Javie, zrób to:
toolbar.xml:
onCreate () Twojej aktywności:
źródło
Wiem, że to stary wątek, ale wciąż publikuję bibliotekę, którą właśnie stworzyłem. Mam nadzieję, że to może komuś pomóc.
https://github.com/Shahroz16/material-searchview
źródło
Pierwszy zrzut ekranu w Twoim pytaniu nie jest publicznym widżetem. Obsługa SearchView (
android.support.v7.widget.SearchView
) naśladuje funkcję SearchView ( ) systemu Android 5.0 Lollipopandroid.widget.SearchView
. Twój drugi zrzut ekranu jest używany przez inne aplikacje zaprojektowane dla materiałów, takie jak Google Play.Widok wyszukiwania na pierwszym zrzucie ekranu jest używany w Dysku, YouTube i innych Google Apps o zamkniętym kodzie źródłowym. Na szczęście jest również używany w programie Android 5.0 Dialer . Możesz spróbować przenieść widok wstecz, ale używa on niektórych interfejsów API 5.0.
Klasy, którym będziesz chciał się przyjrzeć, to:
SearchEditTextLayout , AnimUtils i DialtactsActivity, aby zrozumieć, jak używać widoku. Będziesz także potrzebować zasobów z ContactsCommon .
Powodzenia.
źródło
Oto moja próba zrobienia tego:
Krok 1: Utwórz styl o nazwie
SearchViewStyle
Krok 2: Utwórz układ o nazwie
simple_search_view_item.xml
Krok 3: Utwórz element menu dla tego widoku wyszukiwania
Krok 4: Napompuj menu
Wynik:
Jedyne, czego nie byłem w stanie zrobić, to sprawić, by wypełnił całą szerokość
Toolbar
. Gdyby ktoś mógł mi w tym pomóc, to byłby złoty.źródło
I wasn't able to do was to make it fill the entire width
, której wersji biblioteki obsługi używasz? Spróbuj ustawićapp:contentInsetStartWithNavigation="0dp"
pasek narzędzi.Aby uzyskać pożądany wygląd SearchView, możesz użyć stylów.
Najpierw musisz utworzyć
style
dla swojego SearchView widok, który powinien wyglądać mniej więcej tak:Pełną listę atrybutów można znaleźć w tym artykule w sekcji „SearchView”.
Po drugie, musisz utworzyć
style
dla swojegoToolbar
, który jest używany jako ActionBar:Na koniec musisz zaktualizować atrybut motywu paska Toolbar w ten sposób:
Wynik:
UWAGA: Musisz bezpośrednio zmienić
Toolbar
atrybut motywu. Jeśli po prostu zaktualizujesz swój głównysearchViewStyle
atrybut motywu , nie wpłynie to na twojeToolbar
.źródło
navigate-back
(strzałka wstecz) icancel
(x) ikony, czy zostały dodane automatycznie?navigate-back
jest zawsze wyświetlane,clear
jest wyświetlane dopiero po wpisaniu zapytania wyszukiwania.Innym sposobem na osiągnięcie pożądanego efektu jest użycie tej biblioteki Material Search View . Obsługuje automatycznie historię wyszukiwania i możliwe jest również dostarczanie sugestii wyszukiwania do widoku.
Przykład: (jest wyświetlany w języku portugalskim, ale działa również w języku angielskim i włoskim).
Ustawiać
Zanim będzie można użyć tej biblioteki, należy zaimplementować klasę o nazwie
MsvAuthority
wewnątrzbr.com.mauker
pakietu w module aplikacji i powinna ona mieć publiczną statyczną zmienną String o nazwieCONTENT_AUTHORITY
. Nadaj mu żądaną wartość i nie zapomnij dodać tej samej nazwy w pliku manifestu. Biblioteka użyje tego pliku do ustawienia uprawnień dostawcy treści.Przykład:
MsvAuthority.java
AndroidManifest.xml
Stosowanie
Aby z niego skorzystać, dodaj zależność:
Następnie w
Activity
pliku układu dodaj następujące elementy:Następnie wystarczy pobrać
MaterialSearchView
odniesienie za pomocągetViewById()
i otworzyć lub zamknąć za pomocąMaterialSearchView#openSearch()
iMaterialSearchView#closeSearch()
.PS: Otwieranie i zamykanie widoku jest możliwe nie tylko z poziomu
Toolbar
. Możesz użyćopenSearch()
metody z praktycznie dowolnegoButton
, takiego jak pływający przycisk akcji.Możesz również zamknąć widok za pomocą przycisku Wstecz, wykonując następujące czynności:
Aby uzyskać więcej informacji na temat korzystania z biblioteki, odwiedź stronę github .
źródło
Poniższe czynności utworzą widok wyszukiwania identyczny z tym w Gmailu i dodają go do danego paska narzędzi. Musisz tylko zaimplementować własną metodę „ViewUtil.convertDpToPixel”.
źródło