ConstraintLayout实例讲解

最新推荐文章于 2025-06-16 14:51:15 发布

猎羽

最新推荐文章于 2025-06-16 14:51:15 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Android 文章标签： Android ConstraintLayout

本文链接：https://blog.youkuaiyun.com/feather_wch/article/details/79585647

本文详细讲解了Android中的ConstraintLayout，包括相对定位属性如基线对齐、边距、控件宽高等设置，以及链式风格、Guideline、Barrier等高级特性。还介绍了动画实现、性能优化和最新版本特性，提供了丰富的实战示例和参考资料。

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

转载请注明链接：http://blog.youkuaiyun.com/feather_wch/article/details/79585647

ConstraintLayout实例讲解

版本: 2019/3/22(8:10)

文章目录

ConstraintLayout实例讲解

1-相对定位属性

1、ConstraintLayout的定位属性

#通过约束力进行定位
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf

#用于LTR、RTL布局
#LTR布局为例
app:layout_constraintStart_toStartOf //左侧与目标左侧对齐
app:layout_constraintStart_toEndOf   //左侧与目标右侧对齐
app:layout_constraintEnd_toStartOf   //右侧与目标左侧对齐
app:layout_constraintEnd_toEndOf     //右侧与目标右侧对齐

基线对齐: toBaselineOf

2、基线对齐属性

与另一个TextView中的文本的基线对齐

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hi"
    android:textSize="80dp"
    app:layout_constraintBaseline_toBaselineOf="@id/ll_cl_aa"/>

两侧间隙比例: bias(偏向某一边)

3、通过bias控制约束力，能决定原本居中的控件距离哪边更近

分为水平、垂直两个方向

垂直约束力

4、垂直约束力的属性为app:layout_constraintVertical_bias

5、控件放置在底部

等效于控件垂直方向上，上侧空隙和下侧空隙比例为 100%：0%

app:layout_constraintVertical_bias="1"

6、控件放置在从上到下大概4/5处。

等效于控件垂直方向上，上侧空隙和下侧空隙比例为 80%：20%

app:layout_constraintVertical_bias="0.8"

水平约束力

7、水平约束力的属性为app:layout_constraintHorizontal_bias

链式风格: Chains

约束链式风格

1、链式风格的属性

app:layout_constraintHorizontal_chainStyle="spread | spread_inside | packed"
app:layout_constraintVertical_chainStyle=""

#spread：不填充型平分---上图第一种风格
#spread_inside：不填充型平分，只有中间有间隙---上图第二种风格
# 填充型平分-宽度0dp即可
# 填充型加权平分(weight)---上图第三种风格
#packed：集中式---上图第四种风格
# 集中式bias平分---上图第四种

权重

# 加权重。只要有一个有权重，其他不加权重的权重都为0

app:layout_constraintHorizontal_weight
app:layout_constraintVertical_weight

bias

# 1. 必须用于链式的第一个控件
# 2. 必须packed风格
# 3. 表明整个链的左侧占据剩余空间的比例，0.3 = 左侧只占据30% = 左侧:右侧 = 3:7

app:layout_constraintHorizontal_bias
app:layout_constraintVertical_bias

2、不填充型平分(spread-图1)

该例程在水平方向形成链式效果(层层约束)，通过app:layout_constraintHorizontal_chainStyle="spread"属性。

注意在水平方向上宽度为固定值或者wrap_content

<TextView
    android:id="@+id/ll_cl_aa"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xxx
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@id/ll_cl_bb"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/ll_cl_bb"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xxx
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/ll_cl_aa"
    app:layout_constraintRight_toLeftOf="@id/ll_cl_cc"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/ll_cl_cc"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xxx
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/ll_cl_bb"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

3、不填充型平分-且只在中间有间隔(spread_inside-图2)

实例1中更改为app:layout_constraintHorizontal_chainStyle="spread_inside"即可

4、填充型平分(任何风格，控件都用0dp)

将上面实例中的水平方向上的宽度更改为0dp即可

5、填充型加weight权重平分(图3)

宽度为0dp

app:layout_constraintHorizontal_weight="3"指明水平方向权重

垂直方向同理

