ConstraintLayout是在Google 2016年的I/O大会上新出的一个布局组件,过去这么长的时间,现在也更新到1.1.2版本了,优点是能将复杂的布局都放在同一层,这样大大的优化了界面渲染的效率。下面就开始总结我学习到的ConstraintLayout的知识点。
简介
学了之后发现其实这个布局是集当前已有的基本布局的一个优化整合的产物,对于复杂布局的处理也很好,基本能想到的简便的方式都有,例如相对位置,权重,百分比等这些在布局的时候能事半功倍。看起来就像是RelativeLayout、LinearLayout、PercentLayout等的综合体。
相对位置
相对位置的布局使用效果图,下边的说明中可以和这个图比较简单的想一下如何实现,这样有利于熟悉使用哦。
和RelativeLayout的相对布局相比,相对位置的可能性更多,RelativeLayout能做到的它都可以做到。它相对位置的基本原则是当前组件的某一边边界在另一个组件的某个方向。当然左右和上下是分开的。即有当前组件的左边界或者右边界和另一个组件的左边对齐或右边对齐,上下也是同理。具体的有:
1 | 当前组件的左边界和另一个组件的左边对齐,即与另一个组件按左边对齐 |
仔细观察就不难发现,这就是对应着RelativeLayout的toXXXOf和alignXXX,当然对于居中和右对齐,也是使用上述的方法,上边的方法接受的参数可以是另一个组件的id,也可以是parent这个值,也就是相对于父容器。
居中技巧:
1 | 在父容器的最左边 |
其中可以两个及其以上的组合,就能实现各种居中,例如:
1 | 水平居中 |
还有其他组合方式就不一一介绍了。在居中的过程中可以使用bias,来实现在某个方向的偏向。例如:
1 | 水平居中后再水平偏向左边0.2个屏幕宽度位置 |
margins的使用
在ConstraintLayout中,对于margin的使用,只有在具有约束的方向才有效。例如只有左侧有约束,那么只有marginLeft有效,其他方向的margin都是无效的。
还有一个点,就是与当前组件约束的组件visible为gone了,就可以设置gone_marginXXX,即在约束的组件被隐藏了,这个margin才有效,这样就能避免隐藏导致布局出现混乱,也算是解决相对布局的一个容易错乱的问题。
宽高比例
使用layout_constraintDimensionRatio
可以设置宽高比例,对于这个属性宽和高需要至少有一个设置为0dp,然后按照比例调整。例如一个banner宽等于屏幕宽度,高等于宽度的一半,那么就能很容易的设置成。
1 | android:layout_width="match_parent" |
这样就能很容易的设置成一个宽高比为2:1的组件,大大的优化了布局的效率和方法。
链的模式
对于链,其实在相对位置的时候就有体现了,组件链接到的是父容器,或者另一个组件,之间形成的约束关系,其实就是链。这个链的感觉就像是在组件的上下左右都有弹簧,哪边拉力越大就越往那边靠近。
这个其实就不那么好说了,直接先看一下图
使用到的方法也是相对位置的方法,只是链接的组件不同,以XYZ为例:
1 | <TextView |
其中X的左边界与父容器的左边对齐,右边界在Y的左边;Y的左边界在X的右边,右边界在Z的左边;Z的左边界在Y的右边,右边界与父容器的左边界对齐。不看图的话很难想象这样的约束之后就能把这三个组件水平的排放在一行中,并且会是平均分配,宽度不足的地方空白来填充。
对于下边的ABC、DEF、GHI也是这样的关系,但是只是多了链的模式,其实XYZ也有链的模式,是默认的spread,ABC是spread_inside,就是指两边的靠到父容器的边上,中间不足的空白填充;DEF是packed,就是三个紧挨在一起,居中显示,但是这里看到的有向左的偏移,是的这个模式下还可以和bias一起使用,这里使用到水平方向的偏移,值是0.2;最后的GHI也是packed模式下使用了weight属性,当然这里使用的是水平方向的权重,GHI的权重是1:2:1,就能达到这样的效果。
这一部分就相当于是融合了LinearLayout的布局方式,让这个布局方式更加方便。
GuideLine
以前在使用相对布局的有个技巧就是使用一个没有背景的View,设置的大小也很小例如1dp之类的,让它在某个位置当作辅助组件,便于布局时的控制,但是现在的GuideLine功能也更加强大,他能以任何比例在屏幕的任何位置,具有水平和垂直两个方向的引导线,便于控制位置。
1 | 表示水平方向的线,从左往右,位置在高的中间 |
先申明这两个GuideLine在屏幕中是看不到的,下面为了直观的看到,我使用View来显示出这两根线。
总结
相信有了这个布局,熟练之后对于复杂布局的优化会有明显的提升,正因为功能强大,不知道会不会以后不再使用以前的基本布局。