Android实现点击屏幕带滑入滑出动画的Toolbar显示/隐藏

Hey there! Great job getting the basic show/hide functionality working—let's add those smooth slide animations to make it feel polished, just like the scroll-based behavior you already have with CoordinatorLayout.

The Problem with Your Current Code #

Directly toggling setVisibility() skips any transition animation, which is why you're seeing an abrupt change. Instead, we'll animate the translationY property of the Toolbar to slide it in/out of the screen, then sync the visibility and fullscreen flag changes with the animation lifecycle.

Step-by-Step Solution #

1. Ensure Your Root Layout Catches Clicks

First, make sure your root CoordinatorLayout can receive click events (otherwise taps might be swallowed by child views like RecyclerView). Add this to your layout XML:

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/root_coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"> <!-- This lets the layout catch taps -->

    <!-- Your Toolbar, RecyclerView, etc. -->

</androidx.coordinatorlayout.widget.CoordinatorLayout>

2. Add Animated Toggle Logic

Replace your existing click handling code with this. We'll use View.animate() for clean, concise animation control:

// Get reference to your root layout and Toolbar
CoordinatorLayout rootLayout = findViewById(R.id.root_coordinator);
Toolbar toolbar = findViewById(R.id.your_toolbar_id);

rootLayout.setOnClickListener(v -> {
    // Cancel any ongoing animations to avoid conflicts (e.g., with scroll-based animations)
    toolbar.animate().cancel();

    if (toolbar.getTranslationY() == 0) {
        // Slide Toolbar UP and hide it, then enable fullscreen
        toolbar.animate()
                .translationY(-toolbar.getHeight()) // Move Toolbar off-screen top
                .setDuration(300) // Material Design standard animation duration
                .setInterpolator(new AccelerateDecelerateInterpolator()) // Smooth speed curve
                .withEndAction(() -> {
                    // Only hide the Toolbar after animation finishes
                    toolbar.setVisibility(View.GONE);
                    // Enable fullscreen mode
                    getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
                });
    } else {
        // Disable fullscreen first, then slide Toolbar DOWN into view
        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        toolbar.setVisibility(View.VISIBLE); // Make Toolbar visible before animating
        toolbar.animate()
                .translationY(0) // Move Toolbar back to original position
                .setDuration(300)
                .setInterpolator(new AccelerateDecelerateInterpolator());
    }
});

Key Details Explained #

• translationY: This property moves the Toolbar vertically without changing its layout position—perfect for slide animations.
• Animation Timing: 300ms is the standard for Material Design transitions, making the feel consistent with system animations.
• withEndAction(): We wait until the slide-up animation finishes before hiding the Toolbar and enabling fullscreen, so users see the full animation.
• Cancel Ongoing Animations: If the user taps while the Toolbar is already animating (e.g., from a scroll), we cancel the existing animation to prevent jank.

Bonus: Customizing the Animation #

If you want more control (like different interpolators or animation listeners), you can use ObjectAnimator instead:

// Example of hiding with ObjectAnimator
ObjectAnimator hideAnimator = ObjectAnimator.ofFloat(toolbar, "translationY", 0, -toolbar.getHeight());
hideAnimator.setDuration(300);
hideAnimator.setInterpolator(new DecelerateInterpolator()); // Slow down at the end
hideAnimator.addListener(new Animator.AnimatorListener() {
    @Override
    public void onAnimationStart(Animator animation) {}

    @Override
    public void onAnimationEnd(Animator animation) {
        toolbar.setVisibility(View.GONE);
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
    }

    @Override
    public void onAnimationCancel(Animator animation) {}

    @Override
    public void onAnimationRepeat(Animator animation) {}
});
hideAnimator.start();

This should give you the smooth slide-in/slide-out behavior you're looking for, perfectly synced with fullscreen mode changes!

内容的提问来源于stack exchange，提问作者Faisal Shaikh