Cajón de navegación (Google+ vs. YouTube)


403

¿Alguien sabe cómo implementar un menú deslizante como algunas de las mejores aplicaciones de hoy?

Otras preguntas de desbordamiento de pila no han tenido ninguna respuesta sobre cómo hacer esto, por lo que estoy tratando de recopilar tanta información para ayudar a otros. Todas las aplicaciones que menciono a continuación hacen un gran trabajo al implementar el menú de diapositivas.

1. Google Plus (a partir del 7/7/12)

Captura de pantalla del menú deslizable de Google+

Solo puede pasar de la primera pantalla a la segunda pantalla haciendo clic en el logotipo de G + en la esquina superior izquierda. Observe que toda la pantalla se mueve desde su posición y se desplaza hacia el lado derecho de la pantalla (incluida la barra de acción). Para volver a la primera pantalla, puede deslizar el lado derecho nuevamente hacia el foco o puede hacer clic en el ícono G + nuevamente.

2. YouTube (a partir del 7/7/12)

Captura de pantalla del menú deslizable de YouTube

Puede pasar de la primera pantalla a la segunda pantalla utilizando dos métodos. Haga clic en el logotipo de YouTube en la esquina superior izquierda o puede usar un gesto de deslizar para moverlo hacia la derecha. Esto ya es diferente de la aplicación G +. En segundo lugar, puede ver que la barra de acción permanece fija (a diferencia de G +). Por último, para recuperar la pantalla original, funciona igual que G +.


1
Por lo que parece, no muchas personas han tenido experiencia trabajando en algo como esto. Sugiero tratar de implementar algo usted mismo y llegar a SO con problemas específicos que pueda encontrar.
David Titarenco

77
Sí, por eso publiqué una pregunta SO en otra que creo que merece un poco más de atención. Me pregunto si hay alguien por ahí que haya logrado con éxito esto y le encantaría compartir su sabiduría.
EGHDK

1
@EGHDK Echa un vistazo a esta serie de artículos: android.cyrilmottier.com/?p=658
Alex Lockwood

2
Respondí esta pregunta hace un tiempo, pero volví a enfatizar que Prixing tiene el mejor menú desplegable que existe ... de lejos. Es absolutamente hermoso, perfectamente suave, y avergüenza a Facebook, Google+ y YouTube. EverNote también es bastante bueno ... pero aún no es tan perfecto como Prixing. Echa un vistazo a esta serie de publicaciones sobre cómo se implementó el menú desplegable (¡nada menos que del desarrollador principal en Prixing!).
Alex Lockwood

2
Con la revisión 13 del paquete de soporte de Android (mayo de 2013), hay DrawerLayout para crear un cajón de navegación que se puede extraer desde el borde de una ventana. Y, el cajón de navegación es un patrón de diseño ahora. developer.android.com/tools/extras/support-library.html
Wubao Li

Respuestas:


152

Editar # 3:

¡El patrón del cajón de navegación se describe oficialmente en la documentación de Android!

ingrese la descripción de la imagen aquí Mira los siguientes enlaces:

  • Los documentos de diseño se pueden encontrar aquí .
  • Los documentos para desarrolladores se pueden encontrar aquí .

Editar # 2:

Roman Nurik (un ingeniero de diseño de Android en Google) ha confirmado que el comportamiento recomendado es no mover la barra de acción al abrir el cajón (como la aplicación de YouTube). Ver esta publicación de Google+ .


Editar # 1:

Respondí esta pregunta hace un tiempo, pero volví a enfatizar que Prixing tiene el mejor menú desplegable que existe ... de lejos . Es absolutamente hermoso, perfectamente suave, y avergüenza a Facebook, Google+ y YouTube. EverNote también es bastante bueno ... pero aún no es tan perfecto como Prixing. Echa un vistazo a esta serie de publicaciones sobre cómo se implementó el menú desplegable (¡nada menos que del desarrollador principal en el propio Prixing!).


Respuesta original

Adam Powell y Richard Fulcher hablan sobre esto a las 49:47 - 52:50 en la charla de E / S de Google titulada "Navegación en Android".

Para resumir su respuesta, a partir de la fecha de esta publicación, el menú de navegación deslizable no es oficialmente parte del estándar de diseño de aplicaciones de Android. Como probablemente haya descubierto, actualmente no hay soporte nativo para esta característica, pero se habló de hacer de esto una adición a una próxima revisión del paquete de soporte.

