Android – Cómo hacer menú de diapositivas como Facebook, Spotify y Google +

Quiero agregar un menú de diapositivas a mi aplicación, como la aplicación de Facebook. Leí muchas cosas en Internet sobre las bibliotecas, pero ninguna me funcionó. ¿Qué es lo mejor / biblioteca que puedo usar para esto y alguien puede explicarme cómo usarlo?

Editar Este es mi diseño:

"  

Pero no veo ningún botón o imagen de fondo. ¿Sabes qué está yendo mal?

Bueno, actualmente estoy trabajando en un proyecto y me encontré con el menú deslizante, busqué en Google, pero me decepcionó ver que nadie ha dado algunas instrucciones o consejos sobre cómo comenzar a hacer un menú deslizante. Todos han dado un enlace a algunos proyectos de Github / bibliotecas para usar, por lo tanto, decidí hacerlo yo mismo y finalmente tengo mi propio menú deslizante listo …

He pasado dos días en él

1. en hacer animaciones de deslizamiento

2. en hacer que funcione con todas las resoluciones de pantalla

Es realmente fácil y simple una vez que tienes una idea acerca de las animaciones , he leído en alguna parte, no es sensato reinventar la rueda (personas que se refieren al código fuente github del menú deslizante), pero creo que al menos deberías una vez trate de hacer la suya para que tenga una idea de cómo funciona y funciona realmente: P

Esta es una imagen de cómo va a funcionar mi menú deslizante

1.Find.xml //later in the code it will be refer as findLayout

                   //here i included the filter.xml, which is on top of find.xml layout and is initially invisible  

enter image description here

2.Filter.xml //later in code refer as FilterLayout

                              

enter image description here

En find.xml he incluido filter.xml inicialmente que es invisible

