如何为ExoPlayer2控制器视图添加显示/隐藏淡入淡出动画？

Hey there! Awesome that your ExoPlayer setup is running smoothly already—adding that YouTube-style fade animation for the controller is totally straightforward, and I’ve got a clear, step-by-step guide to help you pull it off.

Step 1: Create a Custom PlayerControlView Subclass #

We’ll override the default show() and hide() methods of PlayerControlView to use smooth alpha animations instead of instant visibility changes. Here’s the code:

class FadingPlayerControlView(context: Context, attrs: AttributeSet?) : PlayerControlView(context, attrs) {
    // Match YouTube's typical fade timing (300ms for both in/out)
    private val fadeDuration = 300L

    init {
        // Start hidden with full transparency
        alpha = 0f
        visibility = View.GONE
    }

    override fun show() {
        // Cancel any ongoing fade-out animation first
        animate().cancel()
        
        // Trigger fade-in: make visible first, then animate to full opacity
        animate()
            .alpha(1f)
            .setDuration(fadeDuration)
            .setListener(object : Animator.AnimatorListener {
                override fun onAnimationStart(animation: Animator?) {
                    visibility = View.VISIBLE
                }
                override fun onAnimationEnd(animation: Animator?) {}
                override fun onAnimationCancel(animation: Animator?) {}
                override fun onAnimationRepeat(animation: Animator?) {}
            })
    }

    override fun hide() {
        // Cancel any ongoing fade-in animation first
        animate().cancel()
        
        // Trigger fade-out: animate to full transparency, then hide
        animate()
            .alpha(0f)
            .setDuration(fadeDuration)
            .setListener(object : Animator.AnimatorListener {
                override fun onAnimationStart(animation: Animator?) {}
                override fun onAnimationEnd(animation: Animator?) {
                    visibility = View.GONE
                }
                override fun onAnimationCancel(animation: Animator?) {
                    visibility = View.GONE
                }
                override fun onAnimationRepeat(animation: Animator?) {}
            })
    }
}

Step 2: Update Your Custom Controller Layout #

Swap out the root view in your exo_player_controller_view.xml with your new custom class (make sure to use your full package name):

<?xml version="1.0" encoding="utf-8"?>
<com.your.app.package.FadingPlayerControlView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@color/black_70"> <!-- Use a semi-transparent background for YouTube-like feel -->

    <!-- Keep all your existing controller UI elements here: play/pause button, progress bar, time labels, etc. -->

</com.your.app.package.FadingPlayerControlView>

Step 3: Hook Up the Custom Controller to Your PlayerView #

In your Activity or Fragment, initialize the PlayerView and attach your custom controller, plus configure auto-hide settings:

val playerView = findViewById<PlayerView>(R.id.player_view)

// Inflate your custom controller layout and cast it to our fading class
val customController = layoutInflater.inflate(
    R.layout.exo_player_controller_view,
    playerView,
    false
) as FadingPlayerControlView

// Attach the custom controller to the PlayerView
playerView.setControllerView(customController)

// Match YouTube's auto-hide timing (3 seconds of inactivity before hiding)
playerView.controllerHideTimeoutMs = 3000
// Enable auto-show/hide behavior
playerView.controllerAutoShow = true
playerView.controllerAutoHide = true

Quick Optimizations for a Polished Look #

• Adjust the fadeDuration value if you want faster/slower animations (300ms is spot-on for YouTube’s feel).
• Ensure your controller uses a semi-transparent background to make the fade effect more natural.
• The PlayerView’s default tap-to-toggle behavior will automatically trigger show() and hide() on your custom controller, so no extra code needed for that!

That’s it—your controller will now smoothly fade in when needed and fade out after idle time, just like YouTube’s player.

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