内容简介:从本篇博客开始我们开始介绍如何使用ConstraintLayout。既然ConstraintLayout叫约束布局,首先我们先介绍什么叫约束(Constraints):一个约束表示View之间的”布局约束”关系,以及约束的位置,类似RelativeLayout的”相对”概念。
从本篇博客开始我们开始介绍如何使用ConstraintLayout。
既然ConstraintLayout叫约束布局,首先我们先介绍什么叫约束(Constraints):
约束(Constraints)
一个约束表示View之间的”布局约束”关系,以及约束的位置,类似RelativeLayout的”相对”概念。
编辑器介绍
在工程中我们新建一个布局activity_main.xml,整个界面如下:
这是一个编辑器整体的界面,下面我们来介绍一些常用的功能:
- 设计/文本视图
左下角有视图切换的选项,通过这个选项我们可以切换设计/(代码)文本视图,传统在开发的过程中可能觉得设计视图并不常用,但是在使用ConstraintLayout时它确实很强大,反而可能很少用代码视图了。
- 设计/蓝图
这里我们可以看到左上角的按钮,这个是用来切换设计界面和蓝图界面的,通常我们需要两个界面都展示,这样我们可以更加清晰地看到各个View的约束。
- 设备与分辨率适配
这个功能我们可以切换横竖屏等UI的模式,这个功能也可以使我们方便的进行各种UI模式的适配。
在这里我们可以预览当前布局在不同的分辨率下的效果,这个功能在适配的时候非常方便,这里提一下下面的Custom选项,这个功能允许我们将当前布局拖拽成任意的大小:
- 自动约束
这个功能允许编辑器自动进行约束,当我们拖拽一个空间到视图中后,编辑器会自动为我们创建一个约束,可能很多时候我们并不需要自动约束,我们可以点击把它关闭。
- 约束推断
这个按钮类似PS的魔棒,它的功能是进行约束的推断,如图我拖拽了两个按钮到布局中,一开始并没有任何约束,当我点击了这个按钮后,自动为我生成了如图的约束。
代码视图
我们切换到代码视图:
此时我们发现界面的哪些约束在代码中也仅仅增加了几行代码,用来表示当前的约束,仔细观察后我们发现其实都是toStartOf,toEndOf,toTopOf…,这些都是指定的当前View与其它View(或Parent)之间的关系,对比一下RelativeLayout,我们很容易就能明白。
如果当前没有任何约束的时候,我们观察代码:
注意这些tools:xxx,只是表示View在编辑器的绝对位置,是用来我们设计(拖拽)时使用的。如果不添加约束,运行后只是显示在屏幕的左上角,重叠在一起。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 我做编辑器这些年:钉钉文档编辑器的前世今生
- 有爱编辑器 1.7.1 发布,mysql 编辑器 GUI
- 小书匠编辑器 6.0.0 发布,好用的 Markdown 编辑器
- 小书匠编辑器 6.0.0 发布,好用的 Markdown 编辑器
- 10个最佳富文本编辑器
- 在线代码编辑器利器-codeMirror
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Node.js开发指南
郭家寶(BYVoid) / 人民邮电出版社 / 2012-7 / 45.00元
Node.js是一种方兴未艾的新技术,诞生于2009年。经过两年的快速变化,Node.js生态圈已经逐渐走向稳定。Node.js采用了以往类似语言和框架中非常罕见的技术,总结为关键词就是:非阻塞式控制流、异步I/O、单线程消息循环。不少开发者在入门时总要经历一个痛苦的思维转变过程,给学习带来巨大的障碍。 而本书的目的就是帮助读者扫清这些障碍,学会使用Node.js进行Web后端开发,同时掌握事件驱......一起来看看 《Node.js开发指南》 这本书的介绍吧!