写在前面:之前稍微复杂的设计实现,我们都可能会借助于嵌套实现,我们知道嵌套越多,性能就越低.而我们布局一般都是在xml里面进行实现,拖拽的话估计现在android开发者都不会去使用.为了提升开发者的可视化编程,谷歌官方在2016年的i/o大会上提出了一个新的组件Constrainlayout中文可以翻译成"约束布局".听我ios的同事说他们很早之前就有了类似的组件,说实话真的是很羡慕ios开发者,苹果提供了那么多的组件方便调用......苦逼了我们android开发人员,不过还好android也出现了很多很好用的组件,有朝一日或许可以和ios系统并驾齐驱......有点小激动呢;好了废话不多说,开始我们"约束布局".

说明:本文内容是我从鸿洋大神的微信公章号看到的,看完之后从我自身的理解,写了下学习收获,若有兴趣您可以关注鸿洋大神微信查看,原始文章链接如下.

https://mp.weixin.qq.com/s?__biz=MzAxMTI4MTkwNQ==&mid=2650824132&idx=1&sn=1cf09caa325d83de12b73c615fc9613e&chksm=80b7895ab7c0004c5cbb2175a3da302fc13d612762f56094f13b80e1334e7655dde1ad00083c&mpshare=1&scene=23&srcid=0918DtSCuT4xSSd8Mmjjscto#rd

特点

1.扁平化:

ConstraintLayout构建布局的话,相比之前相对布局嵌套线性或者反之,简单明了很多,可以借用一张网上的图片查看一下,

据调查ConstraintLayout 在测量/布局阶段的性能比 RelativeLayout大约高 40%：

基本上不用在使用其他布局,只需要添加需要的控件即可

2.灵活性

我们想要添加或修改布局也比以往要容易简单很多,另外,使用约束布局,其自带的百分比属性,一定会让你开怀大笑一分钟.举个例子如下图所示

宽度铺满,宽高比是10:6

android:id="@+id/textview"

android:layout_width="0dp"

android:layout_height="0dp"

android:background="#765"

android:gravity="center"

android:text="banner"

app:layout_constraintDimensionRatio="H,10:6"//宽度铺满,宽高比10:6 也可以写成W,10:60

app:layout_constraintLeft_toLeftOf="parent"//和父布局左侧对齐

app:layout_constraintRight_toRightOf="parent"// 和父布局右侧对齐/>

之前想要实现这样的效果,需要我们在代码去new一个 params.现在只用我们去设置属性就好.

ok下面我们就使用几个例子来介绍下如何使用约束布局;(PS:这里的demo都是从)

是不是很熟悉这样的布局

上面截图的布局,我们使用相对布局肯定是可以实现,但是今天我们可以使用约束布局来实现.

1-1

1-2

在上面我们看到了几个类似相对布局的属性,我们一一来介绍.

app:layout_constraintLeft_toLeftOf="parent"//在父布局的左侧

app:layout_constraintTop_toTopOf="parent"//在父布局顶部

类似还有右侧和底部...

app:layout_constraintLeft_toRightOf="@id/textView3"//该控件的右侧是textView3,也可以理解是左侧是textview3

app:layout_constraintRight_toRightOf="parent"//在父布局右侧

app:layout_constraintTop_toTopOf="@id/textView3"//和textview在同一水平线

app:layout_constraintBottom_toBottomOf="@id/textView3"// 控件和textview3底部相持平

类似还有一些属性,大家一眼就能明白,这里不在多说

第二个例子:约束布局中是没有match_parent的,但是可以设置为0dp,ConstraintLayout中0代表：MATCH_CONSTRAINT;

看下面的两张截图,我们可以发现不同之处

相对布局

约束布局

这里的第二个button处于剩余空间的中间位置.而不是占据剩余宽度.

这里我们只要把width修改为0dp,那么就和相对布局是一样的效果了;

第三个例子:

实现线性布局的weight功能,但是要比其强大.先看效果图

和线性布局一致

此时,width设置为0dp,设置属性app:layout_constraintHorizontal_chainStyle="spread"

稍作变化

此时设置width不为0,属性app:layout_constraintHorizontal_chainStyle="spread"

所有的情况

这个是所有组合之后实现的效果.,是不是比线性布局的weight要强大一些....

第四个例子:类似我们的悬浮按钮.FloatingActionButton,当然这里不是啦

悬浮按钮效果

当然,使用相对布局也是可以实现的,但是使用约束布局,会有惊喜哦

android:id="@+id/textView"

android:layout_width="60dp"

android:layout_height="60dp"

android:background="@color/colorAccent"

android:gravity="center"

android:text="TextView"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintHorizontal_bias="0.9"// 看这里,设置左右两侧间隙比例为10:9

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.9"// 看这里 设置上下两侧间隙比例为10:9

/>

ok,基本上就这些了,写了主要是让自己梳理下,本文非原创,上面写了出处,再次感谢鸿洋大神的文章分享.