如何使用ConstraintSet根据屏幕可用空间设置视图等比例尺寸？

要实现取屏幕可用空间宽高中的较小值作为1:1视图的尺寸，你可以按以下步骤操作：

核心思路 #

1. 先获取父布局（ConstraintLayout）的实际可用宽高（规避状态栏、导航栏等系统控件的空间占用影响）
2. 判断宽/高哪个更小，决定基于宽度还是高度设置百分比尺寸
3. 通过ConstraintSet设置对应方向的百分比，并绑定1:1的宽高比例
4. 确保视图的约束配置能让百分比设置生效（比如对应方向的约束绑定到父布局边缘）

具体代码实现 #

val constraintLayout = findViewById<ConstraintLayout>(R.id.parent_constraint_layout)
val targetView = findViewById<View>(R.id.target_view)

// 监听父布局布局完成事件，获取真实可用尺寸
constraintLayout.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
    override fun onGlobalLayout() {
        // 移除监听避免重复触发
        constraintLayout.viewTreeObserver.removeOnGlobalLayoutListener(this)
        
        val parentWidth = constraintLayout.width
        val parentHeight = constraintLayout.height
        val percent = 0.8f // 自定义百分比，示例为占用对应方向的80%
        
        val cs = ConstraintSet()
        cs.clone(constraintLayout)
        
        if (parentWidth < parentHeight) {
            // 宽度更小，基于宽度设置百分比
            cs.constrainPercentWidth(targetView.id, percent)
            // 绑定左右约束到父布局，确保百分比宽度生效
            cs.connect(targetView.id, ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT)
            cs.connect(targetView.id, ConstraintSet.RIGHT, ConstraintSet.PARENT_ID, ConstraintSet.RIGHT)
            // 视图垂直居中
            cs.centerVertically(targetView.id, ConstraintSet.PARENT_ID)
        } else {
            // 高度更小，基于高度设置百分比
            cs.constrainPercentHeight(targetView.id, percent)
            // 绑定上下约束到父布局，确保百分比高度生效
            cs.connect(targetView.id, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP)
            cs.connect(targetView.id, ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM)
            // 视图水平居中
            cs.centerHorizontally(targetView.id, ConstraintSet.PARENT_ID)
        }
        
        // 设置1:1宽高比例，让未设置的维度自动匹配已设置的维度
        cs.setDimensionRatio(targetView.id, "1:1")
        // 应用约束配置到布局
        cs.applyTo(constraintLayout)
    }
})

关键注意点 #

• 必须等待布局完成：直接在onCreate中获取宽高会得到0，因此需要通过ViewTreeObserver监听布局完成事件来获取真实尺寸
• 约束绑定要求：设置百分比宽度时，必须让视图左右约束绑定到父布局；设置百分比高度时，上下约束要绑定到父布局，否则百分比设置不会生效
• 比例生效逻辑：setDimensionRatio会让未手动设置的维度自动跟随已设置的维度，因此先设置百分比维度，再设置比例即可实现严格的1:1效果

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