Diapositiva estilo Android Facebook

8 minutos de lectura

Diapositiva estilo Android Facebook
Harsha MV

La nueva aplicación de Facebook y su navegación son geniales. Solo estaba tratando de ver cómo se puede emular en mi aplicación.

Alguien tiene idea de como se puede lograr?

ingrese la descripción de la imagen aquí

Al hacer clic en el botón superior izquierdo, la página se desliza y se muestra la siguiente pantalla:

ingrese la descripción de la imagen aquí

Video de Youtube

  • sí, un video también será útil para conocer el efecto exacto.

    – bool.dev

    28 de diciembre de 2011 a las 16:56

  • @bool.dev aquí está el video: youtube.com/watch?v=ANLMaL7zn20

    – Harsha MV

    29 de diciembre de 2011 a las 5:02

  • @HarshaMV: – Intenta mirar este hilo. Creo que puede ayudarte un poco.stackoverflow.com/questions/8453320/…

    – Shashank_Itmaster

    29 de diciembre de 2011 a las 5:34

  • Muy buen artículo sobre navegación deslizable en Android – androiduipatterns.com/2012/06/…. Debe leer.

    – Alex Korovyansky

    31 de julio de 2012 a las 7:03

  • Implementé mi propio menú deslizante, consulte aquí stackoverflow.com/a/15880375/1939564

    – Muhammad Babar

    27 mayo 2013 a las 13:45

Diapositiva estilo Android Facebook
pablo mugre

Yo mismo jugué con esto, y la mejor manera que pude encontrar fue usar un FrameLayout y colocar un HorizontalScrollView (HSV) personalizado en la parte superior del menú. Dentro del HSV están las vistas de su aplicación, pero hay una Vista transparente como el primer hijo. Esto significa que, cuando el HSV tiene un desplazamiento de desplazamiento cero, el menú se mostrará (y aún se podrá hacer clic sorprendentemente).

Cuando se inicia la aplicación, desplazamos el HSV hasta el desplazamiento de la primera Vista visible de la aplicación, y cuando queremos mostrar el menú, retrocedemos para revelar el menú a través de la Vista transparente.

El código está aquí, y los dos botones inferiores (llamados HorzScrollWithListMenu y HorzScrollWithImageMenu) en la actividad de lanzamiento muestran los mejores menús que se me ocurrieron:

Demostración del menú deslizante de Android

Captura de pantalla del emulador (desplazamiento medio):

Captura de pantalla del emulador (desplazamiento medio)

Captura de pantalla del dispositivo (desplazamiento completo). Tenga en cuenta que mi ícono no es tan ancho como el ícono del menú de Facebook, por lo que la vista del menú y la vista de la ‘aplicación’ no están alineadas.

Captura de pantalla del dispositivo (desplazamiento completo)

  • @AmokraneChentir Puedes usar diferentes actividades llamando getDrawingCache() en sus actividades fuera del menú y creando un ImageView desde el mapa de bits. Luego llame startActivity(intent) & overridePendingTransition(0, 0) en el onClick metodo de la ClickListenerForScrolling clase para mostrar inmediatamente la nueva actividad y obtener el efecto deseado.

    – Siklab.ph

    20 de febrero de 2012 a las 3:16


  • Me pregunto si el HorizontalScrollView personalizado se puede usar con ListView, ya que el documento oficial de HorizontalScrollView menciona que obligará a ListView a mostrar todos sus elementos.

    – shiami

    3 de mayo de 2012 a las 9:33

  • esta ¡fork cambia las actividades sin usar fragmentos!

    – Erik B.

    25 de febrero de 2013 a las 19:06


  • Gracias por su ayuda, pude usar HorzScrollWithListMenu.java.

    – KarenAnne

    3 de julio de 2013 a las 8:23

  • Muchas gracias, @PaulGrime… este es un gran ejemplo simple y lo más increíble está en esta demostración, fácil de entender y personalizar, y no hay un proyecto de biblioteca para usar.

    – Naveen Kumar

    4 de julio de 2013 a las 6:48


Implementé la navegación deslizable similar a Facebook en este proyecto de biblioteca.

Puede integrarlo fácilmente en su aplicación, su interfaz de usuario y navegación. Deberá implementar solo una Actividad y un Fragmento, informar a la biblioteca al respecto, y la biblioteca proporcionará todas las animaciones y la navegación deseadas.

Dentro del repositorio puede encontrar un proyecto de demostración, con cómo usar lib para implementar una navegación similar a la de Facebook. Aquí hay un video corto con el registro del proyecto de demostración..

Además, esta librería debería ser compatible con este patrón ActionBar, porque se basa en transacciones de Actividades y Animaciones de Traducción (no transacciones de Fragmentos y Vistas personalizadas).

En este momento, el mayor problema es hacer que funcione bien para la aplicación, que admite tanto el modo vertical como el horizontal. Si tiene algún comentario, envíelo a través de github.

