ConstraintLayout之layout_constraintDimensionRatio属性详解

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

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



来源:公众号 作者:代码说 原文地址:https://mp.weixin.qq.com/s/z2QFEssXTjdFFKF5vN_qqw

来源: 互联网
本文观点不代表码客-全球程序员交流社区立场,不承担法律责任,文章及观点也不构成任何投资意见。

赞 ()

相关推荐

  • 置顶 开发项目接单群,免费入群了

    无论你是Android、ios、java、php,或者你是产品经理、老板,都可以免费入群接单或者发布项目,全程不收取任何费用。

    2025年02月21日 15点27分
  • 鸿蒙Next-AttributeModifier结合@Styles和@Extend深度解析使用

    声明式语法引入了@Styles和@Extend两个装饰器,可以解决复用相同自定义样式的问题,但是存在以下受限场景:

    2025年03月03日 15点40分
  • ConstraintLayout之layout_constraintDimensionRatio属性详解

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

    2025年03月03日 15点39分
  • Android事件分发时,你浓眉大眼的onTouch()竟然没有执行?

    在开发需求时,有这么一个场景:Activity中有一个ViewGroup作为Parent,ViewGroup里面又有一个Webview作为Child。当一进入页面时,系统输入法自动弹起,而在点击Parent区域时,需要收起系统输入法。背景介绍完毕,当时的第一想法就是通过Parent设置setOnTouchListener,然后在onTouch()回调中来实现:

    2025年03月02日 15点10分
  • Android SDK封装与发布实战指南

    Android SDK封装与发布实战指南

    2025年03月02日 15点05分
  • 鸿蒙Next开发-添加水印以及点击穿透设置

    在鸿蒙Next中,为App全局添加水印可以通过以下方式实现,其中通过窗口添加水印是一种常见且高效的方式。以下是具体方案和实现细节:

    2025年02月26日 23点15分
  • 鸿蒙Next开发-普通函数和箭头函数 this指向的区别以及对UI刷新的影响

    鸿蒙Next开发-普通函数和箭头函数 this指向的区别以及对UI刷新的影响

    2025年02月26日 23点14分
  • 深入探索ArkUI @Builder与@BuilderParam的进阶应用

    在ArkUI的组件化开发体系中,@Builder和@BuilderParam这对装饰器组合扮演着UI模块化的重要角色。二者的差异与配合体现了声明式UI的核心思想:

    2025年02月26日 23点12分
  • Deepseek推荐:Android 开发者需要掌握的系统知识大纲

    一、操作系统基础1. Linux 内核机制内容介绍 Android 基于 Linux 内核,核心机制包括进程管理、内存管理、文件系统、Binder 驱动等。

    2025年02月26日 23点09分
  • Android App 厂商角标适配

    本篇介绍一下笔者在维护IM应用时,设置App角标的相关经验。同时这里设置角标都是基于系统厂商的Launcher,没有适配三方的Launcher应用,因为我们统计下来发现近些年使用三方Launcher应用比较少了,大部分用户还是以系统Launcher为主。所在在我们的项目中,主要是适配各个厂商。

    2025年02月26日 23点07分
  • 鸿蒙Next-方法装饰器以及防抖方法注解实现

    以下是关于 鸿蒙Next(HarmonyOS NEXT)中 MethodDecorator 的详细介绍及使用指南,结合了多个技术来源的实践总结:

    2025年02月26日 22点58分
  • DevEco Studio常用快捷键以及如何跟AndroidStudio的保持同步

    DevEco Studio是华为推出的用于开发HarmonyOS应用的集成开发环境,它提供了丰富的快捷键以提高开发效率,以下为你详细介绍不同操作场景下的常用快捷键:

    2025年02月26日 22点56分
  • Android | 利用ItemDecoration绘制RecyclerView分割线

    RecyclerView.ItemDecoration 是 Android 提供的一种扩展机制,用于为 RecyclerView 的每个子项(Item)添加装饰(Decoration)。它通常用于绘制分割线、边距、背景等,目的是增强 RecyclerView 的显示效果。

    2025年02月26日 22点52分
  • Android 布局优化:利用 ViewStub 和 Merge 提升性能

    提升界面渲染性能是一个至关重要的任务,尤其是在应用启动时,渲染界面需要快速且流畅。为了优化 UI 渲染速度,Android 提供了许多工具,其中 ViewStub 和 Merge 标签是非常有效的布局优化手段。通过合理使用这两者,可以延迟加载不必要的视图、减少布局的嵌套层级,从而加速应用的启动和运行。

    2025年02月26日 22点47分
  • 玩转 ImageView.ScaleType:图片的缩放与裁剪技巧

    ImageView 是最常用的控件之一,它用于展示各种类型的图片。为了能够根据需求调整图片的显示效果,Android 提供了 ImageView.ScaleType 枚举,它可以灵活地控制图片如何适应 ImageView 的尺寸。本文将探讨 ImageView.ScaleType 的不同选项、使用场景及其实现技巧。

    2025年02月26日 22点45分
  • Android加快你的编译速度

    工欲善其事,必先利其器。如果每次运行项目都要花费5-10分钟,那人的心态都要崩了。

    2025年02月25日 15点40分

发表回复

评论列表

点击查看更多

    联系我们

    在线咨询: QQ交谈

    微信:dxmcpjl

    邮件:1529097251#qq.com

    工作时间:周一至周五,9:30-18:30,节假日休息

    微信