约束布局ConstraintLayout加快布局速度

Android Studio2.2更新布局设计器,同时,引人了约束布局ConstraintLayout。

简单来说,可以把它看做是相对布局的升级版本,但是区别与相对布局更加强调约束。何为约束,即控件之间的关系。

它能让你的布局更加扁平化,一般来说一个界面一层就够了;同时借助于AS我们能极其简单的完成界面布局。

ConstraintLayout简介​

ConstraintLayout的优点非常突出。

ConstraintLayout不需要使用嵌套布局就可以让我们去构建一个大而复杂的布局, 他与RelativeLayout很相似,所有在里面的View的布局方式取决于View与View之间的关系和父布局。但是他比RelativeLayout 更灵活,并且在Android Studio's Layout Editor中可以很容易的去使用。

ConstraintLayout的所有工作都可以使用布局编辑器的可视化工具中完成,因为布局API和布局编辑器对此专门构建的。因此你可以完全通过拖拽的方式去构建一个使用了ConstraintLayout 的布局,而不用直接在XML中编辑。

参考下图:


这个界面主要分成下面几个部分:

  • 左侧边栏,包括Palette组件库和Component Tree
  • 中间是布局设计器,包括两部分,左边是视图预览,右边是布局约束
  • 右侧边栏,上面是类似盒子模型的边界和大小布局设计器,下面是属性列表。

简单介绍完了约束布局的特色和开发界面,接下来来看看如何使用约束布局。

添加约束布局

使用约束布局,必须确保你拥有最新的约束布局的库。

  1. 点击Tools > Android > SDK Manager

  2. 点击SDK Tools Tab

  3. 展开Support Repository,然后勾选ConstraintLayout for Android 和Solver for ConstraintLayout。勾选Show Package Details,注意你下载的版本。

  4. 点击OK


添加ConstraintLayout库到你的build.gradle文件中,目前最新版本是beta4

dependencies {
  //...
    compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'
}

你下载的这个库的版本可能会更高,确保与你之前下载的版本匹配即可。

使用约束布局

新建的项目,自动生成的布局默认不会使用ConstraintLayout,但是Android Studio提供了便捷的方式,可以直接转换成ConstraintLayout。

  1. 打开你的布局文件,切换到Design tab

  2. 在Component Tree窗体中,右击布局文件,然后点击Convert layout to ConstraintLayout(如下图)。


当然,
也可以新建一个新的约束布局。
新建一个布局文件

输入布局文件的名字,将布局的根元素改为
android.support.constraint.ConstraintLayout

最后点击完成

添加约束

拖一个View到布局编辑器中。当你添加了一个View到ConstraintLayout中,他的四个角对应着的四个小矩形框是控制大小的,每一条边有四个圆形的约束控制点。


这里主要包含几种类型的约束

  1. 尺寸大小
  2. 边界约束
  3. 基准线约束
  4. 约束到一个引导线(辅助线)

尺寸大小

尺寸约束使用的是『实心方块』,如图:

这个很好理解,就是调整组件的大小。

你可以使用View每个角的控制点去调整其大小,但是这样做只是把宽高写死,这样做不能适应不同的内容和不同的屏幕大小,我们应该避免这样去使用。为了选择一个动态的大小模式或者定义一个更具体的尺寸,请单击并打开编辑器右侧的Properties窗口,如下图。


灰色的矩形区域,代表选择的View,矩形的的符号代表宽和高。

  • (>>>)Wrap Content:View的大小与其内容适配

  • (有点像弹簧的图标)Any Size:View大小刚好匹配其对应的约束,他的实际值是0dp,表示这个View没有期望的尺寸,但是他渲染后的大小将会匹配其约束。

  • (直线)Fixed:View的大小的是固定的

点击符号即可在上面三种模式中互相切换。
** 注意:你不应该在ConstraintLayout中使用match_parent,而是使用0dp。**

边界约束
边界约束使用的是『空心圆圈』,如图:

边界约束,是使用最多的约束,它用于建立组件与组件之间、组件与Parent边界之间的约束关系,实际上,就是确定彼此的相对位置。

单击View选中,然后单击并按住一个约束控制点拖拽这条线到一个可用的锚点(其他View、Layout的边缘或者引导线),当你松开,这个约束将会被创建,两个View也将被默认的margin隔开。



为了确保左右的View都被均衡的隔开,点击工具栏的Margin 去为新添加进布局的View选择一个默认的margin值。


Button将会显示你当前选择的值,你做的更改将应用于之后你新添加的View。
你也可以通过点击Properties面板线上的数字去更改margin的值。

工具中提供的margin值全是8的倍数,帮助你的View与Material Design的推荐的8dp的方形网格保持一致

基准线约束

基准线约束,使用的是『空心圆角矩形』,如图:


基准线约束,是让两个带有文本属性的组件进行对齐的,可以让两个组件的文本按照基准线进行对齐。唯一要注意的是,你需要把鼠标放在控件上,等基准线约束的图形亮了,才可以进行拖动。

约束到一个引导线(辅助线)

你可以添加一个水平和垂直方向上的引导线,这可以当做你的附加约束。你在布局内可以定位这个引导线,dp和百分比作为单位均可。

想要创建这个引导线,在工具栏点击Guidelines(如下图),然后点击Add Vertical Guidelineo或者Add Horizontal Guideline即可。

拖动引导线中间的圆即可定位引导线的位置。




当你创建一个约束的时候,一定要记得下面几点规则:
每一个View必须有两个约束:一个水平的,一个垂直的。

只有约束控制点和另外一个锚点在同一平面才能创建约束(也就是说将要创建的约束的View和锚点View属于同一级)。因此一个View的垂直平面(左侧和右侧)只能被另一个的垂直平面约束,基线只能被其他基线约束。

一个约束控制点,只能被用来创建一次约束,但是可以在同一锚点创建多个约束(来自不同的View)

如果你想要删除一个约束,先选举中View,然后点击需要删除的约束控制点即可。

使用自动连接和约束推断

自动连接(Autoconnect) 为添加进布局的View自动创建两个或者多个约束,Autoconnect 默认被禁用,你可以通过点击编辑器工具栏中的Turn on Autoconnect(一个有点像磁铁的图片)开启他。

当你开启了Autoconnect,当你添加新的View到布局之后Autoconnect就会自动创建约束,他不会为已经存在的View创建约束。如果你拖动View一次,约束就值将会改变,但是之前的约束本身不会被改变。所以如果你想重新去定位View,那么你必须删除之前的约束。

或者,你可以点击Infer Constraints(一个有点像电灯的图标)去为布局中所有的View创建约束

Infer Constraints扫描整个布局为所有的View决定一套最有效的约束,因此他可以创建两个距离很远的View之间的约束。然而Autoconnect,只能为新添加进布局的View创建约束,并且他创建的约束仅仅只能是距离最近的元素。在这两种情况下,你可以随时通过点击约束控制点去删除约束然后创建新的约束去修改他。

快速对齐Align

工具栏中有个对齐图标,可以点击按钮直接让多个控件对齐。

最后,上面一些操作还可以通过右键点击控件找到。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,198评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,663评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,985评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,673评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,994评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,399评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,717评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,407评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,112评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,371评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,891评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,255评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,881评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,010评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,764评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,412评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,299评论 2 260

推荐阅读更多精彩内容