Ahora FilterAnimation.java

 package matchat.helpers; import com.s3.matchat.R; import android.content.Context; import android.util.DisplayMetrics; import android.view.View; import android.view.animation.AlphaAnimation; import android.view.animation.Animation; import android.view.animation.Animation.AnimationListener; import android.view.animation.AnimationUtils; import android.widget.RelativeLayout; public class FilterAnimation implements AnimationListener { Context context; RelativeLayout filterLayout, otherLayout; private Animation filterSlideIn, filterSlideOut, otherSlideIn, otherSlideOut; private static int otherLayoutWidth, otherLayoutHeight; private boolean isOtherSlideOut = false; private int deviceWidth; private int margin; public FilterAnimation(Context context) { this.context = context; DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics(); deviceWidth = displayMetrics.widthPixels; // as my animation is x-axis related so i gets the device width and will use that width,so that this sliding menu will work fine in all screen resolutions } public void initializeFilterAnimations(RelativeLayout filterLayout) { this.filterLayout = filterLayout; filterSlideIn = AnimationUtils.loadAnimation(context, R.anim.filter_slide_in); filterSlideOut = AnimationUtils.loadAnimation(context, R.anim.filter_slide_out); } public void initializeOtherAnimations(RelativeLayout otherLayout) { this.otherLayout = otherLayout; otherLayoutWidth = otherLayout.getWidth(); otherLayoutHeight = otherLayout.getHeight(); otherSlideIn = AnimationUtils.loadAnimation(context, R.anim.other_slide_in); otherSlideIn.setAnimationListener(this); otherSlideOut = AnimationUtils.loadAnimation(context, R.anim.other_slide_out); otherSlideOut.setAnimationListener(this); } public void toggleSliding() { if(isOtherSlideOut) //check if findLayout is already slided out so get so animate it back to initial position { filterLayout.startAnimation(filterSlideOut); filterLayout.setVisibility(View.INVISIBLE); otherLayout.startAnimation(otherSlideIn); } else //slide findLayout Out and filterLayout In { otherLayout.startAnimation(otherSlideOut); filterLayout.setVisibility(View.VISIBLE); filterLayout.startAnimation(filterSlideIn); } } @Override public void onAnimationEnd(Animation animation) { if(isOtherSlideOut) //Now here we will actually move our view to the new position,because animations just move the pixels not the view { RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(otherLayoutWidth, otherLayoutHeight); otherLayout.setLayoutParams(params); isOtherSlideOut = false; } else { margin = (deviceWidth * 80) / 100; //here im coverting device percentage width into pixels, in my other_slide_in.xml or other_slide_out.xml you can see that i have set the android:toXDelta="80%",so it means the layout will move to 80% of the device screen,to work across all screens i have converted percentage width into pixels and then used it RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(otherLayoutWidth, otherLayoutHeight); params.leftMargin = margin; params.rightMargin = -margin; //same margin from right side (negavite) so that our layout won't get shrink otherLayout.setLayoutParams(params); isOtherSlideOut = true; dimOtherLayout(); } } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationStart(Animation animation) { } private void dimOtherLayout() { AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.5f); alphaAnimation.setFillAfter(true); otherLayout.startAnimation(alphaAnimation); } } 

Ahora Find.java

 package main.matchat.activities; import matchat.helpers.FilterAnimation; import com.s3.matchat.R; import android.app.Activity; import android.os.Bundle; import android.util.DisplayMetrics; import android.view.View; import android.view.ViewTreeObserver; import android.view.View.OnClickListener; import android.view.ViewTreeObserver.OnGlobalLayoutListener; import android.widget.Button; import android.widget.RelativeLayout; public class Find extends Activity implements OnClickListener { RelativeLayout filterLayout, findLayout; Button btFilter; FilterAnimation filterAnimation; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.find); filterLayout = (RelativeLayout)findViewById(R.id.filter_layout); findLayout = (RelativeLayout)findViewById(R.id.find_layout); btFilter = (Button)findViewById(R.id.filter); btFilter.setOnClickListener(this); filterAnimation = new FilterAnimation(this); initializeAnimations(); } private void initializeAnimations() { //Setting GlobolLayoutListener,when layout is completely set this function will get called and we can have our layout onbject with correct width & height,else if you simply try to get width/height of your layout in onCreate it will return 0 final ViewTreeObserver filterObserver = filterLayout.getViewTreeObserver(); filterObserver.addOnGlobalLayoutListener(new OnGlobalLayoutListener() { @Override public void onGlobalLayout() { filterLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this); DisplayMetrics displayMetrics = getResources().getDisplayMetrics(); int deviceWidth = displayMetrics.widthPixels; int filterLayoutWidth = (deviceWidth * 80) / 100; //here im coverting device percentage width into pixels, in my other_slide_in.xml or other_slide_out.xml you can see that i have set the android:toXDelta="80%",so it means the layout will move to 80% of the device screen,to work across all screens i have converted percentage width into pixels and then used it RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(filterLayoutWidth, RelativeLayout.LayoutParams.MATCH_PARENT); filterLayout.setLayoutParams(params);//here im setting the layout params for my filter.xml because its has width 260 dp,so work it across all screen i first make layout adjustments so that it work across all screens resolution filterAnimation.initializeFilterAnimations(filterLayout); } }); final ViewTreeObserver findObserver = findLayout.getViewTreeObserver(); findObserver.addOnGlobalLayoutListener(new OnGlobalLayoutListener() { @Override public void onGlobalLayout() { findLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this); filterAnimation.initializeOtherAnimations(findLayout); } }); } @Override public void onClick(View v) { int id = v.getId(); switch(id) { case R.id.filter: filterAnimation.toggleSliding(); break; } } } 

Aquí están las animaciones res / anim

1.filter_slide_in.xml

     

2.filter_slide_out.xml

     

3.other_slide_in.xml

     

4.other_slide_out.xml

     

Allí tienes un menú deslizante funcional y funcional completo, y puedes personalizarlo para cumplir tus requisitos, si alguien todavía tiene problemas para configurarlo, no dudes en preguntar, me complace ayudarte 🙂

https://github.com/johnkil/SideNavigation

He estado usando esta biblioteca en estos días y funciona bastante bien. De hecho, su uso es muy directo.

Usted acaba de declarar un side_navigation.xml en su carpeta de menú:

         

Luego, en el diseño de su actividad, agrega la vista de navegación:

  

Y, en su actividad, los vincula a los dos:

 SideNavigationView sideNavigationView = (SideNavigationView)findViewById(R.id.side_navigation_view); sideNavigationView.setMenuItems(R.menu.side_navigation); 

EDITAR:

Para activar el panel de navegación lateral, es una buena opción para llamarlo cuando el usuario presiona el ícono de inicio en la barra de acciones. Por ejemplo:

 @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: sideNavigationView.toggleMenu(); return true; default: return super.onOptionsItemSelected(item); } } 

