Android ConstraintLayout 任意constraintDimensionRatio适配父布局不溢出

你原实现的尺寸计算逻辑存在固定限制，才会出现动态设比例时溢出的问题：

• 原代码里board视图的宽度直接写死为match_parent，高度设为0dp，相当于强制所有比例计算都以固定宽度为基础反推高度
• 当设置的宽高比对应反推出的高度超过父布局的可用高度时，就会出现高度溢出屏幕的情况
• 原代码没有给上下方向留边距，视图会贴住父布局上下边缘，也没有预留溢出的容错空间
• 另外因为比例字符串没有指定计算基准，在两个方向都有约束的场景下，ConstraintLayout可能出现非预期的解析结果，进一步加大溢出概率

要实现任意宽高比下视图不溢出、完全居中、尽可能占满可用空间的效果，不需要换布局体系，只需要调整两个核心逻辑：

• 把目标视图的两个方向尺寸都设为0dp（即MATCH_CONSTRAINT），四个方向都约束到父布局，加上统一的边距，让视图具备双向适配的能力
• 在测量阶段拿到父布局的可用尺寸，根据目标比例自动选择合适的计算基准（到底是按宽度算高度，还是按高度算宽度），保证算出来的尺寸既不超出父布局范围，又能尽可能大。

第一步：修改基础布局 #

将原board的宽度从match_parent调整为0dp，补充上下方向的边距，保证两个方向都可以根据约束自动适配：

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/parent_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/board"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp"
        android:layout_marginTop="32dp"
        android:layout_marginBottom="32dp"
        android:background="@color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

第二步：动态适配比例的逻辑 #

在视图完成测量后，根据目标比例自动选择基准方向，示例Kotlin代码逻辑：

val parentContainer = findViewById<ConstraintLayout>(R.id.parent_container)
val boardView = findViewById<ConstraintLayout>(R.id.board)
val marginPx = dp2px(32f) // 实现dp转px的工具方法，和布局里边距保持一致

// 监听父布局尺寸完成测量
parentContainer.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
    override fun onGlobalLayout() {
        // 计算父布局扣除边距后的可用最大尺寸
        val maxAvailableWidth = parentContainer.width - marginPx * 2
        val maxAvailableHeight = parentContainer.height - marginPx * 2

        // 传入你的动态目标比例，比如10:1
        val targetWidthPart = 10
        val targetHeightPart = 1

        val layoutParams = boardView.layoutParams as ConstraintLayout.LayoutParams
        // 计算以宽度为基准时需要的实际高度
        val requiredHeightIfWidthBase = maxAvailableWidth * targetHeightPart.toFloat() / targetWidthPart

        if (requiredHeightIfWidthBase <= maxAvailableHeight) {
            // 宽度为基准可以放下，直接用宽度撑满可用宽度，高度按比例计算
            layoutParams.dimensionRatio = "W,$targetWidthPart:$targetHeightPart"
        } else {
            // 宽度为基准会超高，切换为高度为基准，高度撑满可用高度，宽度按比例计算
            layoutParams.dimensionRatio = "H,$targetWidthPart:$targetHeightPart"
        }
        boardView.layoutParams = layoutParams

        // 移除监听避免重复计算
        parentContainer.viewTreeObserver.removeOnGlobalLayoutListener(this)
    }
})

• 当设置横扁比例（如10:1）时，会自动选择宽度为基准，撑满可用宽度，高度按比例计算，垂直水平居中，不会溢出
• 当设置竖长比例（如1:10）时，会自动选择高度为基准，撑满可用高度，宽度按比例计算，不会超出左右边距范围
• 所有场景下视图都会尽可能利用父布局的可用空间，保持带边距的完全居中效果

注意：设置dimensionRatio时必须加上W,或H,的基准前缀，否则两个方向都是0dp的场景下，系统的比例解析行为是不确定的，容易出现尺寸计算错误。

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