Con respecto a las aplicaciones de YouTube y G +, parece extraño que se comporten de manera diferente. Mi mejor conjetura es que la razón por la cual la aplicación de YouTube corrige la posición de la barra de acción es,

  1. Una de las opciones de navegación más importantes para los usuarios que usan la aplicación de YouTube es la búsqueda, que se realiza en la SearchViewbarra de acción. Tendría sentido hacer que la barra de acción sea estática a este respecto, ya que permitiría al usuario tener siempre la opción de buscar nuevos videos.

  2. La aplicación G + utiliza a ViewPagerpara mostrar su contenido, por lo que no tendría mucho sentido hacer que el menú desplegable sea específico para el contenido del diseño (es decir, todo debajo de la barra de acción). Se supone que deslizar proporciona un medio de navegación entre páginas, no un medio de navegación global. Esta podría ser la razón por la que decidieron hacerlo de manera diferente en la aplicación de Google+ que en la aplicación de YouTube.

    En otra nota, consulte la aplicación Google Play para obtener otra versión del "menú desplegable" (cuando esté en la página más a la izquierda, deslice hacia la izquierda y aparecerá un menú desplegable, "media página").

Tienes razón en que este comportamiento no es muy consistente, pero no parece que haya un consenso del 100% dentro del equipo de Android sobre cómo se debe implementar este comportamiento todavía. No me sorprendería si en el futuro las aplicaciones se actualicen para que la navegación en ambas aplicaciones sea idéntica (parecían muy interesados ​​en hacer que la navegación sea coherente en todas las aplicaciones hechas por Google en la charla).


73
Prixing, Evernote y Spotify tienen equipos bastante grandes que escriben sus aplicaciones . Soy el CEO de Prixing, y me gustaría precisar que solo tenemos un desarrollador de Android real (pero uno muy talentoso, Cyril Mottier)
EricLarch

Con la revisión 13 del paquete de soporte de Android (mayo de 2013), hay DrawerLayout para crear un cajón de navegación que se puede extraer desde el borde de una ventana. Y, el cajón de navegación es un patrón de diseño ahora. developer.android.com/tools/extras/support-library.html
Wubao Li

aunque NavigationDrawer está presente en V4, necesita ActionBar, que aún no se proporciona dentro de V4, por lo que no puede usarlo en aplicaciones con un nivel de API inferior a 11.
Nayanesh Gupte

1
@NayAneshGupte siempre puedes usar ActionBarSherlock para usar ActionBar por debajo del nivel de API 11.
tasomaniac

¿Parece que no hay forma de introducir un retraso artificial si desea que la animación cercana sea suave?
theblang

15

Recientemente bifurqué un proyecto actual de Github llamado "RibbonMenu" y lo edité para satisfacer mis necesidades:

https://github.com/jaredsburrows/RibbonMenu

Cuál es el propósito

  • Facilidad de acceso: permite un fácil acceso a un menú que se desliza hacia adentro y hacia afuera
  • Facilidad de implementación: actualice la misma pantalla con una cantidad mínima de código
  • Independencia: no requiere bibliotecas de soporte como ActionBarSherlock
  • Personalización: fácil de cambiar colores y menús

Qué hay de nuevo

  • Se modificó la animación deslizante para que coincida con las aplicaciones de Facebook y Google+.
  • Se agregó ActionBar estándar (puede elegir usar ActionBarSherlock)
  • Se usó menuitem para abrir el menú
  • Se agregó la capacidad de actualizar ListView en la actividad principal
  • Se agregaron 2 ListViews al menú, similar a las aplicaciones de Facebook y Google+
  • Se agregó un AutoCompleteTextView y un Botón también para mostrar ejemplos de implementación
  • Método agregado para permitir a los usuarios presionar el 'botón de retroceso' para ocultar el menú cuando está abierto
  • ¡Permite a los usuarios interactuar con el fondo (ListView principal) y el menú al mismo tiempo, a diferencia de las aplicaciones de Facebook y Google+!

ActionBar con menú fuera

ActionBar con menú fuera

ActionBar con Menú fuera y búsqueda seleccionada

ActionBar con Menú fuera y búsqueda seleccionada


5

Existe una gran implementación NavigationDrawerque sigue las Directrices de diseño de materiales de Google (y es compatible hasta API 10): la biblioteca MaterialDrawer (enlace a GitHub) . En el momento de escribir este artículo, mayo de 2017, cuenta con soporte activo.

Está disponible en el repositorio de Maven Central . Configuración de dependencia de Gradle:

compile 'com.mikepenz:materialdrawer:5.9.1'

Configuración de dependencia de Maven:

<dependency>
    <groupId>com.mikepenz</groupId>
    <artifactId>materialdrawer</artifactId>
    <version>5.9.1</version>
</dependency>

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí


@lmiguelvargasf, ¿cómo imaginas ajustar un proyecto de GitHub en la respuesta? Por favor comparte tus ideas.
naXa


2

Personalmente, me gusta la navigationDraweraplicación oficial de Google Drive. Simplemente funciona y funciona muy bien. Estoy de acuerdo en que el cajón de navegación no debe mover la barra de acción porque es el punto clave para abrir y cerrar el cajón de navegación.

Si todavía está tratando de obtener ese comportamiento, recientemente creé un proyecto llamado SherlockNavigationDrawery, como es de esperar, es la implementación del cajón de navegación ActionBarSherlocky funciona para dispositivos pre Honeycomb. Revisalo:

SherlockNavigationDrawer github

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.