android ConstraintLayout约束布局详解

时间:2021-12-08 16:25:53

在2016年的谷歌IO大会上,Google发布了android Stutio 2.2预览版,同时也发布了android新的布局ConstraintLayout布局,但是在今年发布的android studio 2.3中Google巴ConstraintLayout作为默认布局。

一 ConstraintLayout简介:

约束布局,根据视图中其他元素或视图,确定View在屏幕中的位置,它有三个要素:

根据其他视图设置位置

根据父容器设置位置

根据基准线设置位置

它的特点:

可视化操作

可以代替RelativeLayout,解决多层嵌套布局

创建好ConstraintLayo之后布局是这样的:

这里我放了2个Button按钮

android ConstraintLayout约束布局详解android ConstraintLayout约束布局详解

我们来看一下几个图标及其含义


android ConstraintLayout约束布局详解android ConstraintLayout约束布局详解android ConstraintLayout约束布局详解

这个像眼睛的图标,是查看用的。打开它会在右边的蓝色布局显示控件之间的约束关系,把鼠标放在左边的视图上也会显示约束关系;关掉它就不会主动显示了。



android ConstraintLayout约束布局详解android ConstraintLayout约束布局详解android ConstraintLayout约束布局详解

这个图标是自动创建约束用的,我觉的还是把它关了好,一般情况下都是手动创建的。



android ConstraintLayout约束布局详解android ConstraintLayout约束布局详解android ConstraintLayout约束布局详解

这个控件会在两种情况下出现:点击工具栏中的,清除所有的约束条件;另外一种是点击某个控件,这个控件下面会出现这个图标,点击它清除本控件的约束。

android ConstraintLayout约束布局详解

android ConstraintLayout约束布局详解

这个图标是用来自动推断约束条件的,它用来扫描整个布局以确定所有视图最有效的约束。

android ConstraintLayout约束布局详解android ConstraintLayout约束布局详解


android ConstraintLayout约束布局详解

Add Vertical Guideline:横向扩展空间以适应约束。

Add Horizontal Guideline:纵向扩展空间以适应约束

这两个图标会在你的布局上面添加一条或N条横向或纵向的线,线的作用就是按百分比进行切割。



android ConstraintLayout约束布局详解

properties我们可以看到右边新加了一个Properties界面

顶部的视图中可以调节margin等,可以玩玩

android ConstraintLayout约束布局详解


二 Constraint基本操作


我们随意在布局中添加一个按钮

android ConstraintLayout约束布局详解android ConstraintLayout约束布局详解

运行它,唉!布局怎么跟我们预想的不一样呢


android ConstraintLayout约束布局详解

android ConstraintLayout约束布局详解

因为在ConstraintLayout中不添加约束,布局默认在左上角

下面我们来学学怎么添加、修改约束

1.增加约束

拖动图片中的小圆点可以添加约束

android ConstraintLayout约束布局详解

android ConstraintLayout约束布局详解

2.删除约束

   删除弹约束更简单了

android ConstraintLayout约束布局详解android ConstraintLayout约束布局详解