Todo lo mejor,
Alex

  • Hola, me acabo de dar cuenta de que su enfoque va a crear un mapa de bits de captura de pantalla grande cada vez que abra la barra lateral. Aumentará el tamaño del montón y puede causar un error de falta de memoria.

    – shiami

    4 de mayo de 2012 a las 3:39

  • Gracias querido korovyansk, es muy agradable. pero el diseño absoluto está obsoleto en los nuevos sistemas operativos. ¿Puedes volver a codificarlo?

    – Hesam

    13 de mayo de 2012 a las 7:57

  • Gracias a todos los que dan su opinión en github o aquí. Conozco algunos errores y tengo ideas sobre cómo mejorar la aplicación. Lo hago, cuando tendré tiempo libre.

    – Alex Korovyansky

    14 de mayo de 2012 a las 8:17

  • Hola Koroyansk. Estoy usando su biblioteca, funciona bien. Pero tengo un pequeño problema. Cuando se abre la lista de la barra deslizante, comienzo la actividad al hacer clic en el elemento de vista de lista. La actividad comienza correctamente, pero la animación deslizante no funciona. Código ((MenuActivity) getActivity()).getSlideoutHelper().close(); startActivity(new Intent(getActivity(), MyActivity.class) .addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP).putExtra("category", position));

    – Soleado

    6 de agosto de 2012 a las 18:59


  • en su caso, la nueva actividad se abrirá inmediatamente sin esperar el final de la animación, puede intentar ampliar la biblioteca y agregar una devolución de llamada para el final de la animación. puede ser que agregue esta función a la próxima versión de la biblioteca.

    – Alex Korovyansky

    7 de agosto de 2012 a las 6:55


1646960173 953 Diapositiva estilo Android Facebook
Patricio

Aquí está otro lib y parece ser el mejor en mi opinión. Yo no lo escribi..

ACTUALIZAR:

Este código parece funcionar mejor para mí y mueve toda la barra de acciones de forma similar a la aplicación G+.

¿Cómo logró Google hacer esto? Slide ActionBar en la aplicación de Android

  • Escribí esta biblioteca, me alegra que te guste. Es muy básico por ahora, pero lo mejoraré en las próximas semanas. Más que bienvenido para que otras personas hagan cambios también.

    –David Scott

    10 de junio de 2012 a las 18:01

  • Esta biblioteca es absolutamente maravillosa. Es muy fácil de usar y funciona perfectamente. Gracias. Solo me gustaría agregar que la muestra solo funciona con ICS (y Honeycomb, creo) … pero la biblioteca funciona hasta 2.1, la estoy usando sin problemas.

    – Steven Elliott

    22 de junio de 2012 a las 2:00

  • No está mal, es bastante simple pero funciona bien y la configuración es realmente rápida. Sin embargo, no es muy configurable desde fuera de la biblioteca: todos los elementos tienen el mismo diseño simple, y sobre la marcha no hay posibilidad de listado dinámico; ambas cosas serían fáciles de adaptar pero realmente necesito agrupar dentro de la lista y eso no será tan fácil.

    – htafoya

    01/07/2013 a las 20:31


Diapositiva estilo Android Facebook
sanjay kumar

Creo que la aplicación de Facebook no está escrita en código nativo (por código nativo quiero decir, usando diseños en Android) pero han usado webview para ello y han usado algunas bibliotecas de interfaz de usuario de javascript como sencha. Se puede lograr fácilmente usando sencha framework.

ingrese la descripción de la imagen aquí

¡Aquí hay otra (muy buena) biblioteca de código abierto!

La buena característica de este es que se integra fácilmente con ActionBarSherlock.

Aquí esta la github enlace del proyecto

Aquí esta la Google Play enlace de descarga

1646960174 662 Diapositiva estilo Android Facebook
Onkar

Acabo de implementar una vista similar para mi propio proyecto. Usted puede comprobarlo aquí

Aquí está la pantalla de la aplicación de muestra basada en la biblioteca que escribí:
Ejemplo de ActionsContentView

Es fácil usar esta vista personalizada como elemento del diseño XML. Aquí hay un ejemplo:

    <shared.ui.actionscontentview.ActionsContentView
      android:id="@+id/content"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:actions_layout="@layout/actions"
      app:content_layout="@layout/content" />

Si tiene alguna pregunta sobre el uso de la biblioteca ActionsContentView, puedo escribir un pequeño artículo en Projects Wiki.

Algunas ventajas de esta biblioteca:

  • posibilidad de deslizar la vista al tacto
  • es fácil ajustar el tamaño de la barra de acciones en XML
  • compatibilidad con todas las versiones de SDK de Android a partir de la 2.0 y posteriores

Hay una limitación:

  • todas las vistas de desplazamiento horizontal no funcionarán en los límites de esta vista

Saludos, Steven

1646960175 895 Diapositiva estilo Android Facebook
wubao li

Con la revisión 13 del paquete de soporte de Android (mayo de 2013), existe 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 ahora un patrón de diseño.

biblioteca de soporte v4

patrón de diseño del cajón de navegación

  • Sí, el nivel de API mínimo admitido es 4.

    – Wubao Li

    15 mayo 2013 a las 21:01

  • Y la biblioteca de compatibilidad te permite usarla en dispositivos más antiguos. Acabo de desarrollar uno para Gingerbread y posteriores.

    – Tony Maro

    26 de septiembre de 2013 a las 19:18

  • Esto tiene que estar más arriba. Demasiadas bibliotecas de terceros extrañas en las otras respuestas.

    – Jason Axelson

    4 oct 2013 a las 19:44

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad