Diapositiva de estilo Android de Facebook

283

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

¿Alguien tiene idea de cómo se puede lograr?

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

Video de Youtube

Harsha MV
fuente
2
sí, un video también será útil para conocer el efecto exacto.
bool.dev
@ bool.dev aquí está el video: youtube.com/watch?v=ANLMaL7zn20
Harsha MV
@HarshaMV: - Intenta buscar este hilo. Creo que puede ayudarte un poco. stackoverflow.com/questions/8453320/…
Shashank_Itmaster
3
Muy buen artículo sobre navegación deslizable en Android - androiduipatterns.com/2012/06/… . Debe leer.
AlexKorovyansky
He implementado mi propio menú deslizante, mira aquí stackoverflow.com/a/15880375/1939564
Muhammad Babar

Respuestas:

176

He jugado con esto yo mismo, 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 primer hijo. Esto significa que, cuando el HSV tiene desplazamiento de desplazamiento cero, el menú se mostrará (y aún se puede 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 Inicio 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)

Paul Grime
fuente
1
@AmokraneChentir Puede usar diferentes actividades llamando getDrawingCache()a sus actividades que no son de menú y creando un ImageView desde el mapa de bits. Luego llame startActivity(intent)y overridePendingTransition(0, 0)al onClickmétodo de la ClickListenerForScrollingclase para mostrar inmediatamente la nueva actividad y obtener el efecto deseado.
Siklab.ph
1
Me pregunto si el HorizontalScrollView personalizado puede usarse con ListView ya que el documento oficial de HorizontalScrollView menciona que obligará a ListView a mostrar todos sus elementos.
Shiami
1
¡Este tenedor cambia las actividades sin usar fragmentos!
Erik B
1
Gracias por su ayuda, pude usar HorzScrollWithListMenu.java.
KarenAnne
2
Muchas gracias @PaulGrime ... este es un gran ejemplo simple y lo más increíble es en esta demostración simple, fácil de entender y personalizar fácilmente y no hay proyecto de biblioteca para usar.
Naveen Kumar
37

He implementado 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 navegación deseadas.

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

Además, esta lib debe ser compatible con este patrón de ActionBar, ya que se basa en transacciones de Actividades y TranslateAnimations (no en transacciones de Fragmentos y Vistas personalizadas).

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

Todo lo mejor,
Alex.

AlexKorovyansky
fuente
44
Hola, acabo de descubrir que tu enfoque creará un mapa de bits de captura de pantalla grande cada vez que abras la barra lateral. Aumentará el tamaño del almacenamiento dinámico y puede causar un error de falta de memoria.
Shiami
3
Gracias querido korovyansk, es muy agradable. pero el diseño absoluto está en desuso en los nuevos sistemas operativos. ¿Puedes volver a codificarlo de nuevo?
Hesam
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 tenga tiempo libre.
AlexKorovyansky
Hola koroyansk Estoy usando su biblioteca, funciona bien. Pero tengo un pequeño problema. Cuando la lista de la barra de diapositivas está abierta, estoy comenzando la actividad en el elemento de vista de lista, haga clic. 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));
Sunny
en su caso, la nueva actividad se abrirá inmediatamente sin esperar el final de la animación, puede intentar extender la biblioteca y agregar una devolución de llamada para el final de la animación. Quizás agregue esta función a la próxima versión de la biblioteca.
AlexKorovyansky
24

Aquí hay otra lib y parece ser la 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 manera similar a la aplicación G +.

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

Patricio
fuente
77
Escribí esta biblioteca, me alegra que te guste. Es realmente básico por ahora, pero lo mejoraré en las próximas semanas. Es más que bienvenido que otras personas también le hagan cambios.
David Scott
Esta biblioteca es absolutamente maravillosa. Es muy simple 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 desde 2.1, no la estoy usando.
Steven Elliott
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 agruparlas dentro de la lista y eso no será tan fácil.
htafoya 01 de
22

Creo que la aplicación de Facebook no está escrita en código nativo (me refiero a código nativo, usando diseños en Android) pero han usado webview para ello y han usado algunas bibliotecas de JavaScript ui como sencha . Se puede lograr fácilmente usando el marco sencha.

ingrese la descripción de la imagen aquí

