Diapositiva de estilo Android de Facebook

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?

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

Video de Youtube

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 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.

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.

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

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.

¡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

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í:

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

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

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!

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

Instantánea:

Creo que esa biblioteca no menciona:

jfeinstein10 / SlidingMenu

github url:https://github.com/jfeinstein10/SlidingMenu

• funciona bien con la barra de acción ActionBarSherlock que ayuda en la compatibilidad con versiones anteriores .
• ¡Admite el deslizamiento hacia la derecha y no solo desliza a través del botón!

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 :)

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

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

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

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! ;)

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) {

        }
    });
 }
}

Gracias

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.

Android agregó el cajón de navegación. Refiera esto

enlace

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 .

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.

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.

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

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

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.

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)