Android-ConstraintLayout详解(上)

162 阅读7分钟
原文链接: www.jianshu.com

现在还不用ConstraintLayout是有点守旧了,它是studio 2.2版本主要增加的功能之一,最大的好一句话概括就是:支持可视化编辑xml文件,解决多层布局嵌套的问题,这也就优化了我们的程序,详情请查看:

解析ConstraintLayout的性能优势

由于ConstarintLayout布局可以可视化和代码编写,我们就分别看看这两种方式。

基本用法

基本用法之可视化编写布局文件

  在高版本的studio中默认采用constraintLayout布局,中间有一个textview,我们选中,delete删除.开始一个新的布局编辑。

注:界面默认的TextView的属性有:app:layout_editor_absoluteY

                                                          app:layout_editor_absoluteX

这个是TextView在界面中的纵轴和横轴的绝对坐标(左上角),只是单纯的进行演示,在真机操作的时候是无效的,删除就行了。

1.拖拽布局添加约束

然后我们从左边的Palette拖拽一个TextView,不清楚,这无关紧要。(以下视频存在模糊大家凑活看)


拖拽一个TextView从Palette

大家看到TextView上下左右四个小空心圆点了吧,我们就是通过这个空心圆点给每个控件添加约束,每个控件的约束都分为垂直和水平两类,一共可以在四个方向(上下左右)上给控件添加约束。

比如我们想让TextView居中:


控件居中显示_腾讯视频

位于某控件之下50dp处:


位于某控件底部50dp处_腾讯视频

2.删除约束

取消约束三种方式:

删除控件某一具体的约束(鼠标放在圆圈上变红后点击即可)


删除控件某一个具体约束_腾讯视频

删除某一个控件的全部约束:选中一个控件,然后它的左下角会出现一个删除约束的图标,点击即可




删除某个控件全部约束_腾讯视频

删除当前页面所有约束:点击工具栏中的删除约束图标即可:


删除某个页面全部约束_腾讯视频

3.Inspector使用

3.1. Inspector在哪里呢?Properties区域的上半部分,被称为Inspector。如图:

在Inspector中有一个纵向的轴和一个横向的轴,这两个轴也是用于确定控件的位置的。如果调整了纵横轴的比例,那么TextView的位置也会改变.,如下:


Inspector纵横轴_腾讯视频

不知道我操作小伙伴注意没,我们的宽充满父类,用的属性是match_costraint,没有match_parent,而且也找不到match_parent这个值,这是因为google在constraintlaout布局已经不推荐match_parent属性了,需要手敲,且与之前的结果不一样。

3.2.我们将Inspector横轴的值变到了最大,为什么还是有间距呢?

原来android默认给控件的每个方向上的约束都默认添加了一个16dp的间距,从Inspector上面也可以明显地看出来这些间距的值。我们只需要直接在控件上改就行了。(视频)


控件自带padding_腾讯视频

3.3.Inspector中间的正方形区域可以控制大小,有三种模式,点击即可切换


表示wrap content,这个我们很熟悉了,不需要进行什么解释。

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

match constraints,它有点类似于match parent,但和match parent并不一样,是属于ConstraintLayout中特有的一种大小控制方式,那我们来看一看他们的区别,看视频:


可以看刚开始我们将下面Button的上边和上面Button的底边添加约束,match constraints的作用效果是充满上边Button以下的所有区域,当我们取消之前的约束,将下面Button的上边的约束条件改为和parent添加约束后,下面Button直接覆盖上面的Button,直接充满全屏了。

总结:match constraints的实现效果和约束条件相关联,是相对的。

4.Guidelines用法:


.Guidelines的使用_腾讯视频

从视频中可以看到,我们从上面的工具栏拖拽了一个垂直和水平的guidelines辅助线,然后默认单位是dp,我点击辅助线的前端设置为百分比,然后确定位置,添加约束。

5.省时省力,自动添加约束

5.1 Autoconnect

Autoconnect可以根据我们拖放控件的状态自动判断应该如何添加约束,比如我们将Button拖拽到界面中,如果接近或者位于水平方向的中央,就会出现一个水平辅助线(guidelines有些类似),Autoconnec判断我们可能是想水平居中,所以此时你放开手就会自动帮你添加水平居中的约束,如果意图判断不对,建议手动了,主要是辅助作用,很不准确,下面演示一下:


