Mostrar y ocultar una vista con una animación de deslizamiento hacia arriba/abajo
Tengo un LinearLayout
que quiero mostrar u ocultar con un Animation
que empuja el diseño hacia arriba o hacia abajo cada vez que cambio su visibilidad.
He visto algunas muestras por ahí pero ninguna se adapta a mis necesidades.
He creado dos archivos xml para las animaciones pero no sé cómo iniciarlos cuando cambio la visibilidad de un LinearLayout
.
Con la nueva API de animación que se introdujo en Android 3.0 (Honeycomb), es muy sencillo crear este tipo de animaciones.
Deslizándose hacia View
abajo por una distancia:
view.animate().translationY(distance);
Luego podrás deslizar la View
parte trasera a su posición original de esta manera:
view.animate().translationY(0);
También puedes combinar fácilmente varias animaciones. La siguiente animación se deslizará hacia View
abajo por su altura y se desvanecerá al mismo tiempo:
// Prepare the View for the animation
view.setVisibility(View.VISIBLE);
view.setAlpha(0.0f);
// Start the animation
view.animate()
.translationY(view.getHeight())
.alpha(1.0f)
.setListener(null);
Luego puede desvanecer la View
parte posterior y deslizarla nuevamente a su posición original. También configuramos un modo AnimatorListener
para que podamos configurar la visibilidad de la View
parte posterior GONE
una vez que finalice la animación:
view.animate()
.translationY(0)
.alpha(0.0f)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
view.setVisibility(View.GONE);
}
});
Estaba teniendo problemas para entender y aplicar la respuesta aceptada. Necesitaba un poco más de contexto. Ahora que lo he descubierto, aquí hay un ejemplo completo:
Actividad principal.java
public class MainActivity extends AppCompatActivity {
Button myButton;
View myView;
boolean isUp;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myView = findViewById(R.id.my_view);
myButton = findViewById(R.id.my_button);
// initialize as invisible (could also do in xml)
myView.setVisibility(View.INVISIBLE);
myButton.setText("Slide up");
isUp = false;
}
// slide the view from below itself to the current position
public void slideUp(View view){
view.setVisibility(View.VISIBLE);
TranslateAnimation animate = new TranslateAnimation(
0, // fromXDelta
0, // toXDelta
view.getHeight(), // fromYDelta
0); // toYDelta
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
}
// slide the view from its current position to below itself
public void slideDown(View view){
TranslateAnimation animate = new TranslateAnimation(
0, // fromXDelta
0, // toXDelta
0, // fromYDelta
view.getHeight()); // toYDelta
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
}
public void onSlideViewButtonClick(View view) {
if (isUp) {
slideDown(myView);
myButton.setText("Slide up");
} else {
slideUp(myView);
myButton.setText("Slide down");
}
isUp = !isUp;
}
}
actividad_correo.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.slideview.MainActivity">
<Button
android:id="@+id/my_button"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:onClick="onSlideViewButtonClick"
android:layout_width="150dp"
android:layout_height="wrap_content"/>
<LinearLayout
android:id="@+id/my_view"
android:background="#a6e1aa"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="200dp">
</LinearLayout>
</RelativeLayout>
Notas
- Gracias a este artículo por indicarme la dirección correcta. Fue más útil que las otras respuestas en esta página.
- Si desea comenzar con la vista en pantalla, no la inicialice como
INVISIBLE
. - Dado que lo estamos animando completamente fuera de la pantalla, no es necesario volver a configurarlo
INVISIBLE
. Sin embargo, si no estás animando completamente fuera de la pantalla, puedes agregar una animación alfa y configurar la visibilidad con un archivoAnimatorListenerAdapter
. - Documentos de animación de propiedades