ConstraintLayout的基本使用

最新推荐文章于 2025-06-02 09:08:34 发布

原创最新推荐文章于 2025-06-02 09:08:34 发布 · 251 阅读

0 ·

CC 4.0 BY-SA版权

技术点专栏收录该内容

47 篇文章

订阅专栏

本文详细介绍了Android ConstraintLayout的使用，包括依赖添加、属性说明（如相对位置、文本对齐、角度定位、边距、偏移、尺寸约束、链、Barrier、Group、Placeholder和Guideline），并展示了如何利用这些特性进行布局设计。

一.添加依赖

dependencies {
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
}

二.属性

1.相对属性

layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

<TextView
        android:id="@+id/tv_middle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"

        />

2.文本对齐

layout_constraintBaseline_toBaselineOf

 <TextView
        android:id="@+id/tv_middle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="16sp"
        ... />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="28sp"
        android:text="Welcome to the World"
        ...
        app:layout_constraintBaseline_toBaselineOf="@id/tv_middle" />

3.角度定位

layout_constraintCircle
layout_constraintCircleAngle
layout_constraintCircleRadius

   <TextView
        android:id="@+id/tv_middle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
          ... />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome to the World"
        app:layout_constraintCircle="@id/tv_middle"
        app:layout_constraintCircleAngle="120"
        app:layout_constraintCircleRadius="180dp"
    />

4.边距

边距用margin来使用，只有在控件被约束的时候，margin才可生效，goneMargin为约束的控件可见行为gone时候设置的间距，有属性

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom


    <TextView
        android:id="@+id/tv_middle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
...
      />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
          ...
        app:layout_goneMarginLeft="100dp"
        android:text="Welcome to the World"
     />

5.偏移

layout_constraintHorizontal_bias 0到1比例间距
layout_constraintVertical_bias 0到1比例间距

    <TextView
        android:id="@+id/tv_middle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="16sp"
        app:layout_constraintHorizontal_bias="0.2"
        app:layout_constraintVertical_bias="0.8"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

6.尺寸约束

使用0dp来代替match_parent，不建议用match_parent，当宽或者高至少有一个设置为0dp时候，可以用属性

layout_constraintDimensionRatio设置宽高比，也可在属性前面加上宽高指明比例，如

app:layout_constraintDimensionRatio="H,2:1"指的是高:宽=2:1
app:layout_constraintDimensionRatio="W,2:1"指的是宽:高=2:1

    <TextView
        android:id="@+id/tv_middle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="16sp"
        app:layout_constraintDimensionRatio="2:1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

7.链

两个或以上控件相互约束在一起形成链

 <TextView
        android:id="@+id/tv_text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="text1"
        android:textSize="28sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/tv_text2"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:text="text2"
        android:textSize="28sp"
        app:layout_constraintLeft_toRightOf="@id/tv_text1"
        app:layout_constraintRight_toLeftOf="@id/tv_text3"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_text3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:text="text3"
        android:textSize="28sp"
        app:layout_constraintLeft_toRightOf="@id/tv_text2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

在链条首部通过layout_constraintHorizontal_chainStyle设置链样式有spread，spread_inside，packed三种样式

<TextView
        android:id="@+id/tv_text1"
        app:layout_constraintHorizontal_chainStyle="spread"
        ... />

如果宽高设置为0dp，可以设置权重链，通过属性layout_constraintHorizontal_weight和layout_constraintVertical_weight设置

<TextView
        android:id="@+id/tv_text1"
        app:layout_constraintHorizontal_chainStyle="packed"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_weight="2"
        android:text="text1"
        android:textSize="28sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/tv_text2"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_text2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="text2"
        android:textSize="28sp"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintLeft_toRightOf="@id/tv_text1"
        app:layout_constraintRight_toLeftOf="@id/tv_text3"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_text3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="text3"
        android:textSize="28sp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@id/tv_text2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

8.Barrier

如果某个控件需要在多个控件某方向的一侧，这个时候使用Barrier可达到目的,barrierDirection屏障的方向，

有bottom、end、left、right、start、top，constraint_referenced_ids屏障哪些控件

 <TextView
        android:id="@+id/tv_text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="text1"
        android:textSize="28sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="text2"
        android:textSize="28sp"
        android:layout_marginTop="200dp"
        app:layout_constraintLeft_toRightOf="@id/tv_text1"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="tv_text1,tv_text2" />

    <TextView
        android:id="@+id/tv_text3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="text3"
        android:textSize="28sp"
        app:layout_constraintLeft_toRightOf="@id/barrier"
        app:layout_constraintTop_toTopOf="parent" />

9.Group

Group可设置多个控件为一组，并控制这个组的属性

  <androidx.constraintlayout.widget.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:constraint_referenced_ids="tv_text1,tv_text2"
        />

10.Placeholder

Placeholder为占位图，可通过content属性，把控件移动到占位图的位置

 <TextView
        android:id="@+id/tv_text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_weight="2"
        android:text="text1"
        android:textSize="28sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Placeholder
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:content="@id/tv_text1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

11.Guideline

GuideLine为辅助线，最终UI不会显示，属性有

orientation horizontal/vertical 横辅助线，竖辅助线

layout_constraintGuide_begin 开始位置

layout_constraintGuide_end 结束位置

layout_constraintGuide_percent 百分比位置


    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="150dp" />

    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />