约束布局的使用(二)

最新推荐文章于 2025-04-26 08:00:00 发布
原创 最新推荐文章于 2025-04-26 08:00:00 发布 · 656 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了ConstraintLayout中app:layout_constraintWidth_max、app:layout_constrainedWidth、app:layout_constraintDimensionRatio及Guideline的高级应用技巧。通过具体实例，详细解析了这些属性如何影响视图的尺寸和布局，帮助开发者更好地掌握复杂界面的设计。

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

主要介绍app:layout_constraintWidth_max、app:layout_constrainedWidth、app:layout_constraintDimensionRatio和Guideline的使用

一、app:layout_constraintWidth_max、app:layout_constrainedWidth、app:layout_constraintDimensionRatio的使用

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--
            app:layout_constrainedWidth="true",此属性默认为false
            android:layout_width，值为“wrap_content”与“0dp”时，约束才能生效
            app:layout_constraintWidth_max="100dp",此属性必须与两个属性同时使用
    -->

    <TextView
        android:id="@+id/tv_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00ff00"
        android:textSize="20sp"
        app:layout_constrainedWidth="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_max="100dp"
        tools:text="壮士一去不复还" />

    <TextView
        android:id="@+id/tv_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff0000"
        android:textSize="20sp"
        app:layout_constrainedWidth="false"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_first"
        app:layout_constraintWidth_max="100dp"
        tools:text="风萧萧兮易水寒" />

    <!--
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintDimensionRatio="1:2",此时代表宽高比=1：2
            这种情况是本来是宽随高走的，但是经过测试发现是高随宽走，宽的最大值是跟屏幕宽相匹配，高是宽的两倍。
            很费解。
    -->
    <TextView
        android:id="@+id/tv_third"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:textSize="20sp"
        app:layout_constraintDimensionRatio="1:2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_second"
        app:layout_constraintWidth_default="percent"
        tools:text="风萧萧兮易水寒" />

    <!--
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="1:2"
            这种情况是高随宽走，宽包裹内容，宽的最大值是跟屏幕宽相匹配。
            高是宽的两倍
    -->
    <TextView
        android:id="@+id/tv_forth"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="#00fafa"
        android:textSize="20sp"
        app:layout_constraintDimensionRatio="1:2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_third"
        app:layout_constraintWidth_default="percent"
        tools:text="风萧萧兮易水寒" />


</androidx.constraintlayout.widget.ConstraintLayout>

二、app:layout_constraintDimensionRatio的使用

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <!--
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="H,2:1"
        高将按照2：1的比例展示（实质是高是宽的1/2），但是宽将会按照所给约束进行
    -->
    <TextView
        android:id="@+id/tv_fifth"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ff4b4d"
        android:textSize="20sp"
        app:layout_constraintDimensionRatio="H,2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="percent"
        tools:text="风萧萧兮易水寒" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="W,2:1"
        宽将按照2：1的比例展示（实质是宽是宽的1/2），但是宽将会按照所给约束进行展示
    -->
    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#00ff00"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="W,2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="percent"
        tools:text="风萧萧兮易水寒"
       />
</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <!--
        android:layout_width="100dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="H,2:1"
        宽将会按照100dp展示，高是宽的1/2
    -->
    <TextView
        android:id="@+id/tv_fifth"
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:background="#ff4b4d"
        android:textSize="20sp"
        app:layout_constraintDimensionRatio="H,2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="percent"
        tools:text="风萧萧兮易水寒" />


    <!--
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:layout_constraintDimensionRatio="H,2:1"
        宽将会按照自己的约束展示，高是给定的100dp
    -->
    <TextView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:background="#00ff00"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="H,2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintWidth_default="percent"
        tools:text="风萧萧兮易水寒" />
</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--
        android:layout_width="100dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="W,2:1"
        宽将按照100dp展示，但是高将会是宽的2倍
    -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:background="#00ff00"
        android:textSize="20sp"
        app:layout_constraintDimensionRatio="W,2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="percent"
        tools:text="风萧萧兮易水寒" />

    <!--
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:layout_constraintDimensionRatio="W,2:1"
        高将按照100dp展示，但是宽将会是高的2倍
    -->
    <TextView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:background="#ff0000"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="W,2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintWidth_default="percent"
        tools:text="风萧萧兮易水寒" />