Sanjay Kumar
fuente
16
+1 La IU puede cambiar sin la Actualización de la aplicación, por lo que definitivamente es una aplicación web y la aplicación de Android es básicamente un navegador web.
Rudy
77
No estoy seguro de que este sea necesariamente el caso. El esqueleto de la IU puede ser nativo (por ejemplo, el menú real Ver y otras vistas nativas), y el contenido de esas vistas se carga dinámicamente. Si el esqueleto de la aplicación cambia, es probable que se requiera una actualización.
Paul Grime
2
No creo que la aplicación de Facebook sea una aplicación web. Demasiado fluido, rápido. Conozco aplicaciones web / híbridas que se ven bien "como nativas", pero todavía hay un poco de retraso en comparación con las nativas. No solo el esqueleto: las listas, el mapa, etc. se ven y se sienten nativos. Al menos con el estado actual de la tecnología.
Ixx
Ok, alguien me dijo que esta aplicación no era así durante aproximadamente 2 meses, por lo que se refiere a una versión anterior que no conozco. De todos modos, puede ser informativo comentar que la aplicación actual es definitivamente nativa.
Ixx
20

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

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

Aquí está el github enlace del proyecto

Aquí está el enlace de descarga de Google Play

dwbrito
fuente
2
Creo que este es el mejor
Harsha MV
17

Acabo de implementar una vista similar para mi propio proyecto. Puedes consultarlo aquí

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

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 la Wiki de proyectos.

Algunas ventajas de esta biblioteca:

  • capacidad de deslizar la vista al tacto
  • Es fácil ajustar el tamaño de la barra de acciones en XML
  • Soporte de todas las versiones de Android SDK a partir de 2.0

Hay una limitación:

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

Saludos cordiales, Steven

grosero
fuente
¿Cómo configurar la primera interfaz de usuario es como tu foto de carga? Lo pruebo primero UI es webView en la pantalla. Espero que listview se muestre cuando se inicie la aplicación. a través de su lib es de 2,0, pero su demostración es de 4,0, espero que también se puede utilizar 2.0.that es fresca
Pengwang
@pengwang: acabo de insertar un código para admitir esta función. Puede hacer esto mientras Activity.onResume () llamando a viewActionsContentView.showActions ();
grosero
¿Es posible deshabilitar eventos táctiles en la parte oculta? Por ejemplo, cuando la parte derecha está activa, todas las vistas a la derecha están deshabilitadas.
Valeriy
Existe la posibilidad de bloquear el diseño del contenido mientras se muestra la acción uno. Te he enviado un proyecto de muestra por correo electrónico.
grosero
16

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.

v4 biblioteca de soporte

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

Wubao Li
fuente
2
Sí, el nivel mínimo de API admitido es 4.
Wubao Li
1
Y la biblioteca de compatibilidad le permite usarlo en dispositivos más antiguos. Acabo de desarrollar uno para Gingerbread y más tarde.
Tony Maro
2
Esto necesita estar más arriba en la cima. Demasiadas bibliotecas externas de terceros en las otras respuestas.
Jason Axelson el
15

Hice un resumen de una implementación existente y la convirtió en un proyecto de biblioteca más una aplicación de ejemplo. También se agregó el análisis XML, así como la autodetección de una barra de acción posiblemente presente, por lo que funciona con la barra de acción nativa y de apoyo, como ActionBarSherlock.

¡Este también desliza la barra de acción!

Todo es un proyecto de biblioteca junto con una aplicación de ejemplo y se describe en un menú deslizante para Android, como las aplicaciones de Google y Facebook . ¡Gracias a scirocco por la idea inicial y el código!

SlideMenu en pan de jengibre SlideMenu en ICS con ActionBar

bk138
fuente
10

Esto es simple y elegante: https://github.com/akotoe/android-slide-out-menu.git

Instantánea:

ingrese la descripción de la imagen aquí

Eduardo
fuente
¿¿me puedes ayudar?? Pregunta relacionada con el control deslizante. Aquí está el enlace stackoverflow.com/questions/14500927/…
moDev
¿te permite deslizarte tocando? (golpe
fuerte
@Edward He estado trabajando con su muestra, creo que es genial y fácil de usar, pero tuve un problema al rotar la pantalla (estoy usando android: configChanges = "orientación" en el manifiesto con android 3.1 porque no desea que la actividad se reinicie) la pantalla gira bien pero el framelayout mantiene su tamaño y no se ve bien, ¿tiene alguna solución? He intentado todo pero no puedo solucionarlo. gracias
zvzej
@ Edward, aquí está mi pregunta usando tu muestra, por favor, ayúdame o dame algún consejo, gracias. stackoverflow.com/questions/16778911/…
zvzej
8

No puedo comentar sobre la respuesta dada por @Paul Grime todavía, de todos modos he enviado en su proyecto github la solución para el problema de parpadeo ...

Publicaré la solución aquí, tal vez alguien la necesite. Solo necesita agregar dos líneas de código. El primero debajo de la llamada anim.setAnimationListener:

anim.setFillAfter(true);

Y el segundo después de la llamada app.layout ():

app.clearAnimation();

Espero que esto ayude :)

