转载请注明链接: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)
- 该例程在
水平方向
形成链式效果(层层约束)
,通过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