Android基础ConstrainLayout约束布局的介绍和使用
2017-11-09 11:55
531 查看
写在前面:之前稍微复杂的设计实现,我们都可能会借助于嵌套实现,我们知道嵌套越多,性能就越低.而我们布局一般都是在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%:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/14/602d9c851637ae2d1f5a010625dffbbc)
基本上不用在使用其他布局,只需要添加需要的控件即可
2.灵活性
我们想要添加或修改布局也比以往要容易简单很多,另外,使用约束布局,其自带的百分比属性,一定会让你开怀大笑一分钟.举个例子如下图所示
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/14/e4044e7fba9e6bbb8b98b9f191612312)
宽度铺满,宽高比是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都是从)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/14/9e319d4aa0064e710deddf54ea4be32f)
是不是很熟悉这样的布局
上面截图的布局,我们使用相对布局肯定是可以实现,但是今天我们可以使用约束布局来实现.
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/14/b90fbcc6e5e6c7c0d58bbecf75149f32)
1-1
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/14/4873cf0b2f64aac9038c71acd06eacfe)
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底部相持平
类似还有一些属性,大家一眼就能明白,这里不在多说
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/14/ef1f96e797e7916216724f58f4b8f1ef)
相对布局
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/14/2487c52d84eb860b47601bf8c83169a3)
约束布局
这里的第二个button处于剩余空间的中间位置.而不是占据剩余宽度.
这里我们只要把width修改为0dp,那么就和相对布局是一样的效果了;
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/14/97e3265f5f5abbc48d0c1b1038eb6e1d)
和线性布局一致
此时,width设置为0dp,设置属性app:layout_constraintHorizontal_chainStyle="spread"
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/14/9ed0783790201c51ea97752723a23be2)
稍作变化
此时设置width不为0,属性app:layout_constraintHorizontal_chainStyle="spread"
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/14/c3a15c2ab18263dd5986f07719af8d0f)
所有的情况
这个是所有组合之后实现的效果.,是不是比线性布局的weight要强大一些....
第四个例子:类似我们的悬浮按钮.FloatingActionButton,当然这里不是啦
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/14/a5bb17424152c8d11c53c50395de6814)
悬浮按钮效果
当然,使用相对布局也是可以实现的,但是使用约束布局,会有惊喜哦
<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,基本上就这些了,写了主要是让自己梳理下,本文非原创,上面写了出处,再次感谢鸿洋大神的文章分享.
说明:本文内容是我从鸿洋大神的微信公章号看到的,看完之后从我自身的理解,写了下学习收获,若有兴趣您可以关注鸿洋大神微信查看,原始文章链接如下.
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,基本上就这些了,写了主要是让自己梳理下,本文非原创,上面写了出处,再次感谢鸿洋大神的文章分享.
相关文章推荐
- Android 基础:常用布局 介绍 & 使用(附 属性查询)
- [Android]Android布局文件中的android:id="@*"属性使用方法汇总以及介绍
- 【Android基础】listview控件的使用(4)-----自定义布局的listview的使用
- Android基础--Handler的使用简单介绍
- Android基础 -- AsyncTask介绍和使用
- Android 5.0新控件 CoordinatorLayout | 协调布局 介绍及使用详情
- Android基础之使用inflater来实现动态加载布局
- Android TableLayout(表格布局) 使用介绍
- android安卓涵盖大多基础xml文件使用的介绍
- Android 减少布局层次—— ConstraintLayout 约束布局 的使用
- 介绍内容有 Android 开发规范, 架构, 布局技巧, 以及使用一些有助于快速开发相关工具等等
- Android布局之ListView使用介绍
- Android Volley解析(1) - 基础使用介绍
- Android 5.0新控件 TextInputLayout | 文字输入布局 介绍及使用详情
- Android基础之常用布局介绍
- Android单元测试的利器:Juint(一):Juint的介绍和基础使用
- Android RelativeLayout (相对布局)使用及介绍
- Android 5.0新控件 AppBarLayout | 嵌套布局 介绍及使用详情
- google 原生态 抽屉式侧滑菜单 Android DrawerLayout 布局的使用介绍
- 代码加约束VFL语法的详细使用介绍(代替Autolayout进行布局,比Autolayout更简单明了,生动直观)