Fatal1ty2787
fuente
6

He implementado esto con AbsoluteLayout y un controlador de diapositiva simple que mueve la vista a un desplazamiento negativo para ocultar.

Si alguien está interesado, puedo limpiar el código / diseño y publicar. Sé que AbsoluteLayout está en desuso, pero fue una implementación muy sencilla. Vista izquierda / Vista derecha, y cuando se "deslice para abrir", simplemente mueva la vista izquierda desde un desplazamiento -X al ancho del dispositivo, lo que quiera mostrar de la Vista derecha

Rico
fuente
¡Apreciaré si puedes hacerlo sin AbsoluteLayout! ¡Gracias!
Igor
4

Hola, esta es la mejor aplicación de demostración que ofrece un menú de diapositivas como Facebook. Consulta el código aquí

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

Mukesh Y
fuente
3

Como parte de mi Biblioteca Común de Android (ACL), implementé el propio SideBar. Ventajas principales:

  1. La barra lateral se puede configurar en cualquier posición: izquierda, arriba, abajo, derecha
  2. Se puede hacer clic tanto en la vista principal como en la vista deslizante
  3. La barra lateral se puede mostrar parcialmente
  4. Los atributos de estilo para SideBar facilitan cambiar su estilo
  5. Artefacto en maven repo
  6. Parte de una gran biblioteca

Código fuente: https://github.com/serso/android-common/tree/master/views/src/main/java/org/solovyev/android/view/sidebar

Uso: https://github.com/serso/android-common/blob/master/samples/res/layout/acl_view_layout.xml

se.solovyev
fuente
3

Recientemente he trabajado en mi versión de implementación de menú deslizante. Utiliza la popular biblioteca Android J.Feinstein SlidingMenu.

Por favor verifique el código fuente en GitHub:

https://github.com/baruckis/Android-SlidingMenuImplementation

Descargue la aplicación directamente en el dispositivo para probar:

https://play.google.com/store/apps/details?id=com.baruckis.SlidingMenuImplementation

El código debe explicarse por sí mismo debido a los comentarios. ¡Espero que sea util! ;)

Andrius Baruckis
fuente
3

Encontré una forma más simple para ello y está funcionando. Use el cajón de navegación simple y llame a drawer.setdrawerListner () y use el método mainView.setX () en el método drawerSlide a continuación o copie mi código.

archivo xml

 <android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000" >

<RelativeLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

  <ImageView
      android:layout_width="40dp"
      android:layout_height="40dp"
      android:id="@+id/menu"
      android:layout_alignParentTop="true"
      android:layout_alignParentLeft="true"
      android:layout_marginTop="10dp"
      android:layout_marginLeft="10dp"
      android:src="@drawable/black_line"
      />
</RelativeLayout>


<RelativeLayout
    android:id="@+id/left_drawer"
    android:layout_width="200dp"
    android:background="#181D21"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    >
    </RelativeLayout>
 </android.support.v4.widget.DrawerLayout>

archivo java

   public class MainActivity extends AppCompatActivity {
DrawerLayout drawerLayout;
RelativeLayout mainView;
ImageView menu;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    menu=(ImageView)findViewById(R.id.menu);
    drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    mainView=(RelativeLayout)findViewById(R.id.content_frame);

    menu.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            drawerLayout.openDrawer(Gravity.LEFT);
        }
    });

    drawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() {
        @Override
        public void onDrawerSlide(View drawerView, float slideOffset) {
            mainView.setX(slideOffset * 300);
        }

        @Override
        public void onDrawerOpened(View drawerView) {

        }

        @Override
        public void onDrawerClosed(View drawerView) {

        }

        @Override
        public void onDrawerStateChanged(int newState) {

        }
    });
 }
}

ingrese la descripción de la imagen aquí

Gracias

Dalvinder Singh
fuente
2

Voy a hacer algunas conjeturas audaces aquí ...

Supongo que tienen un diseño que representa el menú que no está visible. Cuando se toca el botón de menú, animan el diseño / vista en la parte superior para moverse, y simplemente permiten la visibilidad del diseño del menú. No he pensado que esto cause ningún tipo de problemas con el índice z en las vistas, ni cómo controlan eso.

