ConstrainLayout 是 AndroidStudio2.2 的新特性,能够很方便的用于可视化开发,有点类似于 ios 的 storyboard,解决了 xml 过于复杂的问题。
约束
相对定位(Relative positioning)
也就是我们之前常用的relativelayout
,属性也与其一致,使用方法如:layout_constraintLeft_toLeftOf
,位置用一张图片解释。
边距(Margins)
同之前的margin
使用方法。
-
goneMargin
简单的解释,就是当位置约束的目标可见性为View.Gone时,可以调整它的边距值变为与父布局的margin值。下文将有示例解释。
居中定位(Centering positioning)
通过定义上下左右的相邻控件或父容器来设置居中。可以形象的理解为两个大小相同,方向相反的力作用在控件上。如下,通过定义top, bottom, start, end就可以使textview在parent居中显示。
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
倾向(bias)
搭配bias,就像两个力大小不相等,使其往一个方向靠拢。layout_constraintHorizontal_bias
:水平偏向layout_constraintVertical_bias
:垂直偏向0为最左上,1为最右下,默认为0.5。
圆定位(Circular positioning)(1.1新特性)
可以理解为以一个控件为圆心,设定半径和角度,决定另一个控件的位置。如图layout_constraintCircle
: 参照的控件id(圆心)layout_constraintCircleRadius
: 距离参照物的距离(两控件中心点间距离)layout_constraintCircleAngle
: 偏移角度(0为正上方,0~360)
可见性行为(Visibility behavior)
这是针对View.GONE
的特定处理。Gone隐藏的控件,会被当成一个点,同时忽略margin。如图。
当A消失时,B的边距将为原来与A的约束边距。
另一种方法,用goneMargin生成新的边距,而原来与A的约束边距将不起作用。
这种特定的行为可以做到特殊的布局,比如上图A消失时B位置不变,设A宽度为100,边距为10,B对A约束为20,那么goneMargin=100+10+20=130,则可以实现A隐藏后B位置不变。
尺寸约束(Dimensions constraints)
可以定义ConstraintLayout布局的尺寸
可以定义控件的尺寸,有三种方式:
- 确定尺寸:123dp
WRAP_CONTENT
0dp
0dp,相当于match_constraint,意思就是填满约束的空间。如果设置了margin值,也需要去掉margin的空间。
比例(Ratio)
可以按比例设置控件的宽高,定义其中一个维度为0dp,并设置属性
layout_constraintDimensionRatio
,值可以为0~1的浮点数或比例x:x。可以设置两个维度均为0dp,同时在ratio值前加W或H分别约束宽度或高度。
<Button android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
- 如上,将以button的最大约束宽度,16:9的比例定义button的高度
链条(Chains)
将一个维度的一组控件组成一个链条,另一个维度可以单独控制,相当于绑成一个组件。
-
一组部件通过双向连接就形成一个链条。
-
水平链的最左边和竖直链的最上边成为链头。
如果连接中设置了margin,要考虑在内。
-
链条样式(Chain Style)
给链条第一个元素设置属性
layout_constraintHorizontal_chainStyle
或layout_constraintVertical_chainStyle
,则链条会根据样式更改。(默认CHAIN_SPREAD
)spread
:元素间分散开spread_inside
:端点除外,元素间分散开,如上图区别packed
:元素间打包,即贴在一起
-
权重链(Weighted chains)
类似
LinearLayout
里的WEIGHT
属性,若元素使用MATCH_CONSTRAINT
,就是这些元素使用约束后的空间。layout_constraintHorizontal_weight
layout_constraintVertical_weight
虚拟辅助元素(Virtual Helper objects)
可以使用辅助对象来创建相对约束,可以通过水平或垂直的Guideline
来定位控件。
-
Guideline
不会被显示,只会辅助布局
-
定位
Guideline
有三种方式:layout_constraintGuide_begin
:距离左侧或顶部的固定距离layout_constraintGuide_end
:距离右侧或底部的固定距离layout_constraintGuide_percent
:父控件的高度或宽度的百分比
可视化操作
约束控键类型
调整尺寸大小:正方形四角
侧边约束:四边圆形,约束四边的位置
基线约束:文字下方条状,用于对齐文字
添加约束
- 点击控键,选中圆点拖动到要约束的位置。如图,要将控件放于左上角,将左边和上边分别拉到屏幕边缘即可。
- 两个控件间添加约束,要将第二个textview放于第一个的下方,只需要将左边约束对齐,上边约束到第一个textview的下方即可。要注意的是,添加完约束后,会有一个默认margin值,导致左边没对齐,此时在右侧的Attributes中将margin调为0即可。
删除约束
-
删除单个约束:点击具体的约束发起点即可删除。
删除单个控件的所有约束:点击控件,在左下方有删除所有约束的按钮,点击即可。
-
删除整个界面的所有约束:在上方工具栏找到
按钮即可删除。
Inspector的使用
这个界面就是控件的属性。我们除了可以修改一些基本属性,还有一些新的功能。
-
修改尺寸
这里有三种尺寸描述方式:
-
:wrap_content
-
:固定数值(100dp)
-
:match_constraint
关于这三个属性的区别上面已经解释过,大家看动图可以观察出区别。
-
-
调整bias
滑动那个滑块调节即可。
-
使用guideline
可以使用guideline进行百分比布局,再不用担心适配问题了。
-
自动添加约束
在上方的工具栏找到
,就可以开启AutoConnect,虽然有时候可能不能达到你想要的布局,但大部分时候可以减轻你的工作量。
总结
参考官方文档
用constraintLayout可以完全替换掉之前的linearLayout和relativeLayout,使用也很方便,希望能帮大家快速上手。