También puede usar http://www.scringo.com . Es un SDK que le permite agregar este tipo de menú lateral prácticamente con este fragmento de código:

 Scringo scringo = new Scringo(); scringo.init(); 

Hay una gran cantidad de configuración que puede hacer más adelante desde el sitio (dirección del menú, colores, etc.) y también puede agregar funciones incorporadas al menú, como bandeja de entrada, buscar / invitar amigos, radar, etc.

Usa la versión oficial. Google lanzó el patrón Cajón de navegación en I / O 2013 y ha actualizado la biblioteca de soporte de la versión 4 para incluir esto. 🙂

http://developer.android.com/design/patterns/navigation-drawer.html

Aquí hay un menú deslizante simple desarrollado por mí, verifique el proyecto en github, muy simple de implementar http://github.com/leonardosalles/shipp-sliding-menu

Puedes leer estos 3 artículos al respecto:

http://android.cyrilmottier.com/?p=658

http://android.cyrilmottier.com/?p=701

http://android.cyrilmottier.com/?p=717

para hacerse una idea 🙂

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

Slide menu IMPLEMENTACIÓN TÉCNICA

La navegación lateral está incluida en el SDK de Android ahora. http://developer.android.com/design/patterns/navigation-drawer.html

Una búsqueda rápida en github revela un proyecto que implementó el patrón de UI.

android-fb-like-slideout-navigation en github También hay un video que demuestra la biblioteca en el trabajo.

EDITAR: Aquí hay otro proyecto de biblioteca: https://github.com/darvds/RibbonMenu ¡ Gracias Mr BuBBLs en los comentarios!

Más proyecto de biblioteca:

Cyril Mottier también ha escrito sobre la implementación de este patrón en su blog. Estas publicaciones valen la pena leerlas:

  1. La realización del Prixing # 1: menú de la aplicación Fly-in
  2. La realización de Prixing # 2: Deslizar el menú de la aplicación fly-in
  3. La realización de Prixing # 3: pulir el menú deslizante de la aplicación

Consulte también la aplicación Prixing en Google Play para probar la navegación lateral implementada por Cyril.

Si desea crear su propio menú deslizante en lugar de utilizar otras bibliotecas, para comprender mejor cómo funcionan las cosas, lea mis artículos aquí.

Cree su propio menú deslizante en el tutorial de Android – Parte 1

Cree su propio menú deslizante en el tutorial de Android – Parte 2

enter image description here

Para lograr un efecto deslizante, puede mover el menú, la vista de contenido o ambos, todo depende de su deseo.

La idea es confiar en 2 métodos offsetLeftAndRight () y layout () para actualizar la posición de vista. También necesitarás Scroller para facilitar la animación

Prueba este método Dos diseños relativos en el xml.

 CONTENT(initially gone) HEADER 

El encabezado ocupa inicialmente todo el ancho y el contenido está a la izquierda del encabezado, pero actualmente está configurado en Visibilidad = IDA.

Entonces, cuando el clic ocurre en el encabezado o cualquier botón en el diseño del encabezado

Simplemente configure el ancho de su diseño de contenido en screen_width / 2 (la fracción dependerá de sus requisitos).

 public void onCreate(){ RelativeLayout header=(RelativeLayout)findViewById(R.id.header); RelativeLayout content=(RelativeLayout)findViewById(R.id.content); Display display = getWindowManager().getDefaultDisplay(); int width = display.getWidth(); // deprecated int height = display.getHeight(); // deprecated //on some event content.setVisibility(View.VISIBLE); //margin(left,right,bottom,top) content.setMargin(width/3,0,0,0); //if already opened,close the door content.setVisibility(View.GONE); } 

Si quieres algunas buenas animaciones de apertura, usa la animación de traducir en los diseños.
Y asegúrate de contar con dos hijos relativos al lado de la configuración inicial, tal como se menciona en la parte superior de mi respuesta.