控制PopupWindow的显示位置

最新推荐文章于 2025-06-05 21:27:41 发布

Duckdan

最新推荐文章于 2025-06-05 21:27:41 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # Android学习记录

本文链接：https://blog.youkuaiyun.com/Duckdan/article/details/87367168

Android学习记录专栏收录该内容

46 篇文章

订阅专栏

本文详细介绍如何在不同设备尺寸下调整PopupWindow的宽度，并精确控制其相对于触发控件的位置，包括居中、居右及箭头对齐的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、PopupWindow在控件的下方展示

1.1 PopupWindow的宽度为设备的0.5倍

PopupWindow显示的代码

fun showPopupWindow(view: View) {
        val displayMetrics = resources.displayMetrics
        val widthPixels = displayMetrics.widthPixels
        val heightPixels = displayMetrics.heightPixels
        if (popupWindow == null) {
            popupWindow = PopupWindow()
            val helpLayout = View.inflate(this, R.layout.bubble_item, null)
            helpLayout.setOnClickListener {
                if (popupWindow != null && popupWindow!!.isShowing()) {
                    popupWindow!!.dismiss()
                }
            }


            popupWindow!!.contentView = helpLayout
            popupWindow!!.width = (widthPixels * 0.5).toInt()
            popupWindow!!.height = WindowManager.LayoutParams.WRAP_CONTENT
            popupWindow!!.isTouchable = true
            popupWindow!!.isFocusable = true
            popupWindow!!.isOutsideTouchable = true
        }
        Log.e("zuobiao", "$widthPixels===$heightPixels===${displayMetrics.density}")
        Log.e("zuobiao", "${view.width}=宽高=${view.height}")
        Log.e("zuobiao", "${view.x}=坐标点xy=${view.y}")
        //相对于控件的缩放和旋转的中心点
        Log.e("zuobiao", "${view.pivotX}=坐标点=${view.pivotY}")
        popupWindow!!.showAsDropDown(view)
    }

Log日志

此时PopupWindow展示效果图如下所示：

1.2 PopupWindow的宽度为设备的0.6倍

PopupWindow显示的代码

fun showPopupWindow(view: View) {
        val displayMetrics = resources.displayMetrics
        val widthPixels = displayMetrics.widthPixels
        val heightPixels = displayMetrics.heightPixels
        if (popupWindow == null) {
            popupWindow = PopupWindow()
            val helpLayout = View.inflate(this, R.layout.bubble_item, null)
            helpLayout.setOnClickListener {
                if (popupWindow != null && popupWindow!!.isShowing()) {
                    popupWindow!!.dismiss()
                }
            }


            popupWindow!!.contentView = helpLayout
            popupWindow!!.width = (widthPixels * 0.6).toInt() //0.6倍的实现
            popupWindow!!.height = WindowManager.LayoutParams.WRAP_CONTENT
            popupWindow!!.isTouchable = true
            popupWindow!!.isFocusable = true
            popupWindow!!.isOutsideTouchable = true
        }
        Log.e("zuobiao", "$widthPixels===$heightPixels===${displayMetrics.density}")
        Log.e("zuobiao", "${view.width}=宽高=${view.height}")
        Log.e("zuobiao", "${view.x}=坐标点xy=${view.y}")
        //相对于控件的缩放和旋转的中心点
        Log.e("zuobiao", "${view.pivotX}=坐标点=${view.pivotY}")
        popupWindow!!.showAsDropDown(view)
    }

Log日志

此时PopupWindow展示效果图如下所示：

1.3 PopupWindow的宽度为设备的0.4倍

PopupWindow显示的代码

fun showPopupWindow(view: View) {
        val displayMetrics = resources.displayMetrics
        val widthPixels = displayMetrics.widthPixels
        val heightPixels = displayMetrics.heightPixels
        if (popupWindow == null) {
            popupWindow = PopupWindow()
            val helpLayout = View.inflate(this, R.layout.bubble_item, null)
            helpLayout.setOnClickListener {
                if (popupWindow != null && popupWindow!!.isShowing()) {
                    popupWindow!!.dismiss()
                }
            }


            popupWindow!!.contentView = helpLayout
            popupWindow!!.width = (widthPixels * 0.4).toInt() //0.4倍的实现
            popupWindow!!.height = WindowManager.LayoutParams.WRAP_CONTENT
            popupWindow!!.isTouchable = true
            popupWindow!!.isFocusable = true
            popupWindow!!.isOutsideTouchable = true
        }
        Log.e("zuobiao", "$widthPixels===$heightPixels===${displayMetrics.density}")
        Log.e("zuobiao", "${view.width}=宽高=${view.height}")
        Log.e("zuobiao", "${view.x}=坐标点xy=${view.y}")
        //相对于控件的缩放和旋转的中心点
        Log.e("zuobiao", "${view.pivotX}=坐标点=${view.pivotY}")
        popupWindow!!.showAsDropDown(view)
    }

Log日志

此时PopupWindow展示效果图如下所示：

二、修正PopupWindow布局中箭头的位置

		/**
         * 箭头的宽高都为16dp,箭头左边缘距离为15dp,圆形的按钮宽高为25dp
         * 为了让箭头的中心位置与圆形按钮的中心位置在垂直方向相对齐和箭头紧贴圆形按钮，则需要
         * 让PopupWindow左移(16/2+25-25/2=11),上移(16/2=8)
         */
        popupWindow!!.showAsDropDown(view, -TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 11F, displayMetrics).toInt(),-TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8F, displayMetrics).toInt())

2.1 PopupWindow的宽度为设备的0.5倍

此时效果图如下所示：

2.2 PopupWindow的宽度为设备的0.6倍

此时PopupWindow的布局已经无法跟圆形按钮的左边缘对齐了，一般这种情况只能调整PopupWindow的宽度了，因为此时圆形按钮的位置通常情况下已经在UI效果图中确定下来了

2.3 PopupWindow的宽度为设备的0.4倍

三、PopupWindow居右显示

可以看出居右显示的时候PopupWindow的布局会被挤压成反方向显示（显示的布局并没有跟圆形按钮的左边缘对齐），具体效果图如下：

修正代码如下所示：

	   /**
         *修正反方向挤压需要将PopupWindow布局向左移PopupWindow宽度减去圆形按钮左边缘距离屏幕右边缘的宽度，然后
         * 继续左移箭头中心位置和圆形按钮中心位置之间的距离（12.5+25-15-8）
         */
        val xoff = popupWindow!!.width - (widthPixels - view.x) + TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 14F, displayMetrics).toInt()
        popupWindow!!.showAsDropDown(view, -xoff.toInt(), -TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8F, displayMetrics).toInt())

修正之后效果图如下所示：