Android布局之ConstraintLayout

释放双眼,带上耳机,听听看~!

这篇材料本来是我给公司同事培训Android基础时弄的,对ConstraintLayout布局做了个简单介绍和使用,也放出来吧,有需要的还可以瞅两眼。

介绍

早在2017年的时候,Google就发布了 Android Studio 2.3 正式版,在这个版本中新建Module中默认的布局就是 ConstraintLayout 。
​ConstraintLayout 也就是约束布局,和其他布局一样,继承自ViewGroup,但它的不同点在于调整控件的位置和大小更加灵活,它的出现主要是为了解决布局嵌套过多的问题,让开发者更方便的使用可视化的方式来编写界面。

版本支持

ConstraintLayout是一个Support库,意味着向前兼容,它可以兼容至API 9,也就是Android 2.3,鉴于现在市场上手机基本都是2.3及以上的,所以如果不是特殊情况,可以不用考虑版本问题。下面是官网文档说明:
Note: ConstraintLayout is available as a support library that you can use on Android systems starting with API level 9 (Gingerbread).

 

基本操作

首先在app/build.gradle文件中添加ConstraintLayout的依赖,现在新建项目默认就有了,没有的话加上,如下

dependencies {
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}

 

1.添加约束

ConstraintLayout的基本用法很简单,比如我们想要向布局中添加一个按钮,那么只需要从左侧的Palette区域拖一个Button进去就可以。

如果一个控件没有添加任何约束的话,它在运行之后会自动位于界面的左上角。每个控件的约束都分为垂直和水平两类,一共可以在四个方向上给控件添加约束,如下图所示。

 

image.png

如果给Button的右边和下边添加了约束,Button就会将自己定位到布局的右下角了。类似地,如果我们想要让Button居中显示,那么就需要给它的上下左右都添加约束,如下图所示。

 

image.png
image.png

除此之外,我们还可以使用约束让一个控件相对于另一个控件进行定位。比如说,我们希望再添加一个Button,让它位于第一个Button的正下方,并且间距108dp,那么操作如下所示。

 

image.png

 

也就是首先将上左右约束到另一个控件,然后拖动控件调整间距至108即可。

2.删除约束

删除约束的方式一共有三种,第一种用于删除一个单独的约束,将鼠标悬浮在某个约束的圆圈上,然后该圆圈会变成红色,这个时候单击一下就能删除了,如下图所示。

image.png

第二种用于删除某一个控件的所有约束,选中一个控件点击鼠标右键,然后有一个删除约束的选项,点击该选项就能删除当前控件的所有约束了,如下所示。

 

image.png

第三种用于删除当前界面中的所有约束,点击工具栏中的删除约束图标即可,如下图所示。

 

image.png

 

Inspector

ConstraintLayout的基本用法学完了,接下来开始学习一些进阶的内容。

当你选中任意一个控件的时候,在右侧的Attributes区域就会出现很多的属性选项,如下图所示。

 

image.png

需要我们重点掌握的是Attributes区域的上半部分,这部分也被称为Inspector。

 

image.png

首先可以看到,在Inspector中有一个纵向的轴和一个横向的轴,这两个轴也是用于确定控件的位置的。我们刚才给Button的上下左右各添加了一个约束,然后Button就能居中显示了,其实就是因为这里纵横轴的值都是50。如果调整了纵横轴的比例,那么Button的位置也会随之改变,如下图所示。

 

image.png

不过,虽然我们将横轴的值拖动到了100,但是Button并没有紧贴到布局的最右侧,这是为什么呢?实际上,Android Studio给控件的每个方向上的约束都默认添加了一个间距,从Inspector上面也可以明显地看出来这些间距的值为8。如果这些默认值并不是你想要的,可以直接在Inspector上进行修改,如下图所示:

 

image.png

接下来我们再来学习一下位于Inspector最中间的那个正方形区域,它是用来控制控件大小的。一共有三种模式可选,每种模式都使用了一种不同的符号表示,点击符号即可进行切换。

 

image.png

这个符号表示wrap content

image.png

这个符号表示固定值,也就是给控件指定了一个固定的长度或者宽度值。

image.png

这个符号表示any size,它有点类似于match parent,但和match parent并不一样,是属于ConstraintLayout中特有的一种大小控制方式。

看一下我们怎样使用any size实现和match parent同样的效果吧。比如说我想让Button的宽度充满整个布局,操作如下图所示。

 

image.png

 

其他特性

关于ConstraintLayout布局当然还有很多东西,比如下面两个,这里也就不做详细介绍了,有兴趣的可以深入研究。
1.Guidelines
2.自动添加约束

人已赞赏
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索