写在前面:之前稍微复杂的设计实现,我们都可能会借助于嵌套实现,我们知道嵌套越多,性能就越低.而我们布局一般都是在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
<TxtView
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,当然这里不是啦
悬浮按钮效果
当然,使用相对布局也是可以实现的,但是使用约束布局,会有惊喜哦
<Textview
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,基本上就这些了,写了主要是让自己梳理下,本文非原创,上面写了出处,再次感谢鸿洋大神的文章分享.
