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中最右侧的那个视图的右侧,无论哪个文本更长

相关推荐
蜀中廖化9 小时前
Android Studio 导入 opencv
android·opencv·android studio
奋斗的小鹰9 小时前
ASM Bytecode Viewer 插件查看kotlin和java文件的字节码
android·kotlin·asm
欢喜躲在眉梢里11 小时前
mysql中的日志
android·运维·数据库·mysql·adb·日志·mysql日志
路上^_^13 小时前
安卓基础组件019-引导页布局001
android·安卓
梦终剧13 小时前
【Android之路】UI消息循环机制
android·ui
zh_xuan14 小时前
Android android.util.LruCache源码阅读
android·源码阅读·lrucache
梦终剧14 小时前
【Android之路】安卓资源与编译初步
android
mykrecording16 小时前
launch Activity流程
android·app
不知名的前端专家17 小时前
uniapp 安卓FTP上传下载操作原生插件
android·uni-app
ClassOps18 小时前
Android Studio Logcat中 杀死应用
android·android studio·logcat