Constraintlayout

Constraintlayout

译为"约束布局", 是Google在AndroidStudio2.2引入的布局. 在AndroidStudio 2.3直接替代了之前的Activity创建的默认布局RelativeLayout. 可以看到Google对其重视性.

特点

1. 配合布局编辑器,提升效率(鼠标创建布局)
2. 更好的屏幕适配(百分比适配屏幕和控件)
3. 解决布局嵌套过多引起的性能问题(只需要一个根布局就能解决)
4. 添加动画效果更加简单(一行代码添加动画)
5. 支持代码布局控件(完全不使用XML来画布局)

注意: 本文讲解的ConstraintLayout是在1.0.2正式版的前提下. 这个布局后续肯定是会频繁更新的, 出入是会存在的.

官方文档

• ConstraintLayout

布局编辑器

ConstraintLayout的最大特点就是很好的支持AndroidStudio的布局编辑器. 之前的布局其实也支持布局编辑器, 但是效果很差, 所以都使用XML编辑代码.

布局编辑器面板

布局编辑器左边有个面板, 用于拖控件到布局编辑器中

控件列表

在布局编辑器的左边就是全部的控件列表. 可以通过直接拖动到布局预览界面来创建视图控件. 并且不需要你手动导入依赖包.

布局编辑器设置

依次介绍:

1. 只显示预览
2. 只显示蓝图
3. 蓝图和预览都显示
4. 预览界面显示方向
5. 手机屏幕型号
6. 系统API版本
7. 预览界面主题
8. 预览界面语言
9. 布局变形(即详细定制一个预览布局)

预览图和蓝图

顺序依次

预览图主要显示手机的实际效果(ConstraintLayout拥有布局编辑器属性, 所以存在预览界面和实际应用不同的情况), 蓝图主要清晰显示布局的信息

两者都可以直接编辑布局, 看你的喜好.

预览界面控制

1. 缩小
2. 缩放百分比
3. 放大
4. 适应屏幕
5. 打开一个缩略图(可以控制预览界面显示范围)
6. 错误和警告提示数量

ConstraintLayout布局属性

这一栏是根据你选择的ViewGroup变化的布局属性栏, 这里我只介绍ConstraintLayout的布局属性栏, 其他的没什么好介绍的一看就知道了.

依次功能:

1. 是否显示全部约束(不管是否开启都会显示你选择控件的约束的)
2. 自动连接约束(AutoConnect)
3. 删除所有约束
4. 推论约束(infer Constraint)
5. 默认边距
6. 对齐方式
7. 排列方式
8. 辅助线(GuideLine)

自动连接约束(AutoConnect)

这个类似磁铁的图标如果处于开启状态. 控件只要一拖到布局编辑器中就会自动创建水平和垂直方向各一条约束.

推论约束(Infer Constraint)

该功能属于一次性功能, 点击一次就会自动计算并且给当前布局编辑器中所有没有进行约束处理的控件进行水平和垂直方向各一条约束.

辅助线(GuidLine)

这个功能其实就相当于PS或者说很多作图工具中的一个辅助线

属性

除了布局编辑器写布局也应该要了解布局的属性, 不然有些问题你看不出来的.

编辑器属性(Editor)

该属性并不会在Android上有任何影响, 只会影响AS的布局编辑器坐标

tools:layout_editor_absoluteY="246dp"
tools:layout_editor_absoluteX="36dp"

布局编辑器

真机上

约束(Constraint)

一个控件有四个约束点/ 十二个约束属性(左和右有各有两个属性start和end以及right和left)

约束只能是同一水平下才能相互约束, 例如左和右之间能约束, 左不能和上下约束点关联.

约束并不是相互关联的关系. 而是

// 和父布局关联约束
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"

// 和其他控件关联约束
app:layout_constraintLeft_toRightOf="@+id/button3"
app:layout_constraintRight_toLeftOf=