Ein- und Ausblenden einer Ansicht mit einer Slide-Up/Down-Animation

Ich habe ein LinearLayout die ich mit ein- oder ausblenden möchte Animation das das Layout nach oben oder unten verschiebt, wenn ich seine Sichtbarkeit ändere.

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

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

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

Schieben a View mit Abstand nach unten:

view.animate().translationY(distance);

Sie können die später schieben View zurück in seine ursprüngliche Position wie folgt:

view.animate().translationY(0);

Sie können auch problemlos mehrere Animationen kombinieren. Die folgende Animation zeigt a View um die Höhe nach unten und gleichzeitig einblenden:

// 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);

Die kannst du dann ausblenden View herausziehen und wieder in seine ursprüngliche Position schieben. Wir setzen auch ein AnimatorListener damit wir die Sichtbarkeit der einstellen können View zurück zu GONE Sobald die Animation fertig ist:

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

Ich hatte Probleme, 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);

        // 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;
    }
}

activity_mail.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>

Anmerkungen

• Dank an Dieser Beitrag dafür, dass du mich in die richtige Richtung weist. Es war hilfreicher als die anderen Antworten auf dieser Seite.
• Wenn Sie mit der Ansicht auf dem Bildschirm beginnen möchten, initialisieren Sie sie nicht als INVISIBLE.
• Da wir es vollständig außerhalb des Bildschirms animieren, ist es nicht erforderlich, es wieder auf zu setzen INVISIBLE. Wenn Sie jedoch nicht vollständig außerhalb des Bildschirms animieren, können Sie eine Alpha-Animation hinzufügen und die Sichtbarkeit mit festlegen AnimatorListenerAdapter.
• Dokumente zur Eigenschaftsanimation

Jetzt sollten Animationen zur Änderung der Sichtbarkeit über ausgeführt werden Transition API die im Support-Paket (androidx) verfügbar sind. Ruf einfach an TransitionManager.beginDelayedTransition Methode mit Rutschen Übergang und ändern Sie 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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="play" />

    <LinearLayout
        android:id="@+id/redLayout"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:background="#5f00"
        android:layout_alignParentBottom="true" />
</RelativeLayout>

Überprüfen Sie diese Antwort mit anderen standardmäßigen und benutzerdefinierten Übergangsbeispielen.

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

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

<LinearLayout android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:animateLayoutChanges="true"
    >

    <Views_which_change_visibility>

</LinearLayout>

Näheres dazu finden Sie auf Animieren von Layoutänderungen – Android-Entwickler

Kotlin

Basierend auf der Antwort von Suragch ist hier eine elegante Möglichkeit, die 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, wo immer Sie es verwenden möchten, brauchen Sie nur myView.slideUp() oder myView.slideDown()

Sie können das richtige starten Animation wenn die Sichtbarkeit der LinearLayout Änderungen durch Erstellen einer neuen Unterklasse von LinearLayout und überschreiben setVisibility() zu starten Animations. Betrachten Sie so etwas:

public class SimpleViewAnimator extends LinearLayout
{
    private Animation inAnimation;
    private Animation outAnimation;

    public SimpleViewAnimator(Context context)
    {
        super(context);
    }

    public void setInAnimation(Animation inAnimation)
    {
        this.inAnimation = inAnimation;
    }

    public void setOutAnimation(Animation outAnimation)
    {
        this.outAnimation = outAnimation;
    }

    @Override
    public void setVisibility(int visibility)
    {
        if (getVisibility() != visibility)
        {
            if (visibility == VISIBLE)
            {
                if (inAnimation != null) startAnimation(inAnimation);
            }
            else if ((visibility == INVISIBLE) || (visibility == GONE))
            {
                if (outAnimation != null) startAnimation(outAnimation);
            }
        }

        super.setVisibility(visibility);
    }
}

if (filter_section.getVisibility() == View.GONE) {
    filter_section.animate()
            .translationY(filter_section.getHeight()).alpha(1.0f)
            .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationStart(Animator animation) {
                    super.onAnimationStart(animation);
                    filter_section.setVisibility(View.VISIBLE);
                    filter_section.setAlpha(0.0f);
                }
            });
} else {
    filter_section.animate()
            .translationY(0).alpha(0.0f)
            .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    filter_section.setVisibility(View.GONE);
                }
            });
}