Zeigen und Verbergen einer Ansicht mit einer Slide-Up/Down-Animation

Question

Ich habe ein LinearLayout, das ich mit einer Animation zeigen oder verstecken möchte, die das Layout nach oben oder unten schiebt, wenn ich seine Sichtbarkeit ändere.

Ich habe einige Beispiele gesehen, aber keines davon entspricht meinen Bedürfnissen.

Ich habe zwei XML-Dateien für die Animationen erstellt, weiß aber nicht, wie ich sie starten soll, wenn ich die Sichtbarkeit eines LinearLayout ändere.

Answer 1

Mit der neuen Animations-API, die in Android 3.0 (Honeycomb) eingeführt wurde, ist es sehr einfach, solche Animationen zu erstellen.

Das Verschieben einer View um eine bestimmte Distanz nach unten:

view.animate().translationY(distance);

Sie können später die View wieder in ihre Ursprungsposition zurückverschieben, wie folgt:

view.animate().translationY(0);

---

Sie können auch ganz einfach mehrere Animationen kombinieren. Die folgende Animation verschiebt eine View um ihre Höhe nach unten und lässt sie gleichzeitig einblenden:

// Bereiten Sie die View für die Animation vor
view.setVisibility(View.VISIBLE);
view.setAlpha(0.0f);

// Starten Sie die Animation
view.animate()
    .translationY(view.getHeight())
    .alpha(1.0f)
    .setListener(null);

Anschließend können Sie die View wieder ausblenden und in ihre Ursprungsposition zurückverschieben. Außerdem setzen wir einen AnimatorListener, damit wir die Sichtbarkeit der View wieder auf GONE setzen können, sobald die Animation abgeschlossen ist:

view.animate()
    .translationY(0)
    .alpha(0.0f)
    .setListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            view.setVisibility(View.GONE);
        }
    });

Answer 2

Ich hatte Schwierigkeiten, die akzeptierte Antwort zu verstehen und anzuwenden. Ich brauchte etwas mehr Kontext. Jetzt, wo ich es herausgefunden habe, hier ist ein vollständiges Beispiel:

MainActivity.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);

        // als unsichtbar initialisieren (könnte auch in XML erfolgen)
        myView.setVisibility(View.INVISIBLE);
        myButton.setText("Nach oben schieben");
        isUp = false;
    }

    // die Ansicht von unten zur aktuellen Position schieben
    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);
    }

    // die Ansicht von der aktuellen Position nach unten schieben
    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("Nach oben schieben");
        } else {
            slideUp(myView);
            myButton.setText("Nach unten schieben");
        }
        isUp = !isUp;
    }
}

activity_mail.xml

Notizen

• Dank diesem Artikel für die richtige Richtung. Er war hilfreicher als die anderen Antworten auf dieser Seite.
• Wenn Sie die Ansicht auf dem Bildschirm starten möchten, initialisieren Sie sie nicht als INVISIBLE.
• Da wir es komplett aus dem Bildschirm heraus animieren, ist es nicht notwendig, es wieder auf INVISIBLE zu setzen. Wenn Sie es jedoch nicht komplett aus dem Bildschirm animieren, können Sie eine Alpha-Animation hinzufügen und die Sichtbarkeit mit einem AnimatorListenerAdapter setzen.
• Dokumentation zu Property Animation

Answer 3

Jetzt sollten Änderungen der Sichtbarkeitsanimationen über die Transition API durchgeführt werden, die im Support (androidx) Package verfügbar ist. Rufen Sie einfach die Methode TransitionManager.beginDelayedTransition mit Slide Transition auf und ändern dann die Sichtbarkeit der Ansicht.

import androidx.transition.Slide;
import androidx.transition.Transition;
import androidx.transition.TransitionManager;

private void toggle(boolean show) {
    View redLayout = findViewById(R.id.redLayout);
    ViewGroup parent = findViewById(R.id.parent);

    Transition transition = new Slide(Gravity.BOTTOM);
    transition.setDuration(600);
    transition.addTarget(R.id.redLayout);

    TransitionManager.beginDelayedTransition(parent, transition);
    redLayout.setVisibility(show ? View.VISIBLE : View.GONE);
}

activity_main.xml

Überprüfen Sie diese Antwort mit weiteren Beispielen für standardmäßige und benutzerdefinierte Übergänge.

Answer 4

Einfachste Lösung: Setzen Sie android:animateLayoutChanges="true" auf den Container, der Ihre Ansichten enthält.

Um es in einen Zusammenhang zu setzen: Wenn Sie ein Layout wie unten haben, werden alle Sichtbarkeitsänderungen der Ansichten in diesem Container automatisch animiert.

Weitere Details zu finden Sie unter Animieren von Layout-Änderungen - Android-Entwickler

Answer 5

Kotlin

Basierend auf Suragch's Antwort, hier ist ein eleganter Weg, um eine View-Erweiterung zu verwenden:

fun View.slideUp(duration: Int = 500) {
    visibility = View.VISIBLE
    val animate = TranslateAnimation(0f, 0f, this.height.toFloat(), 0f)
    animate.duration = duration.toLong()
    animate.fillAfter = true
    this.startAnimation(animate)
}

fun View.slideDown(duration: Int = 500) {
    visibility = View.VISIBLE
    val animate = TranslateAnimation(0f, 0f, 0f, this.height.toFloat())
    animate.duration = duration.toLong()
    animate.fillAfter = true
    this.startAnimation(animate)
}

Und dann überall dort, wo Sie es verwenden möchten, benötigen Sie nur myView.slideUp() oder myView.slideDown()