Android约束布局(ConstraintLayout)常用属性

目录

[1. 基本约束属性案例](#1. 基本约束属性案例)

[2. 边距属性案例](#2. 边距属性案例)

[3. 尺寸控制属性案例](#3. 尺寸控制属性案例)

[4. 位置控制属性案例](#4. 位置控制属性案例)

[5. 其他实用属性案例](#5. 其他实用属性案例)


1. 基本约束属性案例

  • ​相对父容器约束​​:
XML 复制代码
<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:text="按钮"/>

解释 :按钮固定在父容器的左上角(左边缘对齐父容器的左边缘,上边缘对齐父容器的上边缘)

  • ​相对其他视图约束​​:
XML 复制代码
<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@id/button"
    app:layout_constraintTop_toTopOf="@id/button"
    android:text="按钮2"/>

解释 :按钮2位于按钮1的右侧,并且顶部与按钮1对齐

2. 边距属性案例

XML 复制代码
<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@id/button"
    android:layout_marginTop="16dp"
    android:text="按钮3"/>

解释 :按钮3位于按钮1下方16dp处,左边缘与父容器对齐

3. 尺寸控制属性案例

  • ​MATCH_CONSTRAINT(0dp)使用​​:
XML 复制代码
<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginHorizontal="16dp"
    android:text="宽度填满父容器(左右各留16dp边距)"/>

解释 :按钮宽度填满父容器,但左右各保留16dp边距

  • ​比例约束​​:
XML 复制代码
<ImageView
    android:id="@+id/imageView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="H,16:9"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:src="@drawable/sample"/>

解释 :图片视图宽度填满父容器,高度按16:9的比例自适应

4. 位置控制属性案例

  • ​偏置(Bias)使用​​:
XML 复制代码
<Button
    android:id="@+id/button5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_bias="0.3"
    android:text="水平30%位置"/>

解释 :按钮水平方向上位于30%的位置(左30%,右70%)

  • ​链式布局(Chains)​​:
XML 复制代码
<Button
    android:id="@+id/buttonA"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@id/buttonB"
    app:layout_constraintHorizontal_chainStyle="spread"
    android:text="A"/>

<Button
    android:id="@+id/buttonB"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@id/buttonA"
    app:layout_constraintRight_toLeftOf="@id/buttonC"
    android:text="B"/>

<Button
    android:id="@+id/buttonC"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@id/buttonB"
    app:layout_constraintRight_toRightOf="parent"
    android:text="C"/>

解释 :三个按钮水平均匀分布,形成一条水平链

5. 其他实用属性案例

  • ​基线对齐​​:
XML 复制代码
<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="文本1"
    android:textSize="24sp"/>

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@id/textView1"
    app:layout_constraintBaseline_toBaselineOf="@id/textView1"
    android:text="文本2"
    android:textSize="16sp"/>

解释 :文本2与文本1基线对齐,尽管它们的文字大小不同

  • ​引导线(Guideline)使用​​:
XML 复制代码
<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5"/>

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@id/guideline"
    app:layout_constraintTop_toTopOf="parent"
    android:text="位于屏幕右侧50%"/>

解释 :按钮位于垂直方向50%的位置(屏幕中间)的右侧

  • ​屏障(Barrier)使用​​:
XML 复制代码
<TextView
    android:id="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="可变长度文本1"/>

<TextView
    android:id="@+id/text2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@id/text1"
    android:text="另一个可变长度文本2"/>

<androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end"
    app:constraint_referenced_ids="text1,text2"/>

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@id/barrier"
    app:layout_constraintTop_toTopOf="parent"
    android:text="按钮"/>

解释 :按钮始终位于text1和text2中最右侧的那个视图的右侧,无论哪个文本更长

相关推荐
2501_916008891 小时前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
我科绝伦(Huanhuan Zhou)2 小时前
MySQL一键升级脚本(5.7-8.0)
android·mysql·adb
怪兽20143 小时前
Android View, SurfaceView, GLSurfaceView 的区别
android·面试
龚礼鹏3 小时前
android 图像显示框架二——流程分析
android
消失的旧时光-19433 小时前
kmp需要技能
android·设计模式·kotlin
帅得不敢出门4 小时前
Linux服务器编译android报no space left on device导致失败的定位解决
android·linux·服务器
雨白5 小时前
协程间的通信管道 —— Kotlin Channel 详解
android·kotlin
TimeFine7 小时前
kotlin协程 容易被忽视的CompletableDeferred
android
czhc11400756638 小时前
Linux1023 mysql 修改密码等
android·mysql·adb
GOATLong9 小时前
MySQL内置函数
android·数据库·c++·vscode·mysql