Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Animación de la actividad de capa deslizante android

Quiero implementar la animación de capa deslizante para la transición de actividad, tal como se describe en las directrices de diseño de materiales.

Transición Material

Sin embargo, todo lo que podía hacer ahora es una simple combinación de slide_in y estancia de animación que no me da un tipo de capa apilada de efecto. ¿Cómo puedo lograrlo?

Mi implementación actual:

Actividad Inicio:

activity.overridePendingTransition(R.anim.slide_in_right, R.anim.stay); 

Actividad Cerrar:

 activity.overridePendingTransition(R.anim.stay, R.anim.slide_out_right); 

Slide_in_right.xml:

 <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator"> <translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="@android:integer/config_shortAnimTime" /> </set> 

Slide_out_right.xml:

 <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator"> <translate android:fromXDelta="0" android:toXDelta="100%p" android:duration="@android:integer/config_shortAnimTime" /> </set> 

Stay.xml:

 <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="@android:integer/config_shortAnimTime" android:fromYDelta="0%p" android:toYDelta="0%p" /> 

  • La elevación no funciona en un LinearLayout
  • ¿Cómo mantener la barra de herramientas fija en la parte superior cuando AppBar colapsa / se expande?
  • Diseño de materiales Tipografía - Titulares, Títulos, Espaciado, Aspecto de texto
  • Cómo establecer transitionName a título de barra de herramientas?
  • ¿Cómo cambiar la dirección de los iconos para los elementos del menú en un NavigationView?
  • Animación ActionBarDrawerToggle
  • Agregar botón como "Nuevo correo" de la aplicación de Gmail
  • ¿Cómo iniciar la transición de elementos compartidos usando Fragmentos?
  • 2 Solutions collect form web for “Animación de la actividad de capa deslizante android”

    Finalmente he encontrado una solución para esta pregunta. Funciona impecable.

    Los componentes importantes utilizados en esta respuesta:

    • BackActivity = actividad de fondo
    • FrontActivity = actividad que se desliza en frente
    • BackgroundView = el ViewGroup base en su FrontActivity

    La solución es animar el diseño de FrontActivity antes de cerrar FrontActivity. Esto sólo es posible si utiliza una barra de herramientas integrada en su diseño como barra de acción.

    Copiaré mi código aquí. Mi animación es una actividad que se desliza delante de la parte inferior, y desaparece nuevamente deslizándose hacia el fondo delante de la actividad anterior. Usted puede conseguir fácilmente este efecto en cualquier dirección simplemente alterando las animaciones.


    1) Deslice FrontActivity en más de BackActivity
    Simplemente llame a overridePendingTransition al iniciar FrontActivity desde BackActivity.

     Intent intent = new Intent(activity, FrontActivity.class); startActivity(intent); overridePendingTransition(R.anim.slide_in_bottom, 0); 

    Slide_in_bottom.xml

     <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromYDelta="100%p" android:toYDelta="0%p" android:duration="@android:integer/config_mediumAnimTime" android:interpolator="@android:anim/decelerate_interpolator"> </translate> 

    2) Al volver de FrontActivity a BackActivity, anime el diseño de FrontActivity antes de cerrar FrontActivity!

    Hice esto llamando al método siguiente en mi onOptionsSelected() y mi onBackPressed() en FrontActivity

     private void animateOut() { Animation slideAnim = AnimationUtils.loadAnimation(this,R.anim.slide_out_bottom); slideAnim.setFillAfter(true);; slideAnim.setAnimationListener(new AnimationListener() { public void onAnimationStart(Animation paramAnimation) { } public void onAnimationRepeat(Animation paramAnimation) { } public void onAnimationEnd(Animation paramAnimation) { finish(); // if you call NavUtils.navigateUpFromSameTask(activity); instead, // the screen will flicker once after the animation. Since FrontActivity is // in front of BackActivity, calling finish() should give the same result. overridePendingTransition(0, 0); } }); BackgroundView.startAnimation(slideAnim); } 

    Slide_out_bottom.xml

     <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromYDelta="0%p" android:toYDelta="100%p" android:duration="@android:integer/config_mediumAnimTime" android:interpolator="@android:anim/accelerate_interpolator"> </translate> 

    3) Ahora tenemos que asegurarnos de que BackActivity esté visible detrás de FrontActivity cuando se anima.
    Necesitamos trabajar con temas transparentes para esto.

    Styles.xml

     <resources> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- your theme --> </style> <style name="Theme.Transparent" parent="AppTheme"> <item name="android:windowIsTranslucent">true</item> <item name="android:windowBackground">@android:color/transparent</item> </style> </resources> 

    4) Aplique el tema transparente a FrontActivity en su manifiesto:

    AndroidManifest.xml

     <activity android:name=".FrontActivity" android:theme="@style/Theme.Transparent" android:parentActivityName=".BackActivity" /> 

    5) Debido a que su actividad es ahora transparente, deberá agregar un fondo a BackgroundView. Los fondos estándar son:

     android:background="@android:color/background_light" android:background="@android:color/background_dark" 

    Front_activity.xml

     <?xml version="1.0" encoding="utf-8"?> <!-- This is BackgroundView and can be any ViewGroup --> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_height="match_parent" android:layout_width="match_parent" android:background="@android:color/background_light" > <android.support.v7.widget.Toolbar android:layout_height="@dimen/height_toolbar" android:layout_width="match_parent" android:minHeight="?attr/actionBarSize" android:background="?attr/colorPrimary" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> <!-- rest of layout --> </FrameLayout> 

    Eso es. La animación debería estar funcionando ahora.


    EDITAR

    He encontrado una solución que no parpadea. La animación parece impecable.

    Al cerrar FrontActivity, llame al finish lugar de NavUtils.navigateUpFromSameTask(activity) . He cambiado esto en mi respuesta.

    Puede obtener el comportamiento descrito simplemente sobrepasando la transición entre actividades. También incluyo un efecto de encogimiento gradual en la actividad posterior para mejorar su apariencia:

    Slide_in_right.xml

     <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="@android:integer/config_shortAnimTime"/> </set> 

    Slide_out_right.xml

     <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0" android:toXDelta="100%p" android:duration="@android:integer/config_shortAnimTime"/> </set> 

    Fade_back.xml

     <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:duration="@android:integer/config_shortAnimTime" android:pivotX="50.0%" android:pivotY="50.0%" android:fromXScale="1.0" android:toXScale="0.9" android:fromYScale="1.0" android:toYScale="0.9"/> <alpha android:duration="@android:integer/config_shortAnimTime" android:fromAlpha="1.0" android:toAlpha="0.7"/> </set> 

    Fade_forward.xml

     <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:duration="@android:integer/config_shortAnimTime" android:pivotX="50.0%" android:pivotY="50.0%" android:fromXScale="0.9" android:toXScale="1.0" android:fromYScale="0.9" android:toYScale="1.0"/> <alpha android:duration="@android:integer/config_shortAnimTime" android:fromAlpha="0.7" android:toAlpha="1.0"/> </set> 

    ParentActivity.java

    En una clase padre común para sus actividades, puede incluir su código reutilizable:

     /* Activity transitions */ protected void slideInTransition() { overridePendingTransition(R.anim.slide_in_right, R.anim.fade_back); } protected void slideOutTransition() { overridePendingTransition(R.anim.fade_forward, R.anim.slide_out_right); } 

    Luego en Inicio de Actividad:

     startActivity(intent); slideInTransition(); 

    Para la transición trasera:

     @Override public void onBackPressed() { super.onBackPressed(); slideOutTransition(); } 
    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.