不知道从什么时候开始,创建的layout默认的layout是ConstraintLayout,一直不知道这是啥鬼东西,总是将其手动的改成LinearLayout,也就是说习惯了靠编写XML代码完成界面。偶然的一次机会,朋友推荐了一篇介绍ConstraintLayout的博客,一发不可收拾的出来了这篇博客。下面跟着我来了解ConstraintLayout。
LayoutEditor
后来了解到,ConstraintLayout是Android Studio 2.2中主要的新增功能之一,也是Google在去年的I/O大会上重点宣传的一个功能。在Android Stuido中有个可视化工具 - Layout Editor(布局编辑器),自从接触Android Studio以来(beat 0.6),它一直都存在,,鉴于种种原因,我们一直都是习惯于编写xml来完成界面。其最根本的原因还是视图的拖动,并不能完美的解决屏幕适配。
自从ConstLayout出现,我们可以放弃编写xml了,为什么呢?ConstraintLayout的所有功能都可以直接从可视化工具 - Layout Editor中实现,因为布局API和Layout Editor是专门为彼此构建的。因此,可以完全通过拖放使用ConstraintLayout来构建布局而不是编辑XML。
俗话说,工欲善其事必先利其器,接下来我们揭开Layout Editor的庐山真面目。
Layout Editor全景
- 工具栏(Toolbar):提供在编辑器中配置布局外观和编辑布局属性的按钮
- Palette:提供小部件和布局的列表,您可以将它们拖动到编辑器内的布局中
- Component Tree:显示布局的视图层次结构。在此处点击某个项目将看到它在编辑器中被选中
- 设计视图:用来显示界面
- blueprint视图:在该视图中可以清晰的看到布局相关信息,约束关系、边距等
- 属性(Attributes):针对当前选择的视图提供属性控件
Design和Text选项卡
- Design:可以在LayoutEditor中配置布局的外观
- Text :查看xml中的布局代码,同时在Preview窗口中查看当前界面显示
在”Design”选项中,如果没有选中任何视图,按着ctrl然后点击鼠标左键UI视图的任何位置,将会切换到Text;如果选中了某个视图,按着ctrol然后点击鼠标左键UI视图的任何位置,不仅会切换到Text,同时定位到选中的视图的code在XML的位置。
更改预览外观
- Design and blueprint:用于选择在编辑器中查看布局的方式。Design 视图显示布局的彩色预览,而 Blueprint 视图仅显示每个视图的轮廓。或者,您可以并排查看 Design + Blueprint 。
提示:您可以通过按 B 在这些视图之间进行切换。
- Screen orientation:用于在横屏和竖屏方向之间旋转设备。
- Device type and size:用于选择设备类型(手机/平板电脑、Android TV 或 Android Wear)和屏幕配置(尺寸和密度)。您可以从多个预配置的设备类型和您自己的 AVD 定义中进行选择,或从列表中选择 Add Device Definition 新建 AVD 定义。
提示:您可以通过拖动布局的右下角来调整设备尺寸。 - API version:用于选择要在上面预览布局的 Android 版本。
- App Theme:用于选择将应用到预览的 UI 主题背景。注:此按钮仅对支持的布局样式有效;因此,此列表中的许多主题背景会导致错误。
- Language:用于选择显示 UI 字符串的语言。此列表仅显示字符串资源中可用的语言。如果您要编辑译文,请从下拉菜单中点击 EditTranslations(请参阅使用 Translations Editor 对 UI 进行本地化)。
- Layout Variants:用于切换到此文件的一个备用布局,或创建一个新布局(请参阅下文的创建布局变体)。
视图的inspector
“Attributes”窗口在顶部显示视图的inspector,位于src和contentDescription的视图属性上方。inspector显示UI元素的约束和边距,以及用于调整元素沿水平和垂直轴的位置偏差的进度条。
- hide:使用此按钮关闭“Attributes”窗口
- margin:通过单击值并选择不同的值来更改边距
- height/width类型:表示控件的宽度和长度
- Bias:使用进度来改变具有相反约束的元素的水平和垂直约束偏移
- 尺寸比(ratio):尺寸大小的比例
- 约束:表示当前侧面的约束,单击后可以删除约束
工具栏
- Align:设置UI视图和blueprint视图中是否显示约束、边距等
- Autoconnect:设置是否自动设置约束
- 删除所有视图的约束
- 自动推断所有视图的约束
- 设置默认边距
- 设置视图填充可用空间
- 设置对齐方式
- 添加GuideLine
ConstraintLaytout概述
对于传统布局而言,比如说,RelativeLayout以控件之间相对位置或相对父容器位置进行排列,还有LinearLayout以控件之间的线性关系进行排列。传统布局完全可以完成任意界面,ConstraintLayout又有什么优势呢?
对于复杂的的布局,使用传统布局,我们最多的解决办法是各种嵌套,尽管有include可以使用,但并没有在根源上解决,除非这样的界面,通过自定义View来实现,又有点得不偿失。而,ConstraintLayout,即约束布局,可以在平面视图层次结构创建大而复杂的布局(无嵌套视图组),减少布局的层级, 优化渲染性能。它类似于RelativeLayout,因为所有视图都是根据兄弟视图和父容器之间的关系来布局的,但它比RelativeLayout更灵活,并且更易于与Android Studio的Layout Editor一起使用。至于,在ConstraintLayout中如何完成界面编写,后续讲解。
前面我们已经详细讲解了Layout Editor界面,了解到可以完全通过拖放使用ConstraintLayout来构建布局而不是编辑XML,这样大大的提高了编写界面的效率,这种优雅的的方式,后续展现。
在这里又有一个疑问,ConstraintLaytout对于低版本是否兼容呢?ConstraintLaytout本事是由support库来提供的,它可适用于与Android 2.3(API级别9)及更高版本兼容的API库。当然,要使用ConstraintLayout,首先需要在app/build.gradle文件中添加ConstraintLayout的依赖:
dependencies {
...
compile 'com.android.support.constraint:constraint-layout:1.0.2'
}
美中不足的是,它对buildTools还有一定的要求,必须在25.0.3以上。如果配置低的话,升级下即可。
buildToolsVersion &