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

Suragchs Antwort in Kotlin. Das hat für mich funktioniert.

class MainActivity : AppCompatActivity() {

var isUp: Boolean = false

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    var myView: View = findViewById(R.id.my_view)
    var myButton: Button = findViewById(R.id.my_button)

    //Als unsichtbar initialisieren
    myView.visibility = View.INVISIBLE
    myButton.setText("Nach oben schieben")

    isUp = false

}

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)
}

fun onSlideViewButtonClick(view: View){
    if(isUp){
        my_view.slideDown()
        my_button.setText("Nach oben schieben")

    }
    else{
        my_view.slideUp()
        my_button.setText("Nach unten schieben")
    }
    isUp = !isUp
}

}

Answer 2

Von der Antwort von ashakirov für den Kotlin Benutzer

 val transition: Transition = Slide(Gravity.BOTTOM)
                transition.duration = 600
                transition.addTarget(you_parent_layout_id)
TransitionManager.beginDelayedTransition(rootLayoutId, transition)
                yourViewIdToHide.visibility = if (yourViewIdToHide.isShown) View.GONE else View.VISIBLE

Answer 3

Hier ist meine Lösung. Holen Sie sich einfach einen Verweis auf Ihre Ansicht und rufen Sie diese Methode auf:

public static void animateViewFromBottomToTop(final View view){

    view.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {

        @Override
        public void onGlobalLayout() {

            view.getViewTreeObserver().removeOnGlobalLayoutListener(this);

            final int TRANSLATION_Y = view.getHeight();
            view.setTranslationY(TRANSLATION_Y);
            view.setVisibility(View.GONE);
            view.animate()
                .translationYBy(-TRANSLATION_Y)
                .setDuration(500)
                .setStartDelay(200)
                .setListener(new AnimatorListenerAdapter() {

                    @Override
                    public void onAnimationStart(final Animator animation) {

                        view.setVisibility(View.VISIBLE);
                    }
                })
                .start();
        }
    });
}

Es ist nichts weiter zu tun =)

Answer 4

Hier ist eine weitere Möglichkeit, dies für mehrere Button zu tun (in diesem Fall ImageView)

MainActivity.java

findViewById(R.id.arrowIV).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                if (strokeWidthIV.getAlpha() == 0f) {
                    findViewById(R.id.arrowIV).animate().rotationBy(180);

                    strokeWidthIV.animate().translationXBy(-120 * 4).alpha(1f);
                    findViewById(R.id.colorChooseIV).animate().translationXBy(-120 * 3).alpha(1f);
                    findViewById(R.id.saveIV).animate().translationXBy(-120 * 2).alpha(1f);
                    findViewById(R.id.clearAllIV).animate().translationXBy(-120).alpha(1f);
                } else {
                    findViewById(R.id.arrowIV).animate().rotationBy(180);

                    strokeWidthIV.animate().translationXBy(120 * 4).alpha(0f);
                    findViewById(R.id.colorChooseIV).animate().translationXBy(120 * 3).alpha(0f);
                    findViewById(R.id.saveIV).animate().translationXBy(120 * 2).alpha(0f);
                    findViewById(R.id.clearAllIV).animate().translationXBy(120).alpha(0f);
                }
            }
        });

activity_main.xml

Answer 5

Eine vollständige Antwort, die die Sichtbarkeit beim Klicken umschaltet, auch den Pfeil umdreht und andere Ansichten beim Ausblenden der Komponente auch glatt nach oben bewegt.

private fun toggleRecyclerViewVisibility(
    recyclerView: RecyclerView,
    container: FrameLayout,
    arrow: ImageView
) {
    // Pfeilrichtung umschalten, auch Benutzerklicks blockieren, bis die Animation beendet ist.
    arrow
        .animate()
        .rotation(
            if (arrow.rotation == 0F)
                180F
            else 0F
        )
        .withStartAction { container.isClickable = false }
        .withEndAction { container.isClickable = true }
        .start()

    // Umschalten der RecyclerView-Sichtbarkeit mit Animation.
    with(recyclerView) {
        var cof = -1
        var vis = View.GONE
        var alph = 0F

        if (visibility == View.GONE) {
            cof = 0
            vis = View.VISIBLE
            alph = 1F
        }
        animate()
            .translationY(height.toFloat() * cof)
            .alpha(alph)
            .withStartAction {// Im Falle des Anzeigens der RecyclerView am Anfang anzeigen.
                if (vis == View.VISIBLE)
                    visibility = View.VISIBLE
            }
            .withEndAction {// Im Falle des Ausblendens der RecyclerView am Ende ausblenden.
                if (vis == View.GONE)
                    visibility = View.GONE
            }
            .start()
    }
}

Die Ansichten sehen so aus

dann fügst du in deinem Code zuerst diese Zeile hinzu, die das Problem löst, dass animateLayoutChanges nicht in großen verschachtelten Ansichten funktioniert, was im Grunde andere Ansichten glatt nach oben bewegt, wenn die RecyclerView ausgeblendet wird

subRootLinearView.layoutTransition.enableTransitionType(LayoutTransition.CHANGING)

auch sollte dein übergeordneter LinearLayout dieses Attribut enthalten

android:animateLayoutChanges="true"

dann rufe die Methode mit deinen Ansichten auf

 toggleRecyclerViewVisibility(
                    recycler,
                    header,
                    arrowImageView
                )