</androidx.constraintlayout.widget.ConstraintLayout>

三、Guideline的使用

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="100dp" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="100dp" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="@id/guideline1" />

</androidx.constraintlayout.widget.ConstraintLayout>
约束布局ConstraintLayout
GeofferySun的专栏
04-21 2798
国际惯例，官网参考文档是最好的学习资料： 使用 ConstraintLayout 构建自适应界面 1，背景 约束布局 ConstraintLayout 是最受欢迎的 Jetpack 库之一，其实是Android Studio 2.2中主要的新增功能之一，也是 Google 在2016年的 I/O 大会上重点宣传的一个功能。AS 已经将它作为新建页面默认布局了。经历这几年的迭代，功能已经非常的成熟，现在 2.0 正式版本也发布了，也许你已熟悉了旧版本中的功能，并开始用它来快速构建复杂的页面布局，而新版本除了包
Flutter 约束布局
我很好
09-21 1061
好好学习，天天向上！
约束布局ConstraintLayout看这一篇就够了
weixin_34167819的博客
09-27 3446
目录 1.介绍 2.为什么要用ConstraintLayout 3.如何使用ConstraintLayout 3.1 添加依赖 3.2 相对定位 3.3 角度定位 3.4 边距 3.5 居中和偏移 3.6 尺寸约束 3.7 链 4.辅助工具 4.1 Optimizer 4.2 Barrier 4.3 Group 4.4 Placeholder 4.5.Guideline 5.总结 1.介绍 约...
深入剖析 Android ConstraintLayout：从源码解读使用原理
最新发布
Android开发领域创作者
04-26 833
ConstraintLayout 是 Android 支持库中的一个布局管理器，它继承自 ViewGroup。与传统的布局管理器不同，ConstraintLayout 允许开发者通过定义视图之间的约束关系来确定视图的位置和大小。约束可以是视图之间的相对位置（如左对齐、右对齐、上对齐、下对齐等），也可以是视图与父布局边界的距离。在上述代码中，我们使用了和这两个属性来定义TextView的约束条件。这两个约束条件表示TextView的左边与父布局的左边对齐，顶部与父布局的顶部对齐。
约束布局使用详解
EleganceKing的博客
07-13 8994
约束布局使用详解 一、前言 在一般的安卓开发中，编写界面需要很多嵌套，这会有一定的性能影响，这个时候就可以使用 ConstraintLayout 或 RelativeLayout来减少嵌套，简化布局深度。ConstraintLayot 类似 RelativeLayout，但是更灵活更强大。 具有更强的性能优势，简化嵌套深度。 更好的屏幕适配，可以使用比例来适配，效果更好。 可视化编辑，操作起来不是很完美。 二、使用 引入 implementation 'com.a
ConstraintLayout约束布局
早有蜻蜓立上头
04-16 397
ConstraintLayout 全解析https://juejin.im/post/5c0bd6b05188257c3045dc50 ConstraintLayout使用的一些坑https://blog.youkuaiyun.com/jxb196203/article/details/80695410 没有match_parent，有0dp实现match_parent效果。 当一个View在Const...
Android约束布局ConstraintLayout使用完全解析
11-21
二、约束的设置 `ConstraintLayout`通过连接视图之间的边来定义它们的位置。有四种基本约束： 1. 左右约束：`app:layout_constraintLeft_toLeftOf` 和 `app:layout_constraintRight_toRightOf`。 2. 上下约束：`...
Android中约束布局工具栏,约束布局
weixin_28795851的博客
05-26 1007
约束布局(ContraintLayout)是相对布局的升级版，配合最新的布局编辑器1Android Studio从2.3版本开始在布局编辑器中支持约束布局，写作本书时Android Studio 2.3已经发布，创建界面的默认布局管理器已经变为约束布局。(Layout Editor)，约束布局堪称布局神器，完全不需要嵌套布局，只在布局编辑器中拖拖拉拉即可完成非常复杂的界面布局。不过，第一次使用约束...
android 约束布局 性能,Android ConstraintLayout约束布局完全解析
weixin_39887546的博客
05-26 888
布局优化是性能优化的一个方向点，包括了根据需求应该选用哪种布局容器、ViewStub懒加载，如何减少布局层级等，今天我们要探讨的就是如何使用ConstraintLayout来优化我们的布局层级。概述.png提出问题为什么要用这个布局？怎么用这个布局？不足在哪里？优势ConstraintLayout就是为性能而生，目标就是减少布局嵌套，提高measure+layout性能，来看看官方给出的数据。性能...
Android ConstraintLayout 约束布局
前期后期
07-27 723
（1）第一个：删除所有约束布局（2）第二个：自动推断要添加的约束（3）第三个：自动横向，竖向拉伸（3）第四个：设置对齐方式（5）第五个：增加辅助工具，引导线，用于控件的参考对象。
android demo，ConstraintLayout （约束布局）
05-28
android demo，ConstraintLayout （约束布局），该demo详细的介绍了layout_constraint布局的所有属性。
【约束布局】ConstraintLayout 约束布局 ( 简介 | 引入依赖 | 基本操作 | 垂直定位约束 | 角度定位约束 | 基线约束 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
06-28 5988
一. ConstraintLayout 简介 1. 引入 约束 布局 ( 1 ) 约束性布局 作用 和 简介 2. 约束 简介 ( 1 ) 约束个数要求 ( 2 ) 约束设置 与 显示位置 3. ConstraintLayout 引入 ( 1 ) ConstraintLayout 依赖添加 ( 2 ) ConstraintLayout 转换 与 添加 二. ConstraintLayout 约束 的 基本操作 1. 约束基本操作 ( 1 ) Design ( 设计 ) 和 Bluepr
约束布局使用
养猪专业户
01-14 307
原文：https://blog.youkuaiyun.com/lmj623565791/article/details/78011599   
关于约束布局Constraintlayout
snoto的专栏
11-03 1383
ConstraintLayout 约束布局，说是对RelativeLayout的提升版 http://blog.youkuaiyun.com/lmj623565791/article/details/78011599?utm_source=tuicool&utm_medium=referral http://blog.youkuaiyun.com/fallfollowernolisten/...
约束布局ConstraintLayout（官翻篇）
梦想家Eva的专栏
11-15 3032
想写一篇关于约束布局ConstraintLayout的使用，看了网上其他人总结的很全面，一下子不知道自己该写什么了，索性翻译下官网文章，顺便锻炼下英文阅读能力。 原文地址： ConstraintLayout https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout
Android——ConstraintLayout(约束布局)
热门推荐
The_onion的博客
11-03 1万+
约束布局ConstraintLayout 是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。从 Android Studio 2.3 起，官方的模板默认使用 ConstraintLayout。
Android中的ConstraintLayout约束布局
ChenYiRan123456的博客
09-28 7395
Android中的ConstraintLayout约束布局
约束布局
03-08
### ConstraintLayout 使用指南 #### 一、基本概念 ConstraintLayout 是一种强大的布局管理器，旨在简化和优化复杂界面的设计。这种布局方式允许开发者通过设置视图之间的约束条件来精确定义其位置和尺寸，而无需依赖于多层次的嵌套布局[^2]。 #### 二、主要特性 - **无嵌套层次**：减少了不必要的父级容器数量，提高了应用性能。 - **灵活定位**：支持基于百分比宽度/高度以及相对于其他组件或屏幕边缘的距离设定。 - **链表机制**：可以创建水平或垂直方向上的链条，使多个子项能够均匀分布空间。 - **比例调整**：提供按比例分配剩余可用空间的功能。 ```xml <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <!-- Example TextView --> <TextView android:id="@+id/textView" android:text="Hello World!" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"/> </androidx.constraintlayout.widget.ConstraintLayout> ``` #### 三、常见问题及解决方案 ##### 1. 子控件无法显示 当遇到这种情况时，通常是因为忘记给定必要的约束属性（`app:layout_constraint..._to...`）。每个子元素至少需要两个维度上有效的约束才能被正确渲染出来[^3]。 ##### 2. 控件重叠现象严重 这可能是由于设置了相互冲突的约束所引起的。检查并修正这些不合理的关联规则；另外也可以尝试利用 `Barrier` 或者 `Guideline` 来更好地组织页面结构。 ##### 3. 动态更新UI困难重重 对于动态加载的数据列表或者其他频繁变化的内容区域来说，在 XML 中硬编码所有的约束并不总是最理想的选择。此时可以通过编程的方式修改现有约束集(`ConstraintSet`)来进行实时调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值