ConstraintLayout实例讲解

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

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

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

ConstraintLayout实例讲解

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


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)

  1. 该例程在水平方向形成链式效果(层层约束),通过app:layout_constraintHorizontal_chainStyle="spread"属性。
  2. 注意在水平方向上宽度为固定值或者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)

  1. 宽度为0dp
  2. app:layout_constraintHorizontal_weight="3"指明水平方向权重
  3. 垂直方向同理
  4. 不加权重的默认为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)

  1. 宽度为wrap_content或者固定值
  2. 第一个控件的chainStylepacked
<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平分的链式效果

  1. 链式的第一个控件app:layout_constraintHorizontal_bias="0.3"属性才有效。
  2. 需要是packed的风格。
  3. 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属性失效

  1. 控件A、控件B从左向右顺序排列
  2. A的MarginLeft = 10dp, B的MarginLeft = 30dp
  3. 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、控件的宽高还可以通过比例设定

  1. 至少有一个宽高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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猎羽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值