Mostrar y ocultar una vista con una animación de deslizamiento hacia arriba/abajo

Resuelto MichelReap asked hace 54 años • 20 respuestas

Tengo un LinearLayoutque quiero mostrar u ocultar con un Animationque 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.

MichelReap avatar Jan 01 '70 08:01 MichelReap
Aceptado

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 Viewabajo por una distancia:

view.animate().translationY(distance);

Luego podrás deslizar la Viewparte 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 Viewabajo 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 Viewparte posterior y deslizarla nuevamente a su posición original. También configuramos un modo AnimatorListenerpara que podamos configurar la visibilidad de la Viewparte posterior GONEuna 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);
        }
    });
Xaver Kapeller avatar Nov 04 '2013 10:11 Xaver Kapeller

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:

ingrese la descripción de la imagen aquí

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 archivo AnimatorListenerAdapter.
  • Documentos de animación de propiedades
Suragch avatar Oct 09 '2017 10:10 Suragch