如何实现弹窗视图显示在键盘指定按键上方而非整个Activity之上

核心思路 #

使用PopupWindow承载预览视图，悬浮在按键上方显示，完全不占用原键盘布局空间，避免挤压或移位问题。以下是具体实现步骤：

步骤1：创建预览弹窗布局 #

新建res/layout/key_preview.xml，作为预览弹窗的UI：

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardElevation="8dp">

    <TextView
        android:id="@+id/preview_text"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:gravity="center"
        android:textSize="24sp"
        android:text="A" />

</androidx.cardview.widget.CardView>

步骤2：简化KeyView布局 #

修改原KeyView布局，移除内部的预览CardView，固定父布局高度确保键盘布局稳定：

<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="match_parent"
    android:layout_height="@dimen/KeyViewHeight">

    <androidx.cardview.widget.CardView
        android:id="@+id/letterCard"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <TextView
            android:id="@+id/letterTextView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:minWidth="20dp"
            android:text="A" />

    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

步骤3：实现KeyView的触摸逻辑与弹窗控制 #

编写KeyView类，处理触摸事件并控制预览弹窗的显示/隐藏：

class KeyView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : ConstraintLayout(context, attrs, defStyleAttr) {

    private val letterTextView: TextView
    private var previewPopup: PopupWindow? = null
    private var previewText: TextView? = null

    init {
        inflate(context, R.layout.key_view, this)
        letterTextView = findViewById(R.id.letterTextView)

        // 初始化预览弹窗
        val previewView = LayoutInflater.from(context).inflate(R.layout.key_preview, null)
        previewText = previewView.findViewById(R.id.preview_text)
        previewPopup = PopupWindow(
            previewView,
            ViewGroup.LayoutParams.WRAP_CONTENT,
            ViewGroup.LayoutParams.WRAP_CONTENT,
            false
        ).apply {
            isOutsideTouchable = false
            elevation = 8f
        }

        // 绑定触摸事件
        setOnTouchListener { _, event ->
            when (event.action) {
                MotionEvent.ACTION_DOWN -> {
                    showPreview()
                    true
                }
                MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
                    hidePreview()
                    true
                }
                else -> false
            }
        }

        // 读取自定义属性（可选，直接在布局中设置按键文本）
        attrs?.let {
            val typedArray = context.obtainStyledAttributes(it, R.styleable.KeyView)
            val text = typedArray.getString(R.styleable.KeyView_keyText)
            letterTextView.text = text
            previewText?.text = text
            typedArray.recycle()
        }
    }

    private fun showPreview() {
        previewPopup?.let { popup ->
            if (!popup.isShowing) {
                // 获取按键在屏幕上的绝对坐标
                val location = IntArray(2)
                getLocationOnScreen(location)
                val keyX = location[0]
                val keyY = location[1]
                val keyWidth = width
                val previewWidth = popup.contentView.width

                // 计算弹窗位置：按键上方居中，预留16dp间距
                val popupX = keyX + (keyWidth - previewWidth) / 2
                val popupY = keyY - popup.contentView.height - resources.getDimensionPixelSize(R.dimen.preview_margin_top)

                popup.showAtLocation(this, Gravity.NO_GRAVITY, popupX, popupY)
            }
        }
    }

    private fun hidePreview() {
        previewPopup?.dismiss()
    }

    // 对外提供设置文本的方法
    fun setKeyText(text: String) {
        letterTextView.text = text
        previewText?.text = text
    }
}

步骤4：添加自定义属性（可选） #

在res/values/attrs.xml中添加自定义属性，方便在布局中直接设置按键文本：

<resources>
    <declare-styleable name="KeyView">
        <attr name="keyText" format="string" />
    </declare-styleable>
</resources>

步骤5：在键盘布局中使用KeyView #

通过LinearLayout分行布局按键，示例如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <!-- 第一行按键 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <com.yourpackage.KeyView
            android:layout_width="0dp"
            android:layout_height="@dimen/KeyViewHeight"
            android:layout_weight="1"
            app:keyText="Q" />

        <com.yourpackage.KeyView
            android:layout_width="0dp"
            android:layout_height="@dimen/KeyViewHeight"
            android:layout_weight="1"
            app:keyText="W" />

        <!-- 其他按键依次添加 -->
    </LinearLayout>

    <!-- 后续行布局 -->
</LinearLayout>

关键说明 #

• 弹窗采用悬浮方式，完全不影响原键盘布局结构
• 触摸事件精准控制预览的显示/隐藏，仅在按键按下时触发
• 通过绝对坐标计算确保预览始终对齐按键上方中心位置
• 弹窗样式可通过修改key_preview.xml自由调整

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