Autoconnect演示_腾讯视频

大家看到了Autoconnect添加的约束,app:layout_constraintStart_toStartOf="parent" 和app:layout_constraintEnd_toEndOf="parent" 与app:layout_constraintLeft_toLeftOf="parent"  和app:layout_constraintRight_toRightOf="parent" 是一个意思。

5.2 Inference

Inference比Autoconnect的功能要更为强大,因为AutoConnect只能给当前操作的控件自动添加约束(也不是100%准确),而Inference会给当前界面中的所有元素自动添加约束,一键自动生成所有的约束,效果如下:


Inference演示_腾讯视频

基本用法之代码编写布局文件

1.手动敲相关属性

说完了拖拽,我们看一看通常的写法,手动敲相关属性,敲之前,先新建一个xml,放一个Button按钮:

那我们试试让他居中,添加相关约束:

我们看看下面这几个新增的属性是啥意思:

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

拿app:layout_constraintTop_toTopOf="parent"来说明:constraintTop意思是添加Top方向的约束,toTopOf意思是去哪个控件的Top方向,="parent" 就是参照的控件。连起来的意思是:给Buton按钮添加一个Top的约束,约束方向是其父类的Top边。其余三个就不说了,其次类推,其他也都类似。

2.MATCH_CONSTRAINT属性

为了测试MATCH_CONSTRAINT属性,我们再来一个注册按钮。

那我们用一下MATCH_CONSTRAINT这个属性,我们让注册按钮的宽设置为:MATCH_CONSTRAINT,结果如下:

我为什么设置odp呢?应为0dp就代表MATCH_CONSTRAINT的写法,我们代码中的意思就相当于我不设置宽了,让它根据我的约束自适应大小,那我在设置一下match_parent,看看效果:

3.设置宽高比(constraintDimensionRatio)

看代码:

也可以这样写:

app:layout_constraintDimensionRatio="W,16:6"

app:layout_constraintDimensionRatio="H,16:6"


4.实现LinearLayout的wedget

代码如下:

4.1 有三个TextView,这里只有两个,剩余脑补,都一样。到了这里我们还是没有用到weight,别急我们给第一个三个TextView以此设置app:layout_constraintHorizontal_weight=""的值为:2:1:1,结果如下:

4.2 还有一个layout_constraintHorizontal_chainStyle 属性

    我们刚才设置的三个TextView,两两添加了依赖,类似下图:

横向的相当于组成了一个链(Chains)。在这个链的最左侧的元素成为链头,我们可以在其身上设置一些属性,来决定这个链的展示效果,这就是我要说的属性layout_constraintHorizontal_chainStyle。默认为:app:layout_constraintHorizontal_chainStyle="spread"

还有另外两个chainStyle:

packed

spread_inside

一共三个,这里只稍微演示一下,即在默认的基础上设置控件宽度非0,如下:


其余效果,大家可以自己研究,来一张官网可以实现的效果:


5.layout_constraintHorizontal_bias 和 layout_constraintVertical_bias

  layout_constraintHorizontal_bias 和 layout_constraintVertical_bias这两个属性来设置控件的间隙比例,效果图如下:


如果没有:app:layout_constraintHorizontal_bias="0.9"

                      app:layout_constraintVertical_bias="0.9"

Button应该是居中的,但我们设置之后,相当于在横向从左往右移动了90%,纵向从上往下移动了90%。

6.Guideline

这个Guideline,我们在拖拽实现的时候讲过,Guideline被用来添加一个垂直或水平方向上的辅助线,然后我们以此来确定控件的摆放位置,我们先说一下相关的属性:

android:orientation取值为"vertical"和"horizontal" 分为横向和纵向

layout_constraintGuide_begin  距离顶部多少有一个辅助线,根据orientation来决定是横向还是纵向。

layout_constraintGuide_end    距离底部多少有一个辅助线,根据orientation来决定是横向还是纵向。

layout_constraintGuide_percent  距离百分比,根据orientation来决定是横向还是纵向。

我们直接上代码和效果,大家一看便知:


ok,我们讲了ConstraintLayout的拖拽和手动编写代码两种方式,没有使用的小伙伴赶紧尝试吧,熟能生巧。