Android Kotlin中如何让Konfetti动画覆盖按钮？

问题核心原因 #

在ConstraintLayout（以及绝大多数Android布局容器）中，视图的绘制层级由XML里的声明顺序决定：后写的视图会绘制在前面的视图之上。你当前的布局里先声明了KonfettiView，后声明Button，所以按钮自然会挡住动画。

两种可行解决方向 #

方向1：调整XML视图顺序（最简单） #

直接把KonfettiView的代码块移到Button之后，这样它就会覆盖在按钮上方：

修改后的布局代码：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activities.KonfettiIt">

    <Button
        android:id="@+id/showkonfetti"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:text="show confetti"/>

    <nl.dionsegijn.konfetti.xml.KonfettiView
        android:id="@+id/konfettiView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

方向2：使用ViewOverlay（适合动态添加场景） #

如果需要在代码里动态控制层级，可以使用ViewOverlay将Konfetti的动画绘制到布局的Overlay上，示例代码调整如下：

修改doKonfetti()方法：

private fun doKonfetti() {
    val party = Party(
        colors = listOf(Color.YELLOW, Color.GREEN, Color.MAGENTA),
        angle = 0,
        spread = 360,
        speed = 1f,
        maxSpeed = 10f,
        fadeOutEnabled = true,
        timeToLive = 2000L,
        shapes = listOf(Shape.Square, Shape.Circle),
        size = listOf(Size(12)),
        position = Position.Relative(0.0, 0.0).between(Position.Relative(1.0, 0.0)),
        emitter = Emitter(duration = 5, TimeUnit.SECONDS).perSecond(300)
    )

    // 将KonfettiView添加到根布局的Overlay层
    val rootOverlay = konfettiBinding.root.overlay
    rootOverlay.add(konfettiBinding.konfettiView)
    konfettiBinding.konfettiView.start(party)
    
    // 动画结束后移除视图，避免内存泄漏
    konfettiBinding.konfettiView.postDelayed({
        rootOverlay.remove(konfettiBinding.konfettiView)
    }, 5000)
}

注意：使用Overlay时必须在动画结束后移除视图，防止内存泄漏。

验证说明 #

两种方法都能实现Konfetti动画覆盖按钮的效果，方向1是最直接高效的方案，适合静态布局场景；方向2适合需要动态控制视图层级的复杂场景。

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