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

原创于 2025-08-18 14:35:30 发布 · 391 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#android

1. 基本约束属性案例

相对父容器约束：

<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="按钮"/>

解释：按钮固定在父容器的左上角（左边缘对齐父容器的左边缘，上边缘对齐父容器的上边缘）

相对其他视图约束：

<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. 边距属性案例

<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)使用：

<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边距

比例约束：

<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)使用：

<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)：

<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. 其他实用属性案例

基线对齐：

<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)使用：

<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)使用：

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