ConstraintLayout之layout_constraintDimensionRatio属性详解

layout_constraintDimensionRatio介绍

layout_constraintDimensionRatio 是 ConstraintLayout 提供的一个强大功能，它可以让 View 按照固定的宽高比例自适应尺寸。使用这个属性，可以在 ConstraintLayout 中根据已知的宽度或高度，自动计算另一个维度，确保 View 保持特定的宽高比。

基本用法

该属性表示的是宽高比，可以设置的形式如下：

• 浮点数（如 1.5），表示宽高比 1.5:1（即 宽度 = 1.5 × 高度）。
• 格式 “宽度:高度”（如 “16:9”），表示宽高比例 16:9。
• 带前缀的格式（如 “W, 4:3” 或 “H, 2:1”），用于指定宽度或高度作为基准进行计算，上述 W, 4:3表示高度固定，宽度根据比例计算；H, 2:1表示宽度固定，高度根据比例计算。

需要注意的点

• 必须至少有一个尺寸为 0dp（MATCH_CONSTRAINT），否则系统无法计算对应的尺寸。
• H, x:y 表示固定宽度，高度按比例计算，W, x:y 表示固定高度，宽度按比例计算。
• 需要合适的约束，如果 width 或 height 需要自适应比例，必须有足够的 constraint 限制，否则尺寸无法计算。
• 避免过度使用，适用于特定需求，如固定比例的图片、视频、广告 Banner 等。

计算逻辑

• 如果 width 或 height 设置为 0dp（MATCH_CONSTRAINT），则该方向的尺寸会根据比例计算： 如果layout_width=“0dp”，那么 宽度会根据高度计算；如果 layout_height=“0dp”，那么 高度会根据宽度计算。
• 如果 width 和 height 都是 0dp，那么可以在 layout_constraintDimensionRatio 前添加 W, 或 H, 来明确指定哪一个方向受比例约束。

使用示例

示例 1：设置宽高比 1:1（正方形按钮）

<Button
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"/>

• layout_width=“0dp” 和 layout_height=“0dp” 表示匹配 ConstraintLayout 的约束。
• app:layout_constraintDimensionRatio=“1:1” 让 宽度 = 高度，形成一个正方形。

示例 2：16:9 宽高比的按钮

<Button
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="H,16:9"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"/>

• layout_width=“0dp” 表示宽度跟随约束调整（受 parent 影响）。
• layout_height=“0dp” 表示高度根据 layout_constraintDimensionRatio 计算。
• app:layout_constraintDimensionRatio=“H,16:9” 表示：宽度已受约束，那么 高度 = 宽度 × 9 ÷ 16，保持 16:9 比例。

示例 3：固定高度，宽度自适应（H, 2:1）

<ImageView
    android:layout_width="0dp"
    android:layout_height="200dp"
    app:layout_constraintDimensionRatio="W,2:1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

• layout_height=“200dp”（固定高度）。
• layout_width=“0dp”（宽度匹配 ConstraintLayout 约束）。
• app:layout_constraintDimensionRatio=“W,2:1” 表示：宽度会被计算为 200 × 2 / 1 = 400dp，保持 2:1 的比例。

示例 4：动态设置 layout_constraintDimensionRatio

在代码中动态修改 dimensionRatio：

val button = findViewById<Button>(R.id.myButton)
val params = button.layoutParams as ConstraintLayout.LayoutParams
params.dimensionRatio = "H,16:9"  // 设置为 16:9
button.layoutParams = params

总结

场景	示例	说明
固定比例的图片	app:layout_constraintDimensionRatio=“16:9”	适用于 ImageView，避免图片变形
正方形按钮	app:layout_constraintDimensionRatio=“1:1”	宽高相等，适用于按钮或 Logo
动态布局	H, 2:1	根据屏幕宽度调整 View 大小
视频播放器	16:9	保持视频的标准宽高比

资料

1、约束布局：https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout
2、使用 ConstraintLayout 构建自适应界面 ：https://developer.android.com/develop/ui/views/layout/constraint-layout?hl=zh-cn#set-size-as-a-ratio