jlindenbaum
fuente
si ha utilizado la aplicación ... en realidad puede ver que el diseño se desliza hacia la derecha dando paso a la sección del menú. Intentaré hacer un video y subirlo.
Harsha MV
1
Uso la versión de iPhone, si la versión de Android es la misma, dudo que sea muy diferente de lo que describí. No he escrito muchas animaciones en Android, así que no podría decirte cómo se ve el código de animación, pero en términos generales, supongo que es lo que describí.
jlindenbaum
gracias, youtube.com/watch?v=ANLMaL7zn20 es el mismo efecto en iPhone.
Harsha MV
2

Aquí está la guía de diseño y desarrollo que se encuentra en la documentación oficial de Android sin necesidad de agregar una biblioteca externa no oficial. Solo la biblioteca de soporte de Android lo hará. Encuentra los enlaces aquí.

diseñar y desarrollar .

jai_b
fuente
1

La aplicación de Android para Facebook posiblemente esté construida con Fragments . El menú es un Fragmento, la Actividad en profundidad (Noticias / Eventos / Amigos, etc.) es el otro Fragmento. Básicamente un diseño de tableta 'maestro y detalle' en un teléfono.

Gunnar Karlsson
fuente
En este caso, necesitamos crear una barra de acción dentro del fragmento, por lo que no podemos usar ninguna característica del marco de Android para construirlo, ¿verdad? En realidad no puedo estar seguro acerca de Facebook, pero para muchos desarrolladores es una forma demasiado difícil de hacer una barra de acción sin la ayuda del marco, espero que esta vez ya haya terminado.
AlexKorovyansky
1

Para información, como la biblioteca de compatibilidad comienza con 1.6 y esta aplicación de Facebook también se ejecuta en dispositivos con Android 1.5, no se pudo hacer con Fragments.

La forma en que podría hacerlo es: crear una actividad "base" BaseMenuActivity donde coloque toda la lógica para onItemClickListener para su lista de menú y defina la animación 2 ("abrir" y "cerrar"). Al final / principio de las animaciones, muestra / oculta el diseño de BaseMenuActivity (vamos a llamarlo menu_layout). El diseño para esta actividad es simple, es solo una lista con elementos + una parte transparente a la derecha de su lista. Se podrá hacer clic en esta parte y su ancho será el mismo ancho que su "botón de movimiento". Con eso, podrás hacer clic en este diseño para comenzar la animación y dejar que content_layout se deslice hacia la izquierda y abarque toda la pantalla. Para cada opción (es decir, elemento de la lista del menú), crea una "ContentActivity" que extiende la BaseMenuActivity. Luego, cuando hace clic en un elemento de la lista, comienza su ItemSelectedContentActivity con el menú visible (que cerrará tan pronto como comience su actividad). Los diseños para cada ContentActivity son FrameLayout e incluyen y. Solo necesita mover content_layout y hacer que menu_layout sea visible cuando lo desee.

Esa es una manera de hacerlo, y espero haber sido lo suficientemente claro.

p4u144
fuente
1

He estado jugando con esto en los últimos días y he encontrado una solución que es bastante sencilla al final y que funciona antes del Honeycomb. Mi solución fue animar la Vista que quiero deslizar ( FrameLayoutpara mí) y escuchar el final de la animación (en ese punto para compensar la posición izquierda / derecha de la Vista). He pegado mi solución aquí: cómo animar la traducción de una vista

Adil Hussain
fuente
1

Después de una búsqueda de varias horas, encontré que la solución de Paul Grime probablemente es la mejor. Pero tiene demasiada funcionalidad. Por lo tanto, puede ser difícil estudiar para principiantes. Por lo tanto, me gustaría proporcionar mi implementación, que proviene de la idea de Paul, pero es más simple y debería ser fácil de leer.

implementación de la barra de menú lateral mediante el uso de código Java sin XML

Chao
fuente
1

No vi el sorprendente SimonVT / android-menudrawer mencionado en ninguna parte de las respuestas anteriores. Así que aquí hay un enlace

https://github.com/SimonVT/android-menudrawer

Es súper fácil de usar y puedes colocarlo a la izquierda, derecha, arriba o abajo. Muy bien documentado con código de muestra y licencia Apache 2.0.

lwegener
fuente
0

En junio de 2012, Google agregó "plantillas" en el complemento ADT de Eclipse , y hay una plantilla llamada "flujo maestro / detalle" que hace exactamente eso (basado en fragmentos)

rds
fuente
1
El flujo maestro / detalle no es un menú de barra lateral en cuestión. Son solo dos fragmentos que se muestran juntos (tableta) o por separado (teléfono).
tomash
Bueno, en junio de 2013, se agregó el diseño del cajón de navegación, que es lo que más se necesita aquí, sin embargo, la barra de acciones no se deslizará con el cajón como lo necesita la barra deslizante de estilo Facebook.
Khulja Sim Sim