Actualmente estoy en el proceso de aprender cómo convertir mi aplicación a Diseño de materiales y estoy un poco atascado en este momento. Tengo la barra de herramientas agregada y he hecho que mi cajón de navegación superponga todo el contenido.
Ahora estoy tratando de crear una búsqueda expansible que se parezca a la de las pautas de material :
esto es lo que tengo ahora y no puedo encontrar la manera de hacerlo como lo anterior:
Este es mi 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>
Eso funciona, obtengo un elemento de menú que se expande a SearchView y puedo filtrar bien mi lista. Sin embargo, no se parece en nada a la primera imagen.
He intentado utilizar MenuItemCompat.setOnActionExpandListener()
el R.id.action_search
modo podría cambiar el icono de inicio para una flecha hacia atrás, pero eso no parece funcionar. Nada se dispara en el oyente. Incluso si eso funcionara, todavía no estaría muy cerca de la primera imagen.
¿Cómo creo un SearchView en la nueva barra de herramientas de appcompat que se parece a las pautas de material?
Respuestas:
En realidad, es bastante fácil hacer esto, si está utilizando la
android.support.v7
biblioteca.Paso 1
Declarar un elemento del menú
Paso 2
Extienda
AppCompatActivity
y en laonCreateOptionsMenu
configuración el SearchView.Resultado
fuente
navigate-back
botón, sino un ícono de búsqueda, y su distancia desde el borde izquierdo de la pantalla no es la misma que existe entre elX
ícono y el borde derecho de la pantalla (no tengo desbordamiento de acción). Ha publicado la pregunta aquí , ¿puedes investigarlo?searchView.setIconifiedByDefault(false);
a laonCreateOptionsMenu
función.app:showAsAction="always"
y NOapp:showAsAction="ifRoom|collapseActionView"
Después de una semana de desconcierto sobre esto. Creo que lo he descubierto.
Ahora estoy usando solo un EditText dentro de la barra de herramientas. Esto me lo sugirió oj88 en reddit.
Ahora tengo esto:
Primero en onCreate () de mi actividad, agregué EditText con una vista de imagen en el lado derecho a la barra de herramientas de esta manera:
Esto funcionó, pero luego me encontré con un problema en el que onOptionsItemSelected () no se llamaba cuando tocaba el botón de inicio. Así que no pude cancelar la búsqueda presionando el botón de inicio. Intenté algunas formas diferentes de registrar el oyente de clics en el botón de inicio, pero no funcionaron.
Finalmente descubrí que el ActionBarDrawerToggle que tenía estaba interfiriendo con las cosas, así que lo eliminé. Este oyente luego comenzó a trabajar:
Así que ahora puedo cancelar la búsqueda con el botón de inicio, pero aún no puedo presionar el botón Atrás para cancelarla. Así que agregué esto a onBackPressed ():
Creé este método para alternar la visibilidad del EditText y el elemento del menú:
Necesitaba una forma de alternar el botón de inicio en la barra de herramientas entre el icono del cajón y el botón de retroceso. Finalmente encontré el siguiente método en esta respuesta SO . Aunque lo modifiqué un poco para que tuviera más sentido para mí:
Esto funciona, me las arreglé para resolver algunos errores que encontré en el camino. No creo que sea 100%, pero funciona lo suficientemente bien para mí.
EDITAR: si desea agregar la vista de búsqueda en XML en lugar de Java, haga esto:
toolbar.xml:
onCreate () de su actividad:
fuente
Sé que es un hilo viejo pero aún publica la biblioteca que acabo de hacer. Espero que esto pueda ayudar a alguien.
https://github.com/Shahroz16/material-searchview
fuente
La primera captura de pantalla en su pregunta no es un widget público. El soporte SearchView (
android.support.v7.widget.SearchView
) imita el SearchView ( ) de Android 5.0 Lollipopandroid.widget.SearchView
. Su segunda captura de pantalla es utilizada por otras aplicaciones diseñadas materiales como Google Play.SearchView en su primera captura de pantalla se usa en Drive, YouTube y otras aplicaciones de código cerrado de Google. Afortunadamente, también se usa en Android 5.0 Dialer . Puede intentar realizar una copia de seguridad de la vista, pero utiliza algunas API 5.0.
Las clases que querrás ver son:
SearchEditTextLayout , AnimUtils y DialtactsActivity para comprender cómo usar la Vista. También necesitará recursos de ContactsCommon .
La mejor de las suertes.
fuente
Aquí está mi intento de hacer esto:
Paso 1: crea un estilo llamado
SearchViewStyle
Paso 2: crea un diseño llamado
simple_search_view_item.xml
Paso 3: cree un elemento de menú para esta vista de búsqueda
Paso 4: infla el menú
Resultado:
Lo único que no pude hacer fue hacerlo llenar todo el ancho del
Toolbar
. Si alguien pudiera ayudarme a hacer eso, entonces sería dorado.fuente
I wasn't able to do was to make it fill the entire width
, ¿qué versión de biblioteca de soporte estás usando? Intenta configurarapp:contentInsetStartWithNavigation="0dp"
tu barra de herramientas.Para lograr el aspecto deseado de SearchView, puede usar estilos.
Primero, debe crear
style
para su SearchView, que debería verse así:Lista completa de atributos que puede encontrar en este artículo, en la sección "SearchView".
En segundo lugar, debe crear un
style
para suToolbar
, que se utiliza como ActionBar:Y finalmente necesita actualizar su atributo de tema de la barra Google de esta manera:
Resultado:
NOTA: debe cambiar su
Toolbar
atributo de tema directamente. Si solo actualiza susearchViewStyle
atributo de tema principal , no afectaría suToolbar
.fuente
navigate-back
(flecha hacia atrás) ycancel
(los x) íconos tú mismo o se agregaron automáticamente?navigate-back
siempre se muestra,clear
se muestra solo después de escribir alguna consulta de búsqueda.Otra forma de lograr el efecto deseado es usar esta biblioteca de Vista de búsqueda de material . Maneja el historial de búsqueda automáticamente y también es posible proporcionar sugerencias de búsqueda a la vista.
Muestra: (se muestra en portugués, pero también funciona en inglés e italiano).
Preparar
Antes de poder usar esta lib, debe implementar una clase nombrada
MsvAuthority
dentro delbr.com.mauker
paquete en el módulo de su aplicación, y debe tener una variable pública de cadena estática llamadaCONTENT_AUTHORITY
. Dele el valor que desea y no olvide agregar el mismo nombre en su archivo de manifiesto. La biblioteca utilizará este archivo para establecer la autoridad del proveedor de contenido.Ejemplo:
MsvAuthority.java
AndroidManifest.xml
Uso
Para usarlo, agregue la dependencia:
Y luego, en su
Activity
archivo de diseño, agregue lo siguiente:Después de eso, solo necesitará obtener la
MaterialSearchView
referencia usandogetViewById()
, y abrirla o cerrarla usandoMaterialSearchView#openSearch()
yMaterialSearchView#closeSearch()
.PD: es posible abrir y cerrar la vista no solo desde
Toolbar
. Puede utilizar elopenSearch()
método desde prácticamente cualquierButton
, como un botón de acción flotante.También puede cerrar la vista con el botón Atrás, haciendo lo siguiente:
Para obtener más información sobre cómo usar la lib, consulte la página de github .
fuente
Lo siguiente creará un SearchView idéntico al de Gmail y lo agregará a la Barra de herramientas dada. Solo tendrá que implementar su propio método "ViewUtil.convertDpToPixel".
fuente