如何在RecyclerView Item外部绘制悬浮视图？设clipChildren仍被遮挡

我想在RecyclerView的Item外部绘制悬浮视图，效果类似Excel的单元格提示框，仅部分Item需要添加该视图。已经设置了clipChildren="false"，但悬浮视图仍然被其他Item遮挡。

现有布局代码 #

Item布局 #

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:clipChildren="false"
    android:orientation="vertical">

    <View
        android:id="@+id/box"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#f0f0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:layout_width="30dp"
        android:layout_height="20dp"
        android:background="#ff00"
        android:translationX="10dp"
        android:translationY="15dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Activity布局 #

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    android:clipChildren="false"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipChildren="false"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果对比 #

• 当前效果：悬浮视图被相邻Item遮挡
• 期望效果：悬浮视图完整显示在Item上方，不被其他Item遮挡

1. 补充RecyclerView的clipToPadding和padding设置 #

只设置clipChildren="false"不够，还得给RecyclerView加上clipToPadding="false"，同时根据悬浮视图超出的方向添加对应padding，给悬浮视图留出显示空间。比如你的悬浮视图向右下方超出，就给RecyclerView的底部和右侧加padding：

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipChildren="false"
    android:clipToPadding="false"
    android:paddingBottom="30dp"
    android:paddingEnd="40dp"
    app:layout_constraintTop_toTopOf="parent" />

2. 提升悬浮视图的层级 #

给Item里的悬浮视图设置更高的elevation，或者在代码里强制把它调到最上层：

• XML直接加elevation：

<View
    android:layout_width="30dp"
    android:layout_height="20dp"
    android:background="#ff00"
    android:translationX="10dp"
    android:translationY="15dp"
    android:elevation="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

• Adapter中代码设置：

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    // 其他绑定逻辑
    holder.floatingView.bringToFront()
}

3. 改用父容器挂载悬浮视图（彻底解决遮挡） #

如果前两种方法还是有问题，直接把悬浮视图加到RecyclerView的父容器里，通过计算Item的位置来动态调整悬浮视图的坐标：

// 在Adapter的onBindViewHolder中处理
val itemView = holder.itemView
val location = IntArray(2)
itemView.getLocationInWindow(location)

// 加载悬浮视图布局
val floatingView = LayoutInflater.from(context).inflate(R.layout.your_floating_layout, parentContainer, false)
parentContainer.addView(floatingView)

// 设置悬浮视图的位置（对应原来的translation值）
val layoutParams = floatingView.layoutParams as ConstraintLayout.LayoutParams
layoutParams.leftMargin = location[0] + 10
layoutParams.topMargin = location[1] + 15
floatingView.layoutParams = layoutParams

这种方式下，悬浮视图不属于Item的子View，自然不会被其他Item遮挡。

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