不加权重的默认为0

<TextView
        android:id="@+id/ll_cl_aa"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        xxx
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/ll_cl_bb"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/ll_cl_bb"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        xxx
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/ll_cl_aa"
        app:layout_constraintRight_toLeftOf="@id/ll_cl_cc"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/ll_cl_cc"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        xxx
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/ll_cl_bb"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

6、集中式(packed-图4)

宽度为wrap_content或者固定值

第一个控件的chainStyle为packed

<TextView
        android:id="@+id/ll_cl_aa"
        android:layout_width="wrap_content"
        xxx
        app:layout_constraintHorizontal_chainStyle="packed"/>

    <TextView
        android:id="@+id/ll_cl_bb"
        android:layout_width="wrap_content"
        xxx/>

    <TextView
        android:id="@+id/ll_cl_cc"
        android:layout_width="wrap_content"
        xxx/>

7、bias平分的链式效果

链式的第一个控件的app:layout_constraintHorizontal_bias="0.3"属性才有效。

需要是packed的风格。

app:layout_constraintHorizontal_bias="0.3"表明整个链的左侧和右侧的比例为3:7

<TextView
    android:id="@+id/ll_cl_aa"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xxx
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintHorizontal_bias="0.3"/>

<TextView
    android:id="@+id/ll_cl_bb"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xxx />

<TextView
    android:id="@+id/ll_cl_cc"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xxx/>

2-边距(Margin)

3、边距属性，距离参照物的距离

# margin不需要解释
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

可见性问题

4、目标可见性问题，目标如果为GONE会化为一个点，且该目标控件的Margin属性失效

控件A、控件B从左向右顺序排列

A的MarginLeft = 10dp, B的MarginLeft = 30dp

A为GONE之后，B的MarginLeft距离父布局左侧为30dp

// 原效果
-控件A---控件B

// 控件A GONE
---控件B

<TextView
    android:id="@+id/a_txt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="A"
    android:textSize="30dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/b_txt"
    android:layout_marginLeft="10dp"
    android:visibility="gone"/>

<TextView
    android:id="@+id/b_txt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="B"
    android:textSize="30dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/a_txt"
    android:layout_marginLeft="30dp"
    />

Gone Margin(根据约束的目标的可见性决定本身的外边距)

5、Gone Margin属性

如果goneMargin相同方向的约束目标，该目标变成不可见。就会在该方向所有属性生效之后的位置上，通过该marigin值进行偏移。

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

3-控件宽高属性: width/height

1、控件的宽高属性

# 宽高。wrap_content、0dp、具体dp
android:layout_width
android:layout_height

# 最小/最大宽高。在layout_width/height属性为wrap_content时生效
android:minWidth
android:maxWidth
android:minHeight
android:maxHeight

宽高比例约束

2、控件的宽高还可以通过比例设定

至少有一个宽高为0dp

# 指定宽高比
app:layout_constraintDimensionRatio="16:1"

设定方式	解释	layout_constraintDimensionRatio=“xxx”	含义
浮点数	宽高比	0.3	宽为0.3,高为1
		3	宽为3,高为1
比例	宽度/高度	16:9	宽为16,高为9
指定分子		W, 16:9 == 16:9	W指明 W:H = 16:9
		H, 16：9	H指明 H:W = 16:9

<TextView
    android:id="@+id/constraint_banner1"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintRight_toRightOf="parent"s
    app:layout_constraintLeft_toLeftOf="parent"
    android:text="Banner"
    android:gravity="center"
    android:background="@color/colorAccent"
    app:layout_constraintDimensionRatio="16:1"
    />

强制约束wrap_content(1.1.x)

1、view的宽高如果为wrap_content，并且内容特别长的时候会出现问题

# 正常场景
|AAA-BBB-|

# 控件B的内容特别长, 出现奇怪的错误
|AAA-----|
|-BBBBBBB|

# 理想效果
|AAABBBBB|

宽度为wrap_content的控件B，内容过长，导致约束效果不理想
示例: 可以看效果

<TextView
    android:id="@+id/a_txt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="AAA"
    android:textSize="30dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"/>

<TextView
    android:id