AndroidConstraintLayout详解
ConstraintLayout可能⼤家也⽐较熟悉了,在Google I/O 2016 上发布了 ConstraintLayout,也就是Android Studio 2.2中发布的新功能。以前我们写布局的时候基本都是靠编写XML,遇到复杂的布局避免不了多层嵌套,不可避免的会影响 UI 界⾯绘制的效率。⽬前对于复杂的界⾯,使⽤
RelativeLayout也⽆法解决,ConstraintLayout可谓RelativeLayout的升级版,但是要⽐前者强⼤太多。
Constraint翻译为约束,ConstraintLayout就是在⼦ View 上添加各种约束条件来控制每个⼦View所在的位置以及显⽰的尺⼨。⽽且这⼀切都是通过可视化操作来实现的。当然,可视化操作的背后仍然还是使⽤的XML代码来实现的,只不过这些⼀切都是AS⾃动⽣成的
升级Android Studio到2.3你会发现新建的XML根布局从以前的RelativeLayout变成了ConstraintLayout,可见Google对这个控件的重视,这也值得我们去学习。
布局编辑器功能介绍
sssdsd.png
此界⾯是基于Android Studio 2.3的截图,相对与2.2很多图标做了改变,其中这⼏个主题区域是没变的
1. Palette是控件区域,所有系统View和Layout都在这⾥,可以分类查。也可以直接搜索拖⼊布局中
2. Component Tree当前布局的层级结构,当点击⼀个View的时候就会选中这个View
3. 这⾥是对选中的View编辑操作的⼯具栏
4. Design Editor 布局编辑器主窗⼝,可以通过点击左下Design和Text切换编辑模式
5. Properties可以修改当前选中View的各种属性。点击下⾯的图标可以查看更多的View属性
约束
约束帮助你保持控件对齐, 你可以使⽤锚点来确定各控件之间的对齐规则,要创建⼀个约束, 你需要在指定⼿柄上点击并按住⿏标, 然后拖到另⼀个控件的约束⼿柄. ⼀旦锚点变绿, 就可以松开⿏标完成约束创建。
GIF1.gif
android最新版这样就创建了⼀个简单的约束,BUTTON2位于BUTTON1下49dp的位置,这样BUTTON2的⽔平位置不会变,垂直位置就始终在BUTTON1下49dp处了不管BUTTON1如何移动。
GIF2.gif
现在我们想BUTTON2 ⽔平和垂直位置都随着BUTTON1的位置改变⽽改变呢,我们需要添加新的约束,如下图
GIF3.gif
从图中我们可以看到BUTTON2的位置完全受BUTTON1的约束。
有很多常⽤的约束在顶部的⼯具栏中直接使⽤,⽤⿏标选中需要约束的控件然后在⼯具栏选择约束类型。在增加⼀个BUTTON3,要让BUTTON2和BUTTON3和BUTTON1的右边对齐。
GIF4.gif
要让BUTTON2和BUTTON3和BUTTON1的顶部对齐
GIF5.gif
可以看到选择了约束模型后会⾃动创建好每⼀个View的约束,还有其他很多模型应该看图标就能看明⽩是怎么样的,我就不⼀⼀⽰范了(懒)。约束对象不仅可以是View也可以说是⽗布局。
GIF6.gif
基线约束
还有⼀种基线约束,其意为控件之间的⽂本基线约束。换句话说就是⽂本对齐,当然这种这种约束是有⽂本控件才有的约束,Layout是没有基线约束的。创建基线约束只需要选中控件然后点击左下⾓的第⼆个图标就会出现控件的基线,然后链接所需要对齐的其他控件就可以了
GIF8.gif
使⽤⾃动连接创建约束 Autoconnect
在⼯具栏有⼀个磁铁都⼀样图标
这个就是开启或关闭⾃动约束的开关,也叫Autoconnect 默认是开启的。Autoconnect会判断我们的意图,并⾃动给控件添加约束。不
过Autoconnec t是⽆法保证百分百准确判断出我们的意图的,如果⾃动添加的约束并不是你想要的话,
还可以在任何时候进⾏⼿动修改。可以把它当成⼀个辅助⼯具,但不能完全靠它去添加控件的约,使⽤起来也很有局限性。 如下图所⽰
使⽤推理操作创建约束 Inference
Inference也是⽤于⾃动添加约束的,但它⽐Autoconnect的功能要更为强⼤,使⽤起来也很⽅便。因为AutoConnect只能给当前操作的控件⾃动添加约束,⽽Inference会给当前界⾯中的所有元素⾃动添加约束。可以⼀键⾃动⽣成所有控件的约束,如下图所⽰